如何在Kendo ComboBox数据源返回空数据时显示提示信息？

我明白你的困扰——change事件只在选择已有选项时触发，你以为dataBound只在有数据返回时触发（其实它在空数据场景下也会触发，只是之前的判断逻辑没到位），要捕获API返回空数据集的场景，咱们有两个靠谱的方案：

方案1：利用DataSource的requestEnd事件 #

这个事件会在每一次API请求完成后触发，不管返回的是有数据还是空数据，完美匹配你的需求。你可以直接在MVC Helper的数据源配置里绑定它，或者在JS代码里动态绑定：

修改你的MVC Markup #

在ComboBox的DataSource配置中添加RequestEnd事件绑定：

@(Html.Kendo().ComboBox()
    .Name("ddlMeter")
    .Filter("contains")
    .Placeholder("Type Meter Name or Number...")
    .DataTextField("Text")
    .DataValueField("Value")
    .AutoBind(false)
    .MinLength(4)
    .DataSource(source => source
        .Read(read => read.Action("findmeter", "rtf", new { area = "documents" }))
        .ServerFiltering(true)
        .Events(events => events.RequestEnd("onMeterRequestEnd")) // 新增这一行
    )
    .HtmlAttributes(new { style = "width:100%;" }))

编写对应的JS处理函数 #

function onMeterRequestEnd(e) {
    // 根据后端返回格式获取数据总量：分页接口取total，直接返回数组则取长度
    var totalItems = e.response.total || (e.response.data ? e.response.data.length : e.response.length);
    
    if (totalItems === 0) {
        // 这里写你要执行的操作，比如显示提示
        alert("没有找到匹配的仪表信息");
        // 或者清空ComboBox的输入/选择状态
        var comboBox = $("#ddlMeter").data("kendoComboBox");
        comboBox.text("");
        // 也可以显示页面上预先隐藏的提示元素
        $("#empty-result-message").show();
    } else {
        // 有数据时隐藏提示元素（如果有的话）
        $("#empty-result-message").hide();
    }
}

方案2：修正dataBound事件的判断逻辑 #

其实dataBound事件在API返回空数据时也会触发，只是你之前没正确检查数据源的内容。可以修改你现有的事件处理代码：

更新你的PageController中的dataBind事件 #

this.on = {
    change: {
        ddlMeter: function (e) {
            // 原有的change事件逻辑
        }
    },
    databind: {
        ddlMeter: function (e) {
            var comboBox = e.sender;
            // 获取数据源中的所有数据项
            var dataItems = comboBox.dataSource.data();
            
            if (dataItems.length === 0) {
                // 空数据时的操作
                alert("未找到匹配结果");
                $("#empty-result-message").show();
            } else {
                $("#empty-result-message").hide();
            }
        }
    }
};

补充说明 #

• 如果你的后端接口返回分页格式数据（比如包含total和data字段），记得在requestEnd里优先取e.response.total；如果是直接返回数组，就取e.response.length。
• 你可以用Kendo的Notification组件代替alert，实现更美观的提示效果，比如：

  var notification = $("#notification").data("kendoNotification");
  notification.show("没有找到匹配的仪表信息", "warning");
  

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