Devextreme单元格模板复选框组值无法传入ASP.NET控制器求助

问题根源 #

你当前的复选框没有和ViewModel的Perusahaan属性绑定，DevExtreme无法自动将复选框选中值同步到数据源，导致提交时该字段无数据。以下是具体解决步骤：

步骤1：调整ViewModel属性类型 #

确保UserDataVM中的Perusahaan字段为字符串数组（推荐）或逗号分隔的字符串，适配多选值的接收：

// UserDataVM.cs
public string[] Perusahaan { get; set; }

步骤2：修改EditCellTemplate，绑定复选框并同步值 #

给每个复选框绑定选中状态，同时通过JS监听值变化，将选中值收集后同步到DataGrid的数据源字段：

columns.AddFor(m => m.Perusahaan)
    .Caption("Perusahaan")
    .Name("Perusahaan")
    .EditCellTemplate(@<text>
        <div class="option-list" style="display: flex; flex-flow: row;width: max-content;">
            <div class="option-item" style="display: flex; flex-flow: column;margin-right:20px">
                @(Html.DevExtreme().CheckBox()
                    .Text("Company 100")
                    .Value(new JS("value && value.includes('Company 100')"))
                    .OnValueChanged("onPerusahaanCheckboxChange")
                )
                @(Html.DevExtreme().CheckBox()
                    .Text("Company 2")
                    .Value(new JS("value && value.includes('Company 2')"))
                    .OnValueChanged("onPerusahaanCheckboxChange")
                )
                @(Html.DevExtreme().CheckBox()
                    .Text("Company 3")
                    .Value(new JS("value && value.includes('Company 3')"))
                    .OnValueChanged("onPerusahaanCheckboxChange")
                )
            </div>
            <div class="option-item" style="display: flex; flex-flow: column;margin-right:20px">
                @(Html.DevExtreme().CheckBox()
                    .Text("Perusahaan 4")
                    .Value(new JS("value && value.includes('Perusahaan 4')"))
                    .OnValueChanged("onPerusahaanCheckboxChange")
                )
                @(Html.DevExtreme().CheckBox()
                    .Text("Perusahaan 5")
                    .Value(new JS("value && value.includes('Perusahaan 5')"))
                    .OnValueChanged("onPerusahaanCheckboxChange")
                )
                @(Html.DevExtreme().CheckBox()
                    .Text("Perusahaan 6")
                    .Value(new JS("value && value.includes('Perusahaan 6')"))
                    .OnValueChanged("onPerusahaanCheckboxChange")
                )
            </div>
        </div>
        <script>
            function onPerusahaanCheckboxChange(e) {
                // 获取当前单元格的关联信息
                var cellInfo = e.component.element().closest('.dx-data-grid-cell').data('dxCellInfo');
                if (!cellInfo) return;
                
                // 收集所有选中的复选框文本
                var selectedValues = [];
                cellInfo.cellElement.find('.dx-checkbox').each(function() {
                    var cbInstance = $(this).dxCheckBox('instance');
                    if (cbInstance.option('value')) {
                        selectedValues.push(cbInstance.option('text'));
                    }
                });
                
                // 更新DataGrid数据源的Perusahaan字段
                cellInfo.setValue(selectedValues);
            }
        </script>
    </text>)
    .Visible(false);

步骤3：控制器接收参数 #

直接通过UserDataVM接收即可，Perusahaan字段会自动填充选中的复选框值数组：

// UserDatasController.cs
[HttpPost]
public IActionResult InsertUserData(UserDataVM model)
{
    // model.Perusahaan 即为选中的复选框值数组
    // 业务逻辑处理...
    return Ok();
}

额外提示 #

• 如果需要从数据库回显已选值，确保Perusahaan字段返回的是字符串数组（可从逗号分隔的字符串拆分转换）
• 若业务需求更规范，可将复选框的Value设置为公司ID而非文本，提交时传递ID数组

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