CheckboxList in MVC3 View and retrieve marked items passed to the controller

Question

I have a class for MoreInfo:

public class MoreInfo { public string Name { get; set; } public string selectedCheckboxItems {get; set;} } 

I want to know how to create a list of checkboxes in a view and pass the marked items to my controller on send.

How do I create a list of checkboxes and how do I pass all checked items and process them?

Answer 1

Modify the model a bit:

 public class ItemViewModel { public string Id { get; set; } public string Name { get; set; } public bool Checked { get; set; } } 

then you can have a controller:

 public class HomeController: Controller { public ActionResult Index() { // This action is used to render the form => // we should populate our model with some values // which could obviously come from some data source var model = new[] { new ItemViewModel { Id = "1", Checked = true, Name = "item 1" }, new ItemViewModel { Id = "2", Checked = false, Name = "item 2" }, new ItemViewModel { Id = "3", Checked = true, Name = "item 3" }, }; return View(model); } [HttpPost] public ActionResult Index(IEnumerable<ItemViewModel> items) { // This action will be invoked when the form is submitted // and here the view model will be properly bound and // you will get a collection of all items with their // corresponding id, name and whether they were checked or not ... } } 

then you will have the corresponding view ( ~/Views/Home/Index.cshtml ), which will contain a form that allows the user to check / cancel the values:

 @model IEnumerable<AppName.Models.ItemViewModel> @using (Html.BeginForm()) { @Html.EditorForModel() <input type="submit" value="OK" /> } 

and finally, the editor template ( ~/Views/Home/EditorTemplates/ItemViewModel.cshtml ):

 @model AppName.Models.ItemViewModel // Those two hidden fields are just to persist the id and name @Html.HiddenFor(x => x.Id) @Html.HiddenFor(x => x.Name) <div> @Html.CheckBoxFor(x => x.Checked) @Html.LabelFor(x => x.Checked, Model.Name) </div> 

Answer 2

 public class MoreInfo { public Int64 Id {get; set;} public string Name { get; set; } public bool Checkbox {get; set;} } 

Controller action:

 public ActionResult Index(){ var list = new List<MoreInfo>{ new MoreInfo{Id = 1, Name = "Name1", Checkbox = false}, new MoreInfo{Id = 2, Name = "Name2", Checkbox = false}, new MoreInfo{Id = 3, Name = "Name3", Checkbox = true}, }; return View(list); } [HttpPost] public ActionResult Index(List<MoreInfo> lists){ return View(lists); } 

Shaver Type:

 @model List<MoreInfo> <form action="" method="POST"> @for (var i = 0; i < Model.Count();i++ ) { @Html.HiddenFor(it => it[i].Id) @Html.TextBoxFor(it => it[i].Name) @Html.CheckBoxFor(it => it[i].Checkbox) } <input type="submit" /> </form> 

More info here

Answer 3

it is easy:
1. create a checkbox class with row id and bool value.
2. put a check list in the controller method with some name.
3. Create 2 fields dynamically in your view, but make sure you match the razor motor naming system.

to create a dynamic list of flags, you need to understand how the shaving engine works, let's say you have this code
in the head of the view, you include the following model:

 @model MyProject.Site.Models.MyWebModel 

this model has an installation class that has a bool inside like this:

 public class MyWebModel { public HighchartsSettingModel Settings { get; set; } } public class HighchartsSettingModel { public bool JoinSameType{ get; set; } } 

and in the view you have:

 @Html.CheckBoxFor(x => x.Settings.JoinSameType) 

In short, this creates the following html code:

 <input data-val="true" data-val-required="The JoinSameType field is required." id="Settings_JoinSameType" name="Settings.JoinSameType" type="checkbox" value="true" /> <input name="Settings.JoinSameType" type="hidden" value="false" /> 

so good for CheckBoxFor that is part of the framework, how do we work with arrays?

---

so now all we need to do is understand how to work with the list in the controller method, let's say you have this class:

 public class Checkbox{ public string Id { get; set; } public bool Value { get; set; } } 

and in the controller you have this:

 public ActionResult SensorSearch(List<Checkbox> selectedSensors, string search, string subSearch, string page, string back) 

and the view will look like this:

 @{ int counter = 0; string id_name, id_id, value_id, value_name; } @foreach (var item in Model.SensorList) { id_id = "selectedSensors_" + counter + "__Value"; id_name = "selectedSensors[" + counter + "].Value"; value_id = "selectedSensors_" + counter + "__Id"; value_name = "selectedSensors[" + counter + "].Id"; counter++; <li><a href="#" style="padding-top: 0px;padding-bottom: 0px;padding-right: 42px;padding-left: 0px;"> <label style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;" data-corners="false"> <fieldset data-role="controlgroup" > <input id="@id_id" name="@id_name" type="checkbox" value="true" /> <input id="@value_id" name="@value_name" type="hidden" value="@item.Key" /> <label for="@id_id" style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;"> <label style="padding:10px 0px 0px 10px;"> <h3>@item.Key</h3> <p>User Name: @item.Value</p> </label> </label> </fieldset> </label> </a><a href="#" rel="external"></a> </li> } </ul> 

allows not to forget the form in the view:

 @using (Html.BeginForm("SensorSearch", "Home", Model.PageNav.StayRouteValues, FormMethod.Post, new Dictionary<string, object>() { { "data-ajax", "false" }, { "id", "sensor_search_form" } })) 

now the displayed page will look like this in the aspect of the checkbox:

 <li><a href="#" style="padding-top: 0px;padding-bottom: 0px;padding-right: 42px;padding-left: 0px;"> <label style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;" data-corners="false"> <fieldset data-role="controlgroup" > <input id="selectedSensors_16__Value" name="selectedSensors[16].Value" type="checkbox" value="true" /> <input id="selectedSensors_16__Id" name="selectedSensors[16].Id" type="hidden" value="10141" /> <label for="selectedSensors_16__Value" style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;"> <label style="padding:10px 0px 0px 10px;"> <h3>10141</h3> <p>User Name: 10141_TEN-2MP</p> </label> </label> </fieldset> </label> </a><a href="#" rel="external"></a> </li> 

what you need to notice is the names given by the input flag and hidden input, we used it in the same way as the razor engine creates a name, and therefore after sending the engine will display it as an array, and therefore you can create any dynamic list of flags, wherever you want, like in any other language (e.g. php, etc.).

it's easy: it's easy:
1. create a checkbox class with row id and bool value.
2. put a check list in the controller method with some name.
3. Create 2 fields dynamically in your view, but make sure you match the razor motor naming system.

I was hoping this helped.