如何将复选框映射到 MVC 模型成员？答案

【问题标题】：How do I map checkboxes onto MVC model members?如何将复选框映射到 MVC 模型成员？
【发布时间】：2012-05-18 08:47:14
【问题描述】：

我有一个 MVC 视图

<%@ Page Language="C#" MasterPageFile="PathToMaster" Inherits="System.Web.Mvc.ViewPage<ModelData>" %>

我有一个带有 HTML 标记的表单，用于一组复选框：

<label for="MyCheckbox">Your choice</label>
<input type="checkbox" id="Option1" class="checkbox" name="MyCheckbox" value="Option one" />
<label for="Option1">Option one</label><br />
<input type="checkbox" id="Option2" class="checkbox" name="MyCheckbox" value="Option two" />
<label for="Option2">Option two</label><br />

我有一个控制器-动作对

class MyController : Controller {
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult RequestStuff( ModelData data )
    {
    }
}

并且在提交表单时调用该操作。

如何将复选框映射到 ModelData 的成员（以及我必须添加到 ModelData 的成员），以便在提交表单时 data 存储有关选中复选框的信息？

【问题讨论】：

标签： c# .net asp.net-mvc iis model

【解决方案1】：

好的，这将适用于 MVC3，但是 - 除了语法更改 - 也应该在 MVC2 中工作。方法基本相同。

首先，你应该准备一个合适的（视图）模型

public class MyViewModel
{
    [DisplayName("Option 1")]
    public bool Option1 { get; set; }

    [DisplayName("Option 2")]
    public bool Option2 { get; set; }
}

然后你将这个模型传递给你正在显示的视图（控制器）：

public ActionResult EditMyForm()
{
    var viewModel = new MyViewModel()
    return View(viewModel);
}

表格：

@model MyViewModel
@using( Html.BeginForm())
{
    @Html.Label("Your choice")

    @Html.LabelFor(model => model.Option1) // here the 'LabelFor' will show you the name you set with DisplayName attribute
    @Html.CheckBoxFor(model => model.Option1)

    @Html.LabelFor(model => model.Option2)
    @Html.CheckBoxFor(model => model.Option2)
    <p>
        <input type="submit" value="Submit"/>
    </p>
}

现在，HTML 助手（所有CheckBoxFor、LabelFor、EditorFor 等）允许将数据绑定到模型属性。

现在请注意，当属性类型为 bool 时，EditorFor 也会在视图中为您提供复选框。 :)

然后，当你提交给控制器时，它会自动绑定值：

[HttpPost]
public ActionResult EditMyForm(MyViewModel viewModel)
{
    //And here the view model's items will be set to true/false, depending what you checked.
}

【讨论】：

提及 EditorFor 是一个好点。 EditorFor 几乎总是有用的。根据数据类型，它会创建文本输入、文本区域、复选框等。

【解决方案2】：

首先为选项定义SelectList。这将仅用于呈现复选框

    public IList<SelectListItem> OptionsSelectList { get; set; }

然后，您定义的模型将在发布后保留单个选择的选项的值

public class ChooseOptionViewModel
{
    public int OptionIdentifier { get; set; } //name or id
    public bool HasBeenChosen { get; set; } //this is mapped to checkbox
}

然后在ModelData中列出这些选项

public IList<ChooseOptionViewModel> Options { get; set; }

最后是视图

    @for (int i = 0; i < Model.OptionsSelectList.Count(); i++)
    {
        <tr>
            <td class="hidden">
                @Html.Hidden("Options[" + i + "].OptionIdentifier", Model.OptionsSelectList[i].Value)
            </td>
            <td>
                @Model.OptionsSelectList[i].Text
            </td>
            <td>
                @Html.CheckBox("Options[" + i + "].HasBeenChosen", Model.Options != null && Model.Options.Any(x => x.OptionIdentifier.ToString().Equals(Model.OptionsSelectList[i].Value) && x.HasBeenChosen))
            </td>
        </tr>
    }

发布后，您只需检查Options.Where(x => x.HasBeenChosen)

这是全功能的，它可以让你在发生验证错误等时重新显示视图。这看起来有点复杂，但我没有想出比这更好的解决方案。

【讨论】：