如何创建复选框列表？

Posted 2023-03-27

【中文标题】如何创建复选框列表？

【英文标题】：How to create a checkbox list?

【发布时间】：2014-06-12 08:17:50

【问题描述】：

我知道有许多 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" />

以下是我遇到的问题：

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

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

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

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

【问题讨论】：

感谢编辑。请告诉我如何在 SO 帖子中正确格式化剃刀视图。刚才做了30分钟，还是没做好，只好放弃了。非常感谢！

【参考方案1】：

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

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

public ActionResult Index()

    FruitViewModel model = new FruitViewModel();
    model.Fruits = new List<Fruit>
        
        new FruitId=1, Name="Apple", Selected = false, 
        new FruitId=2, Name="Banana", Selected = false, 
        new FruitId=3, Name="Cherry", Selected = false, 
        new FruitId=4, Name="Durian", Selected = false, 
        new FruitId=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”等......

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

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

【讨论】：

是的，这就像一个魅力。非常感谢。在视图模型中创建水果列表会比在控制器操作方法中更好，换句话说，就像@itsme86 建议的那样。

【参考方案2】：

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

public IList<Fruit> Fruits

    get
    
        if (_fruits == null)
            _fruits = new List<Fruit> 
                new FruitId=1, Name="Apple", Selected = false, 
                new FruitId=2, Name="Banana", Selected = false, 
                new FruitId=3, Name="Cherry", Selected = false, 
                new FruitId=4, Name="Durian", Selected = false, 
                new FruitId=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);

【讨论】：

非常感谢。只创建一次水果集合是必不可少的。如果我按照@Saravanan 的建议为每个水果添加两个隐藏字段，则似乎不需要将 Selected 属性设置为 true。最好的解决方案是结合你的和 Saravanan 的。