如何在ASP.NET Core MVC Kendo Grid中以局部视图显示下拉列表？

你的问题出在Kendo Grid模板的渲染机制不匹配：你用了客户端模板语法（#= ... #）调用服务器端Razor局部视图，而Razor局部视图是服务器端解析渲染的，无法在客户端模板中直接执行，导致下拉列表未被正确生成。

下面分两种场景给出解决方案：

场景1：Grid为服务器端绑定（直接传入Model.Car数据） #

如果你的Grid是直接用服务器端数据初始化（非Ajax加载），可以直接使用服务器端模板调用局部视图，无需客户端语法：

修改Grid的列定义：

.Columns(columns =>
{
    columns.Template(@<text>
        @await Html.PartialAsync("_Model", item)
    </text>).Title("Model Number").Width(200);
})

这种写法会在服务器端遍历每个CarRowViewModel，直接渲染局部视图的下拉列表，完全兼容你现有的_Model.cshtml局部视图代码。

场景2：Grid为Ajax绑定（异步加载数据） #

如果Grid是通过Ajax加载数据，必须使用客户端模板来渲染下拉列表，同时提前把下拉选项序列化到客户端：

步骤1：序列化下拉选项到客户端 #

在页面顶部（Grid之前），把下拉选项数据序列化为客户端可访问的变量：

@model CarsViewModel

@{
    // 序列化下拉选项为JSON（如果每行选项不同，需在CarRowViewModel中包含序列化后的选项）
    var modelOptions = Json.Serialize(
        Model.Car.First().CarModelNumber.Select(opt => new { Text = opt.Text, Value = opt.Value })
    );
}

<script>
    // 全局变量存储下拉选项
    window.carModelOptions = @Html.Raw(modelOptions);
</script>

步骤2：修改Grid列的客户端模板 #

替换原有的columns.Template为columns.Bound+ClientTemplate，直接在客户端生成下拉列表：

.Columns(columns =>
{
    columns.Bound(x => x.SelectedModelNumber)
           .Title("Model Number")
           .Width(200)
           .ClientTemplate(@"
               <select class='form-select' data-value='#= SelectedModelNumber #'>
                   <option selected disabled hidden>----- Select -----</option>
                   # for(let i = 0; i < window.carModelOptions.length; i++) { #
                       <option value='#= window.carModelOptions[i].Value #' 
                               #= window.carModelOptions[i].Value === SelectedModelNumber ? 'selected' : '' #>
                           #= window.carModelOptions[i].Text #
                       </option>
                   # } #
               </select>
           ")
           .EditorTemplateName("CarModelDropdown"); // 配置编辑模式下的下拉编辑器
})

步骤3：创建编辑模式的编辑器模板 #

在Views/Shared/EditorTemplates/目录下创建CarModelDropdown.cshtml，用于单元格编辑时的下拉列表：

@model string

@(Html.Kendo().DropDownListFor(m => m)
    .DataTextField("Text")
    .DataValueField("Value")
    .BindTo((IEnumerable<SelectListItem>)ViewData["CarModelOptions"])
)

步骤4：传递编辑模板的数据源 #

在Grid配置中添加ViewData，把下拉选项传递给编辑器模板：

.Editable(editable => editable.Mode(GridEditMode.InCell))
.ViewData(new { CarModelOptions = Model.Car.First().CarModelNumber })

关键注意事项 #

• asp-for和asp-items是Razor标签助手，仅在服务器端渲染时生效，客户端模板中无法解析，必须改用原生HTML+客户端循环生成选项。
• 如果每行的下拉选项不同，需要在CarRowViewModel中添加序列化后的选项列表（如List<object> CarModelOptions），并在客户端模板中遍历#= CarModelOptions #而非全局变量。

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