MVC5中如何将多选集合绑定到DropDownListFor提交后正常取值

问题原因 #

你的绑定失败核心有两个问题：

1. ASP.NET MVC 默认模型绑定器不支持直接将多选框提交的字符串数组映射为 List<KeyValuePair<string, string>> 类型，多选控件提交时只会传递选中项的value属性组成的数组，无法提供KeyValuePair所需的Key和Value两组数据。
2. 你当前的实现中，移动到右侧选择框的option没有被标记为selected状态，表单默认只会提交多选控件中处于选中状态的option，未选中的即使在右侧列表里也不会被提交。

解决方案 #

步骤1：调整数据模型 #

新增两个辅助属性，一个用于存储提交的选中供应商ID数组，一个用于存储所有可选供应商的选项列表：

public class AccountDto
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Reference { get; set; }
    public List<KeyValuePair<string, string>> AssociatedVendors { get; set; }
    // 新增：用于绑定提交的选中供应商ID
    public List<string> SelectedVendorIds { get; set; }
    // 新增：存储所有可选供应商选项，初始化时填充
    public List<SelectListItem> AllVendors { get; set; }
}

步骤2：修改视图代码 #

左侧源选择框展示所有可选供应商，右侧目标选择框绑定新增的SelectedVendorIds属性：

<!-- 左侧可选供应商列表 -->
@Html.ListBox("vendor-source-select", Model.AllVendors, new { @class = "vendor-select", multiple = "multiple" })

<!-- 右侧已选供应商列表 -->
@Html.ListBoxFor(m => m.SelectedVendorIds, Enumerable.Empty<SelectListItem>(), new { 
    id = "vendor-dest-select", 
    @class = "vendor-select", 
    multiple = "multiple" 
})

步骤3：补充JS逻辑 #

在原有移动选项的逻辑基础上，新增表单提交前自动选中右侧所有option的逻辑，确保所有已选供应商都能被提交：

// 原有移动选项逻辑保留，新增以下代码
$("form").on("submit", function(e) {
    $("#vendor-dest-select option").prop("selected", true);
});

步骤4：控制器中构造AssociatedVendors #

提交后在控制器侧根据选中的供应商ID匹配对应的名称，构造所需的List<KeyValuePair<string, string>>集合：

[HttpPost]
public ActionResult CreateAccount(AccountDto model)
{
    if (ModelState.IsValid)
    {
        model.AssociatedVendors = new List<KeyValuePair<string, string>>();
        var selectedIds = model.SelectedVendorIds ?? new List<string>();
        foreach (var id in selectedIds)
        {
            // 从你的供应商数据源（数据库/缓存等）中获取对应名称
            var vendorName = GetVendorNameById(id);
            if (!string.IsNullOrEmpty(vendorName))
            {
                model.AssociatedVendors.Add(new KeyValuePair<string, string>(id, vendorName));
            }
        }
        // 后续保存逻辑
    }
    // 验证失败时重新填充所有供应商列表返回视图
    model.AllVendors = GetAllVendorOptions();
    return View(model);
}

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