如何创建复选框列表？

Question

我知道有许多 CheckBoxListFor 辅助方法的自定义实现来填补 MVC 框架中缺少的功能。但我还没有准备好使用它们。我有兴趣仅使用 MVC 4 或 5 提供的功能创建复选框列表。所以，我创建了这个模型类：

使用 System.Collections.Generic； 使用 System.ComponentModel.DataAnnotations； 命名空间 MvcApplication1.Models { 公共类 FruitViewModel { 公共 int[] SelectedFruits { 获取；放; } 公共 IList 水果 { 得到 { 返回新列表{ 新水果{Id=1, Name="Apple", Selected = false}, 新水果{Id=2, Name="Banana", Selected = false}, 新水果{Id=3, Name="Cherry", Selected = false}, 新水果{Id=4, Name="Durian", Selected = false}, 新水果{Id=5, Name="Elderweiss Grape", Selected = false} }; } } } 公共课水果 { 公共 int ID { 获取；放; } 公共字符串名称 { 获取；放; } 公共布尔选择{得到;放; } } }

这里是控制器类：

使用 MvcApplication1.Models； 使用 System.Web.Mvc； 命名空间 MvcApplication1.Controllers { 公共类 FruitController : 控制器 { 公共行动结果索引（） { FruitViewModel 模型 = 新 FruitViewModel(); 返回视图（模型）； } [HttpPost] 公共 ActionResult 索引（FruitViewModel 模型） { 如果（模型状态。IsValid） { } 返回视图（模型）； } } }

这是剃刀视图：

@model MvcApplication1.Models.FruitViewModel

@{
    ViewBag.Title = "Index";
}

<h2>Select your favorite fruits</h2>

@using (Html.BeginForm("Index", "Fruit"))
{
    <p>Using Html helper method:</p>
    for (int i = 0; i < Model.Fruits.Count; i++)
    {

        @Html.CheckBoxFor(m => m.Fruits[i].Selected) @Model.Fruits[i].Name<br />
    }

    <p>Plain html without html helper</p>

      for (int i = 0; i < Model.Fruits.Count; i++)
    {
          <input type="checkbox" name="SelectedFruits" value="@Model.Fruits[i].Id" checked="@Model.Fruits[i].Selected" />
 @Model.Fruits[i].Name<br />
    }

    <input type="submit" name="submit" value="Submit" />
}

以下是我遇到的问题：

1. 纯 HTML 版本将使用我选择的水果的 ID 正确填充 SelectedFruits 集合，正如您从屏幕截图中看到的那样。但是当页面在回发后刷新时，选中的复选框状态会重置为未选中。

2. 使用 Html 帮助程序 CheckBoxFor 的版本不会使用我选择的水果 ID 填充我的 SelectedFruits 集合，尽管它似乎在回发完成后保持复选框状态为选中状态。

所以，无论哪种情况，都有一个大问题。

设置复选框列表的正确方法是什么，以便我可以正确填充 SelectedFruits 集合并在表单发布完成后维护复选框的状态（当我在页面上添加其他内容并且验证失败时很重要） .

Answer 1

我建议您可以使用以下解决方案，

Controller Change [只有Get方法来设置视图显示的数据]

public ActionResult Index()
{
    FruitViewModel model = new FruitViewModel();
    model.Fruits = new List<Fruit>
        {
        new Fruit{Id=1, Name="Apple", Selected = false}, 
        new Fruit{Id=2, Name="Banana", Selected = false}, 
        new Fruit{Id=3, Name="Cherry", Selected = false}, 
        new Fruit{Id=4, Name="Durian", Selected = false}, 
        new Fruit{Id=5, Name="Elderweiss Grape", Selected = false}
    };
    return View(model);
}

FruitModel 更改，我们将属性设置为根据用户选择的水果动态填充。

public int[] SelectedFruits
{
    get
    {
        return Fruits != null && Fruits.Count > 0
        ? Fruits.Where(f => f.Selected == true).Select(f => f.Id).ToArray()
        : new int[0];
    }
    set { }
}

查看页面更改 [Index.cshtml]

for (int i = 0; i < Model.Fruits.Count; i++)
{
    @Html.CheckBoxFor(m => m.Fruits[i].Selected) @Model.Fruits[i].Name<br />
    @Html.HiddenFor(m => m.Fruits[i].Id)
    @Html.HiddenFor(m => m.Fruits[i].Name)
}

我在您的代码中发现的问题是您在 html 中将复选框名称属性用作您手动呈现的复选框的“SelectedFruits”。而 Html Helper 呈现的标记的名称为“Fruits[0].Selected”等......

因此，选择的水果没有正确绑定模型。

如果有任何疑问，请验证当前生成的标记并发布您的反馈。

Answer 2

您的问题是您的视图模型中的 Fruits 属性始终创建一个新数组，其中每个水果的 Selected 属性始终为 false。您可以通过在视图模型中初始化一次数组来修复它：

public IList<Fruit> Fruits
{
    get
    {
        if (_fruits == null)
            _fruits = new List<Fruit> {
                new Fruit{Id=1, Name="Apple", Selected = false}, 
                new Fruit{Id=2, Name="Banana", Selected = false}, 
                new Fruit{Id=3, Name="Cherry", Selected = false}, 
                new Fruit{Id=4, Name="Durian", Selected = false}, 
                new Fruit{Id=5, Name="Elderweiss Grape", Selected = false}
            }
        return _fruits;
    };
}
private List<Fruit> _fruits;

一旦修复，您必须更新控制器以修复 Selected 属性：

[HttpPost]
public ActionResult Index(FruitViewModel model)
{
    foreach (int fruitId in model.SelectedFruits)
        model.Fruits[fruitId].Selected = true;

    return View(model);
}