如何在Controller中获取DevExtreme多选DropDownBox的选中值？

我之前在项目里也碰到过一模一样的问题，当时查了好一会儿才找到症结，给你梳理几个关键的解决步骤，应该能帮你搞定：

1. 确保DropDownBox前端配置正确 #

首先要确认你的DropDownBox已经正确开启多选模式，并且绑定的字段名称和后端模型一致。这里有个完整的配置示例：

@(Html.DevExtreme().DropDownBox()
    .Name("SelectedItemIds") // 这个名称必须和后端ViewModel的字段名完全匹配
    .SelectionMode(SelectionMode.Multiple)
    .ValueExpr("Id") // 对应数据源中用来标识选项的主键字段（比如int类型的Id）
    .DisplayExpr("DisplayName") // 前端显示的文本字段
    .DataSource(d => d.Mvc().Controller("DataController").LoadAction("GetAllItems"))
    .ContentTemplate(@<text>
        <!-- 内部的List组件要和DropDownBox保持一致的ValueExpr和DisplayExpr -->
        @(Html.DevExtreme().List()
            .DataSource(new JS("component.getDataSource()"))
            .SelectionMode(SelectionMode.Multiple)
            .ValueExpr("Id")
            .DisplayExpr("DisplayName")
            // 关键：选中变化时要同步更新DropDownBox的value
            .OnSelectionChanged("function(e) { component.option('value', e.selectedItems); }")
        )
    </text>)
)

重点注意：

• Name属性必须和后端模型的字段名完全一致，这是模型绑定的基础
• 内部List组件的OnSelectionChanged事件一定要正确同步DropDownBox的value，否则选中的项不会被提交到后端

2. 后端ViewModel字段类型要匹配 #

你的ViewModel里必须定义一个数组/集合类型的字段，用来接收多选的结果，类型要和DropDownBox的ValueExpr对应：

public class YourSubmitViewModel
{
    // 如果ValueExpr是"Id"（int类型），就用List<int>；如果是字符串类型就用List<string>
    public List<int> SelectedItemIds { get; set; }

    // 其他表单字段...
}

3. Controller的Post方法正确接收模型 #

确保你的Post方法直接接收ViewModel参数，ASP.NET Core的模型绑定会自动解析提交的多选值：

[HttpPost]
public IActionResult SubmitForm(YourSubmitViewModel model)
{
    // 这里就能直接拿到选中的项了
    if (model.SelectedItemIds != null && model.SelectedItemIds.Any())
    {
        // 处理选中的Id集合
        foreach (var itemId in model.SelectedItemIds)
        {
            // 业务逻辑...
        }
    }

    return RedirectToAction("Index");
}

4. 排查提交参数是否正确 #

如果还是拿不到值，可以用浏览器开发者工具（F12）检查Post请求的Form Data：

• 正常情况下，你会看到类似SelectedItemIds[]: 1、SelectedItemIds[]: 3这样的参数（多个选中值）
• 如果没有这些参数，说明前端配置有问题，比如Name属性不匹配，或者SelectionChanged事件没有同步value

5. Ajax提交的特殊处理 #

如果是用Ajax手动提交表单，要确保正确序列化多选值：

// 获取DropDownBox实例
const dropDownBox = $("#SelectedItemIds").dxDropDownBox("instance");
// 获取选中的值
const selectedValues = dropDownBox.option("value");

$.ajax({
    url: "/YourController/SubmitForm",
    type: "POST",
    contentType: "application/json",
    // 序列化数据时要和ViewModel字段名对应
    data: JSON.stringify({ SelectedItemIds: selectedValues }),
    success: function(response) {
        // 处理响应
    }
});

按照上面的步骤检查一遍，应该就能顺利拿到多选的选中值了！

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