模型验证失败后如何保留多选下拉框的选中值？

现有代码 #

控制器Get方法 #

[HttpGet]
public ActionResult ContainerList()
{
    List<LoginModel> dropdownList = new List<LoginModel>();
    dropdownList = gateway.SelectDropdown();  //获取下拉框数据
    ViewBag.DropdownList = dropdownList;
}

视图代码 #

<div class="col-md-6 form-group">
    <select class="form-control selectpicker" required="" asp-for="CategoryID" asp-items="@(new SelectList(ViewBag.DropdownList ,"DropdownID","DropdownName"))" multiple data-live-search="true"
            placeholder="Select Categories"
            onchange="console.log($(this).children(':selected').length)">
    </select>
</div>

控制器Post方法 #

[HttpPost]
public IActionResult PasswordVerification(LoginModel loginModel)
{
    if (ModelState.IsValid)
    {
        // 验证通过后的逻辑
    }
    else
    {
        // 验证失败的处理
    }
    List<LoginModel> dropdownList = new List<LoginModel>();
    dropdownList = gateway.SelectDropdown();  //获取下拉框数据
    ViewBag.DropdownList = dropdownList;
    return View(loginModel);
}

LoginModel模型定义 #

public class LoginModel
{
    public Int64 DropdownID { get; set; }
    public string DropdownName { get; set; }
}

已掌握的单选下拉框保留选中值方式 #

ViewBag.city = new SelectList(cityList, "CityID", "CityName", loginModel.CityID);

解决方案 #

1. 调整模型，添加多选绑定字段 #

多选下拉框提交的是多个值，因此需要在LoginModel中添加集合类型字段来接收和存储选中值：

public class LoginModel
{
    public Int64 DropdownID { get; set; }
    public string DropdownName { get; set; }
    // 新增：绑定多选下拉框的选中值集合
    public List<long> CategoryID { get; set; }
}

2. 修改Post方法中的下拉框数据赋值 #

在Post方法重新渲染视图时，构建SelectList时传入选中的集合值：

[HttpPost]
public IActionResult PasswordVerification(LoginModel loginModel)
{
    if (ModelState.IsValid)
    {
        // 验证通过后的逻辑
    }
    else
    {
        // 验证失败的处理
    }
    List<LoginModel> dropdownList = gateway.SelectDropdown();
    // 传入选中的集合值，让框架自动匹配选中项
    ViewBag.DropdownList = new SelectList(dropdownList, "DropdownID", "DropdownName", loginModel.CategoryID);
    return View(loginModel);
}

3. 视图无需额外修改 #

视图中asp-for="CategoryID"已绑定到新增的集合字段，asp-items会自动遍历集合，将与集合值匹配的下拉选项标记为选中状态。

原理说明 #

单选下拉框对应单个值，因此SelectList构造函数最后一个参数是单个值；多选下拉框对应多个值，传入集合类型的选中值后，框架会自动匹配选项值，完成选中状态的设置。

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