ASP.NET MVC：如何将View页面Dropdown转为Checkbox并实现动态取值

首先得明确：Dropdown是单选控件，而Checkbox是多选控件，所以咱们的模型、视图都要适配多选的逻辑，不能直接照搬Dropdown的写法。下面是完整的改造步骤：

1. 调整你的实体/视图模型 #

原来的模型里Hobby应该是单个int类型，现在要改成支持多选的集合类型，比如在你的员工模型里添加：

public List<int> SelectedHobbyIds { get; set; }

（如果是单独的视图模型，就把这个属性加进去）

2. 微调控制器Create方法（避免ViewBag键名冲突） #

你的现有逻辑可以保留，只是把ViewBag的键名改得更清晰，避免和模型属性混淆：

public ActionResult Create() 
{ 
    EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer(); 
    ViewBag.HobbyList = new SelectList(objemployee.GetHobby(), "Id", "HobbyName"); 
    return View(); 
}

3. 修改视图页面，生成Checkbox列表 #

把原来的Dropdown代码替换成循环生成Checkbox的逻辑，用Html.CheckBoxFor绑定到多选集合：

<div class="form-group">
    @Html.Label("爱好选择", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @foreach (var item in (SelectList)ViewBag.HobbyList)
        {
            <div class="checkbox">
                <label>
                    @Html.CheckBoxFor(m => m.SelectedHobbyIds, new { value = item.Value })
                    @item.Text
                </label>
            </div>
        }
    </div>
    @Html.ValidationMessageFor(model => model.SelectedHobbyIds, "", new { @class = "text-danger" })
</div>

这里的核心是：循环遍历爱好列表，每个项生成一个Checkbox，提交时框架会自动把所有选中的Id收集到SelectedHobbyIds集合里。

4. 处理表单提交的Create方法 #

在POST方法里直接获取选中的爱好Id集合即可：

[HttpPost]
public ActionResult Create(EmployeeModel model)
{
    if (ModelState.IsValid)
    {
        // model.SelectedHobbyIds就是用户选中的所有爱好Id的集合
        // 这里可以写你的保存逻辑，比如循环插入员工-爱好关联数据
        foreach (var hobbyId in model.SelectedHobbyIds)
        {
            // 执行数据库操作，比如调用存储过程关联员工和爱好
        }
        return RedirectToAction("Index");
    }
    // 验证失败时重新加载爱好列表
    EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();
    ViewBag.HobbyList = new SelectList(objemployee.GetHobby(), "Id", "HobbyName");
    return View(model);
}

额外提示 #

• 如果是编辑场景需要默认选中某些爱好，只需要在控制器里给SelectedHobbyIds赋值对应的Id集合即可
• 确保clsHobbyList类的Id和HobbyName属性与数据库字段正确映射

内容的提问来源于stack exchange，提问作者user12798622