MVC3中的CheckboxList查看并获取传递给控制器​​的选中项

我有一个MoreInfo类：

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

我想知道如何在视图上创buildcheckbox列表，并在提交时将选中的项目传递给我的控制器。

我将如何去创buildcheckbox列表，以及如何通过所有选中的项目并处理它们？

Answer 1

让我们稍微修改你的模型：

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

那么你可以有一个控制器：

 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 ... } } 

那么你将有一个相应的视图（ ~/Views/Home/Index.cshtml ），它将包含允许用户检查/取消选中值的表单：

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

最后是编辑器模板（ ~/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;} } 

控制器操作：

 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); } 

剃刀视图：

 @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> 

更多信息在这里

Answer 3

它很容易：
1.用stringid和布尔值创buildcheckbox类。
2.把控制器方法中的checkbox列表放在一些名字里。
3.在视图中dynamic创build2个字段，但要确保符合razor引擎命名系统。

要创build一个dynamic的checkbox列表，你需要了解剃刀引擎的工作方式，说你有这个代码
在视图的头部你包含一个模型，如下所示：

 @model MyProject.Site.Models.MyWebModel 

该模型有一个设置类，里面有一个bool：

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

在视图中你有：

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

总之这会创build下面的html代码：

 <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" /> 

对于CheckBoxFor来说非常好，这是框架的一部分，我们如何处理数组？

---

所以现在我们所要做的就是了解如何在控制器方法中使用list，比如说你有这个类：

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

在控制器中你有这个：

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

并且视图将如下所示：

 @{ 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> 

不要忘记视图中的表单：

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

现在在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> 

你需要注意的是inputcheckbox的名称和input隐藏我们使用类似于razor引擎创build名称的方式，所以在提交引擎后，将把它渲染为一个数组，所以你可以创build任何dynamiccheckbox列出你想要什么，就像你会在任何其他语言（说PHP等…）。

它很容易：它很容易：
1.用stringid和布尔值创buildcheckbox类。
2.把控制器方法中的checkbox列表放在一些名字里。
3.在视图中dynamic创build2个字段，但要确保符合razor引擎命名系统。

我希望它帮助。