如何修复ASP.NET MVC Kendo Grid中下拉框无法绑定数据的问题

核心问题分析 #

你的代码存在几个关键问题导致下拉框绑定失败：

1. 动态元素事件绑定失效：#MinAcceptableId是点击单元格后才动态创建的，静态绑定focus事件的方式无法捕获到这个元素的事件。
2. 异步请求被提前中断：$('#MinAcceptableId').blur()在$.post发起后立刻执行，此时请求还未完成，不仅会中断后续的DOM渲染，还会让下拉框失去焦点无法交互。
3. 变量未明确定义：code和value两个参数没有明确的来源，大概率未初始化，导致后端接口请求失败。
4. 缺少错误处理：没有为$.post添加错误回调，无法排查请求是否成功、返回数据是否正常。

修复步骤与代码示例 #

1. 动态绑定事件（创建元素后直接绑定）

不要用全局事件绑定，而是在创建select元素后，直接为它绑定focus事件，确保事件能被捕获：

// 创建select元素
var input = $("<select name='MinAcceptableName' id='MinAcceptableId'></select>");
e.container.append(input);

// 直接为新创建的元素绑定focus事件
input.focus(function() {
    // 从当前行的model中获取有效值（需根据你的业务调整字段名）
    var code = e.model.CodeType;
    var value = e.model.MinAcceptableId;
    var url = '@Url.Action("GetCodesList", "LookupCode")';
    var ddl = $(this); // 用this指代当前触发事件的select，避免多行ID重复冲突

    // 避免重复请求：只有下拉框为空时才加载数据
    if (ddl.children().length === 0) {
        $.post(url, { codeType: code, selectedValue: value }, function(response) {
            ddl.empty();
            ddl.append($('<option></option>').text("--Select--").val(""));
            $.each(response, function(index, item) {
                ddl.append($('<option></option>').text(item.Description).val(item.CodeId));
            });
            // 设置默认选中值
            if (value) {
                ddl.val(value);
            }
        })
        .fail(function(xhr, status, error) {
            // 新增错误处理，方便排查问题
            console.error("下拉框数据加载失败：", error);
            alert("加载数据失败，请重试");
        });
    }
});

input.focus(); // 触发focus事件加载数据

2. 移除提前执行的blur()

删除$('#MinAcceptableId').blur()这一行，让异步请求完成后再允许用户交互。

3. 确保变量code和value的有效性

从Kendo Grid编辑事件的e.model中获取当前行的对应字段值，避免使用未定义的全局变量。

4. 避免重复ID问题

网格多行编辑会创建多个相同ID的select元素，改用$(this)指代当前元素，或者用类名代替ID，避免DOM选择器冲突。

额外优化建议 #

可以直接使用Kendo UI自带的DropDownList组件，更适配Kendo Grid的编辑流程：

// 使用Kendo DropDownList替代原生select
var ddl = $("<select name='MinAcceptableName'></select>").appendTo(e.container);
ddl.kendoDropDownList({
    dataTextField: "Description",
    dataValueField: "CodeId",
    optionLabel: "--Select--",
    dataSource: {
        transport: {
            read: {
                url: '@Url.Action("GetCodesList", "LookupCode")',
                type: "POST",
                data: function() {
                    return {
                        codeType: e.model.CodeType,
                        selectedValue: e.model.MinAcceptableId
                    };
                }
            }
        }
    },
    value: e.model.MinAcceptableId
});

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