ASP.NET MVC中如何结合ViewBag使用@Html.CheckBoxFor替代原生复选框

核心问题原因说明 #

• Post请求后ViewBag不会持久化数据，你在Post动作中读取ViewBag.ItemList天然为空，不可能拿到提交后的选中值
• 原生input没有按照ASP.NET MVC模型绑定规则设置name属性，提交的选中状态无法被服务端接收
• 原生input未携带@Html.CheckBoxFor自动生成的标准CSS类，导致样式和已有复选框列表不一致
• 你取值代码中写的IsCheck是属性名错误，你的test类对应布尔属性为IsAvailable

方案1：优先推荐（修改视图模型，完全规避ViewBag问题） #

你之前认为「无法同时返回两套列表」是误区，直接扩展现有CtrList视图模型即可：

1. 修改CtrList类，新增第二套列表属性

public class CtrList
{
    // 原有属性保留
    public List<test> reflist { get; set; }
    // 新增第二套复选框的列表属性
    public List<test> ItemList { get; set; }
}

2. Index动作中同时给两套属性赋值

public IActionResult Index()
{
    // 原有第一套列表逻辑保留
    List<test> chk = new List<test>();
    // ... 原有赋值逻辑省略
    CtrList chklist = new CtrList();
    chklist.reflist = chk;
    
    // 给新增的第二套列表赋值
    List<test> ItemList = new List<test>();
    ItemList.Add(new test {ItemID=1, ItemName="apple", IsAvailable = false});
    ItemList.Add(new test {ItemID=2, ItemName="mango", IsAvailable = false});
    ItemList.Add(new test {ItemID=3, ItemName="stuck", IsAvailable = false});
    ItemList.Add(new test {ItemID=4, ItemName="blocked", IsAvailable = false});
    ItemList.Add(new test {ItemID=5, ItemName="help:(", IsAvailable = false});
    chklist.ItemList = ItemList;
    
    return View(chklist);
}

3. 视图中直接用强类型CheckBoxFor渲染，自动和原有样式匹配

<table>
    @for (int i = 0; i < Model.ItemList.Count; i++)
    {
        <tr>
            <td>
                @Html.CheckBoxFor(m => m.ItemList[i].IsAvailable, new { onclick = "CheckOnlyOneCheckBox(this);", id = $"Check_{Model.ItemList[i].ItemID}" })
                @Html.LabelFor(m => m.ItemList[i].IsAvailable, Model.ItemList[i].ItemName, new { @for = $"Check_{Model.ItemList[i].ItemID}" })
                @Html.HiddenFor(m => m.ItemList[i].ItemID)
                @Html.HiddenFor(m => m.ItemList[i].ItemName)
            </td>
        </tr>
    }
</table>

4. Post动作中直接从模型取值

[HttpPost]
public IActionResult Index(CtrList model)
{
    foreach (var item in model.ItemList)
    {
        if (item.IsAvailable)
        {
            var zz = item.ItemName;
            // 处理选中项逻辑
        }
    }
    // 后续逻辑省略
}

方案2：坚持使用ViewBag的兼容方案 #

如果不想修改现有CtrList模型，可按以下方式优化：

1. 视图中先将ViewBag转为强类型，用Html.CheckBox方法生成和原有结构一致的元素，保证样式匹配

@{
    // 先转强类型避免动态类型运行时错误
    var itemList = ViewBag.ItemList as List<test>;
}
<table>
    @for (int i = 0; i < itemList.Count; i++)
    {
        <tr>
            <td>
                @* 按模型绑定规则设置name，生成的结构和CheckBoxFor完全一致 *@
                @Html.CheckBox($"ItemList[{i}].IsAvailable", itemList[i].IsAvailable, new { onclick = "CheckOnlyOneCheckBox(this);", id = $"Check_{itemList[i].ItemID}" })
                @Html.Label($"Check_{itemList[i].ItemID}", itemList[i].ItemName)
                @Html.Hidden($"ItemList[{i}].ItemID", itemList[i].ItemID)
                @Html.Hidden($"ItemList[{i}].ItemName", itemList[i].ItemName)
            </td>
        </tr>
    }
</table>

2. Post动作中直接接收绑定后的ItemList参数

[HttpPost]
public IActionResult Index(CtrList chklist, List<test> ItemList)
{
    foreach (var item in ItemList)
    {
        if (item.IsAvailable)
        {
            var zz = item.ItemName;
            // 处理选中项逻辑
        }
    }
    // 后续逻辑省略
}

内容的提问来源于stack exchange，提问作者dark.vador