MVC3 View 中的 CheckboxList 并获取传递给控制器的选中项
Posted
技术标签:
【中文标题】MVC3 View 中的 CheckboxList 并获取传递给控制器的选中项【英文标题】：CheckboxList in MVC3 View and get the checked items passed to the controller 【发布时间】：2011-07-14 03:40:22 【问题描述】：我有一个更多信息类：
public class MoreInfo
public string Name get; set;
public string selectedCheckboxItems get; set;
我想知道如何在视图上创建一个复选框列表，并在提交时将选中的项目传递给我的控制器。
我将如何创建复选框列表以及如何传递所有选中的项目并处理它们？
【问题讨论】：
我做了类似的东西，你可以用它来代替 checkboxlist，它叫做 Lookup with multiselect mrgsp.md:8080/awesome/lookupdemohth 【参考方案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>
【讨论】：
这个答案对 MVC4 仍然有效吗？ 是的，这个解决方案对 MVC 4 仍然有效。 好的。我想我会创建一个单独的问题，因为我的情况有点不同。 这里的 Checked 值作为 true 和 false 传递。如何动态获取复选框值？ @kk1076，你说的动态是什么意思？我不明白你的问题。【参考方案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 MoreInfoId = 1, Name = "Name1", Checkbox = false,
new MoreInfoId = 2, Name = "Name2", Checkbox = false,
new MoreInfoId = 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>
更多信息 here
【讨论】：
谢谢，真的救了我的培根！ 第一个解决方案对我完全不起作用，而这个解决方案效果很好！【参考方案3】：就这么简单： 1. 创建带有字符串 id 和 bool 值的复选框类。 2. 将复选框列表放入控制器方法中，并带有一些名称。 3. 在您的视图中动态创建 2 个字段，但请确保您符合 razor 引擎命名系统。
要创建动态复选框列表，您需要了解剃须刀引擎的工作方式， 说你有这个代码 在视图的头部，您包含这样的模型：
@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)
简而言之，这将创建以下 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 来说非常好，它是框架的一部分，我们如何处理数组？
所以现在我们需要做的就是了解如何在控制器方法中使用列表， 说你有这门课：
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" ))
现在渲染的页面在复选框方面看起来像这样：
<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>
您需要注意的是输入复选框和输入隐藏的名称，我们使用它的方式类似于剃须刀引擎创建名称的方式，因此在提交后引擎会将其呈现为数组，因此您可以创建任何你想要的任何动态复选框列表，就像你在任何其他语言中一样（比如 php 等等......）。
就这么简单： 就这么简单： 1. 创建带有字符串 id 和 bool 值的复选框类。 2. 将复选框列表放入控制器方法中，并带有一些名称。 3. 在您的视图中动态创建 2 个字段，但请确保您符合 razor 引擎命名系统。
我希望它有所帮助。
【讨论】：
这看起来不太容易 :( 翻转它相当复杂以上是关于MVC3 View 中的 CheckboxList 并获取传递给控制器的选中项的主要内容，如果未能解决你的问题，请参考以下文章
ViewModel在MVC3中的应用：一个view显示多个model
如何在 VIEW MVC3 Razor 中显示 webforms 页面 .aspx
如何获取通过 jQuery 选择 CheckBoxList 中的哪个复选框？