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

我有一个MoreInfo类:

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

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

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

    3 Solutions collect form web for “MVC3中的CheckboxList查看并获取传递给控制器​​的选中项”

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

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

    更多信息在这里

    它很容易:
    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引擎命名系统。

    我希望它帮助。