ASP.NET MVC 4 和 MVCContrib Grid：呈现复杂类型中每个 TR 和 Post 值的复选框答案

【问题标题】：ASP.NET MVC 4 and MVCContrib Grid: Render Checkbox for each TR and Post values in complex typeASP.NET MVC 4 和 MVCContrib Grid：呈现复杂类型中每个 TR 和 Post 值的复选框
【发布时间】：2012-10-28 16:54:57
【问题描述】：

MVCContrib 网格：

@model ViewModel
@using (Html.BeginForm("SendData", "Home", FormMethod.Post))
{
    @Html.Grid(Model.List).Columns(c =>
    {
        c.For(x => x.Id);
        c.For(x => x.Name);
        c.For(x =>Html.Partial("Partial/CheckBoxTemplate", new CheckBoxViewModel { Id = x.Id })).Named("Options");
    })

    @Html.SubmitButton()
}

控制器发布操作：

public ActionResult SendData(List<CheckBoxViewModel> list)
{
    return View();
}

视图模型：

public class CheckBoxViewModel
{
    public int Id { get; set; }
    public bool CheckBox { get; set; }
}

public class ViewModel
{
    public IPagination<Data> List { get; set; }
}

public class Data
{
    public int Id { get; set; }
    public string Name { get; set; } 
}

局部视图：

@model MvcApplication1.Models.CheckBoxViewModel

@Html.HiddenFor(x => x.Id)
@Html.CheckBoxFor(x => x.CheckBox)

默认情况下，所有复选框都未选中。

如何在SendData 操作中检索所有选中的复选框值？

【问题讨论】：

Partial/CheckBoxTemplate.cshtml 里面有什么？此外，您似乎绑定到某些Name 属性（c.For(x => x.Name);），但我看不到您的CheckBoxViewModel 中定义的此类属性。能否请您出示您的真实代码？
但是您只将 Id 传递给您的部分，并且您从未设置布尔值 CheckBox 属性。你为什么不使用视图模型？为什么您的 ViewModel 使用 IPagination<Data> 属性而不是 IPagination<CheckBoxViewModel> 更有意义，因为您尝试在视图中生成复选框？

标签： c# asp.net checkbox asp.net-mvc-4 mvccontrib-grid

【解决方案1】：

我建议您使用能够反映您的视图要求的真实视图模型（显示一个包含每行一个复选框的网格，并显示项目的 ID 和名称，并在您的列表中检索这些值）回发操作）：

public class CheckBoxViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public bool CheckBox { get; set; }
}

public class ViewModel
{
    public IPagination<CheckBoxViewModel> List { get; set; }
}

然后将您的视图强类型化到此视图模型：

@model ViewModel

@using (Html.BeginForm("SendData", "Home", FormMethod.Post))
{
    @Html.Grid(Model.List).Columns(c =>
    {
        c.For(x => x.Id);
        c.For(x => x.Name);
        c.For(x => Html.Partial("Partial/CheckBoxTemplate", x)).Named("Options");
    })

    <button type="submit">OK</button>
}

最后你的部分可能看起来像这样：

@model CheckBoxViewModel

@{
    var index = Guid.NewGuid().ToString();
}

@Html.Hidden("list.Index", index)
@Html.Hidden("list[" + index + "].Id", Model.Id)
@Html.Hidden("list[" + index + "].Name", Model.Name)
@Html.CheckBox("list[" + index + "].CheckBox", Model.CheckBox)

现在，当SendData 操作被调用时，它将被传递给您的视图模型列表。

或者，您可以使用 following article 中提供的 Html.BeginCollectionItem 帮助器，这将允许您使用强类型版本的帮助器：

@model CheckBoxViewModel
@using(Html.BeginCollectionItem("list")) 
{
    @Html.HiddenFor(x => x.Id)
    @Html.HiddenFor(x => x.Name)
    @Html.CheckBoxFor(x => x.CheckBox)
}

推荐阅读：Model Binding To A List。

【讨论】：

有一件事让我很吃惊：CheckBoxFor 为什么要创建一个额外的输入隐藏字段？
因为在 HTML 中，如果未选中复选框，则复选框不会发送值。因此，ChekBox 助手添加了一个带有硬编码 false 值的附加隐藏字段。这样如果未选中复选框 false 将绑定到视图模型的布尔字段，如果选中复选框，将发送 2 个同名值：true 和 false，第一个值将被绑定。