Develop Reference

how to make check box selection for Listbox in mvc4 Razor

i have a listbox selection in my view ,i need to hold the ctrl key for select multiple items , i am using the following code :
#Html.ListBoxFor(
m => m.SelectedSkills ,
new MultiSelectList( listItems, "Id", "Name", #Model.SelectedSkills ),
new { Multiple = "multiple" }
)
i want to put a checkbox infront of each list item,user can check/uncheck the checkbox to select/deselect an item ,and when it post the form,only the selected checkboxes values should be passed in controller action , How can i acheive this...

You can do it like this:
First method: Create html tag
<ul>
#foreach (var g in Model.AllSkills)
{
<li>
<input type="checkbox"
name="SelectedSkills"
value="#g.ID" id="#g.ID"
#{if (condition)
{><text> checked='checked' </text> } } />
<label for="#g.ID">#g.Name</label>
</li>
}
</ul>
Now you can post the form and see the selected value is stored in model.SelectedSkills field.
Second method: Using MvcCheckBoxList
<div class="editor-field">
#Html.CheckBoxListFor(model=>model.SelectedSkills,
model=>model.AllSkills,
x=>x.ID,
x=>x.Names)
</div>
For more information please see this.

InvalidOperationException error in cshtml

MVC Application in C#.
A Partial View Displays a dropdown and an "Okay" button. The dropdown displays a list of allowable "Routers" (persons who can route documents in the application). The user can select a person from the dropdown and then have them made the "Router" by clicking the "Okay" button. The code correctly changes the persons designated as router, but the error InvalidOperationException is generated every time the "OKay" button is clicked. The error description is "There is no ViewData item of type 'IEnumerable' that has the key 'RouterElect'."
Part of screenshot:
The code:
#model JudicialPortal.ViewModels.PortalIndexView
<div class="tile">
Change Current Router
#Html.DropDownListFor(x => x.RouterElect, Model.JPortalChamberUsersAsItems, new { #id = "changeCurrentRouterInput", #class = "m-wrap", #onchange = "" })
<button type="button" class="m-btn green-stripe" onclick="changeCurrentRouter();"
style="color: #444; text-decoration: none;">
Okay</button>
</div>
Router Elect is defined in the ViewModel referenced at the top of the code (PortalIndexView):
public string RouterElect { get; set; }
The partial view is called from another cshtml page:
<div id="ChangeRouterSection" class="live-tile" data-mode="carousel" data-direction="vertical" data-delay="7000">
#{Html.RenderPartial("_ChangeCurrentRouter");}
</div>

Dynamic Text in Bootstrap Alert

I have a bootstrap alert like so :
<div class="alert alert-danger">
×
First Error
</div>
My problem is I want to be able to change this text dynamically in my code behind, c#. Ideally, I would like to have multiple bullet pointed error messages in one alert like the image below:
Can anyone provide me with any ideas of how to achieve this?

In your html, have this
<div id="BootstrapErrorMessage" runat="server">
</div>
and in your code, do this
....
MyErrorString += "<li>Bad Password</li>";
....
MyErrorString += "<li>Invalid Date</li>";
....
if (!MyErrorString.isNullOrEmpty()) {
BootstrapErrorMessage.InnerHtml += "×" +
"<ul>" + MyErrorString + "</ul>";
BootstrapErrorMessage.Attributes["class"] = "alert alert-danger";
}

You can download the error messages to the client when he request the model of your page(recommended solution). Or you can post your data to the server and get list of errors to show.
Your html code should be like this:
<div class="bs-example">
<div class="alert alert-danger fade in">
<ul>
<li><strong>First</strong> Error </li>
<li>Second Error</li>
</ul>
</div>
</div>
And each li element should be updated from server(One of the options you choose).

ListBoxFor not unselecting between posts

I have following code in View:
<div class="row form-group">
#Html.LabelFor(x => x.GroupCriteria.Name, Translation.Name, new { #class = "col-sm-4 control-label" })
<div class="col-sm-4">
#Html.ListBoxFor(m => m.GroupCriteria.Name, Model.NameList, new { #class = "multi-select-custom" })
</div>
</div>
...
<button type="submit" name="removeCriterion" value="Name">X</button>Name: #(string.Join(",", Model.GroupCriteria.Name))</button>
...
<button type="submit">#Translation.Update</button>
And in controller:
public ActionResult GetUsers(GroupCriteriaModel groupCriteria, string removeCriterion)
{
if("Name".Equals(removeCriterion)) groupCriteria.Name.Clear();
...
return View(modelWithCriterias);
}
Now what is happening:
When I select/unselect some values by clicking in select then click "Update", everything works fine: selection in returned page is same as what was posted.
Now i click "X" to clear "Name". "removeCriterion" is equal to "Name", so Name list is cleared (in debugger I see it is empty). Debugger in View: "Model.GroupCriteria.Name" is still empty, none of "Model.NameList" is "Selected" (set true). But returned HTML contains same selection as before (same items have attribute 'selected="selected"').
Is this some kind of caching done by MVC? How to avoid this?

Most likely it is being binded from ModelState, so you should clear it:
if("Name".Equals(removeCriterion))
{
groupCriteria.Name.Clear();
ModelState.Clear();
}
If you want to perform the operation in more specific way, you can use ModelState.Remove() in order to remove only the state related to your ListBox.

Html.DropDownList selected value from a list<string>

So I use a list of string to fill a DropDownList it work fine but for the edit part when the user goes to the edit view I need that Relacion have the value is have been saved on the db, selected in the DropDownList. how can dothat?
List<string> x = new List<string> { "string1", "string2", "string3", " string4" };
ViewBag.Relacion = new SelectList(x);
<div class="editor-label">
#Html.LabelFor(model => model.Relacion)
</div>
<div class="editor-field">
#Html.DropDownList("Relacion")
#Html.ValidationMessageFor(model => model.Relacion)
</div>

you need to provide values to your dropdown list not only text strings
if your model does not know about relaction selected value you may use javascrip and do something like this
<script type="text/javascript">
$(document).ready(function () {
$('select[name=Relacion]').val($('#Relaciontext').val());
}
</script>
<div class="editor-field" style="display:none" >
#Html.TextBox("Relaciontext", ViewData["statecode"])
</div>
#Html.DropDownList("Relacion")
ViewData["statecode"]="string1";
but Ideally you need to use the selected list to populate your dropdown list and then model
by creating select list
#Html.DropDownListFor(model => model.Relacion, (IEnumerable<SelectListItem>)ViewData["Relacion"])

I would suggest you to use Telerik controls. They have DropDownList, Combobox, Grid and many more. It's an open source project with many many users.
See this DEMO