在ASP.NET Core 6 MVC中为Kendo Grid添加ComboBox下拉框

1. 修改Grid列定义为ForeignKey列 #

把原有的普通绑定列替换为Kendo Grid专门用于外键场景的ForeignKey列，自动处理下拉选择与ID映射：

@(
    Html.Kendo().Grid<IpdCustomerLicenseViewModel>()
        .Name("licenseGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.LicenseNumber).Title("License Number").Width(200);
            columns.Bound(p => p.ExpirationDate).Title("Expiration Date").Width(200);
            columns.Bound(p => p.IpdCustomerId).Hidden(true);
            // 替换为ForeignKey列，指定绑定ID字段、数据源、值字段和显示字段
            columns.ForeignKey(p => p.IpdCustomerLicenseTypeLookupId, ViewBag.LicenseTypes as IEnumerable<IpdCustomerLicenseTypeLookup>, "Id", "Description")
                .Title("License Type")
                .Width(200);
        })
        // 其余原有配置保持不变
        .ToolBar(toolbar =>
        {
            toolbar.Create().HtmlAttributes(new { @class = "k-disabled", Id = "createLicenseRequest" });
            toolbar.Save();
        })
        .AutoBind(true)
        .ColumnMenu(col => col.Filterable(true))
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Scrollable(scr => scr.Height(200))
        .HtmlAttributes(new { style = "width: 600px;" })
        .Events(x => x.Change("onLicenseChange").DataBound("onLicenseDataBound"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Events(e => e.RequestEnd("onLicenseChange"))
            .Batch(true)
            .ServerOperation(false)
            .PageSize(50)
            .Model(model => { model.Id(p => p.Id); })
            .Update(update => update.Action("InsertLicenseInformation", "IpdCustomer").Data("additionalDataOnLicenseCreate"))
            .Create(create => create.Action("InsertLicenseInformation", "IpdCustomer").Data("additionalDataOnLicenseCreate"))
            .Read(read => read.Action("GetIpdCustomerLicenseGrid", "IpdCustomer").Data("additionalDataOnRead"))
        )
)

2. 在页面控制器中传递许可证类型数据源 #

在加载该Grid所在页面的Action方法中，将许可证类型列表存入ViewBag，供ForeignKey列读取：

public IActionResult YourPageAction(int id)
{
    // 传入许可证类型列表到ViewBag
    ViewBag.LicenseTypes = GetIpdLicenseTypeList();
    return View();
}

3. 调整ViewModel与控制器逻辑（简化处理） #

• 可以移除ViewModel中的LicenseList属性，因为ForeignKey列直接从ViewBag获取数据源，无需在每行ViewModel中单独存储。
• 确保GetIpdLicenseTypeList()返回的是IEnumerable<IpdCustomerLicenseTypeLookup>类型，与ForeignKey列指定的Id（值字段）、Description（显示字段）对应。

4. 确保更新/创建时的模型绑定正常 #

在InsertLicenseInformation控制器方法中，直接接收IpdCustomerLicenseViewModel参数即可，Kendo会自动将下拉选择的选项映射为对应的IpdCustomerLicenseTypeLookupId值：

public async Task<IActionResult> InsertLicenseInformation([DataSourceRequest] DataSourceRequest request, IpdCustomerLicenseViewModel model)
{
    if (ModelState.IsValid)
    {
        // 业务逻辑：使用model.IpdCustomerLicenseTypeLookupId完成保存
    }
    return Json(new[] { model }.ToDataSourceResult(request, ModelState));
}

原方案出错原因 #

你之前添加Display变量的方式，仅能实现静态文本显示，但Kendo Grid在编辑模式下无法将用户选择的文本反向映射为对应ID，导致更新时模型绑定失败或引发引用错误。而ForeignKey列是Kendo为外键场景原生设计的组件，会自动处理显示文本与提交ID的双向映射，避免手动处理的逻辑漏洞。

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