c# - 如何创建复选框列表？

Question

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

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
namespace MvcApplication1.Models
{
    public class FruitViewModel
    {
        public int[] SelectedFruits { get; set; }
        public IList Fruits
        {
            get
            {
                return new List{
                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}
            };
            }
        }
    }

    public class Fruit
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public bool Selected { get; set; }
    }
}

And here is the controller class:

using MvcApplication1.Models;
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    public class FruitController : Controller
    {
        public ActionResult Index()
        {
            FruitViewModel model = new FruitViewModel();
            return View(model);
        }

        [HttpPost]
        public ActionResult Index(FruitViewModel model)
        {
            if (ModelState.IsValid)
            {   
            }

            return View(model);
        }
    }
}

And here is the razor view:

@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方法设置 View 显示的数据]

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 Change，我们将属性设置为根据用户选择的水果动态填充。

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”等名称......

因此，所选水果未正确绑定(bind)模型。

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