MVC应用中Kendo DropDownList刷新数据源后未重新渲染的问题

核心原因 #

Kendo DropDownList在数据源更新时，不会自动重置选中项：

• 如果之前选中的值存在于新数据源中，控件会保留该选中状态；
• 只有当选中值不在新数据源时，才会自动清空或选中第一项。
  你遇到的情况正是前者：切换TaxYear后，新的SBL数据源里仍包含之前选中的"1/24/1-20"，因此控件没有自动切换到默认的"Select an S/B/L"。

解决方案 #

需要在SBL下拉框的数据源刷新完成后，手动重置选中项，有两种常用实现方式：

方式1：在TaxYear切换的回调中异步重置

修改onChangeTaxYearDropDown函数，利用dataSource.read()的异步回调，在数据加载完成后设置选中索引：

function onChangeTaxYearDropDown(e) {
    var sblDropDown = $("#SBLDropDown").data("kendoDropDownList");
    // 刷新数据源，在done回调中重置选中项
    sblDropDown.dataSource.read().done(function() {
        // 选中第一项（对应"Select an S/B/L"）
        sblDropDown.select(0);
        // 若需要触发SBL的change事件（比如重新加载 checklist），可以添加：
        // sblDropDown.trigger("change");
    });
}

方式2：绑定SBL的DataBound事件自动重置

在SBL下拉框的Razor定义中添加DataBound事件，每次数据源绑定完成后自动选中第一项：

1. 更新Razor代码：

@(Html.Kendo().DropDownList()
    .Name("SBLDropDown")
    .DataTextField("S_B_L")
    .DataValueField("S_B_L")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("CheckListGetSBL", "Case")
                .Data("additionalDataSBLDropDown")
                .Type(HttpVerbs.Post);
        })
        .ServerFiltering(true);
    })
    .SelectedIndex(0)
    .Events(e => e
        .Change("onChangeSBLDropDown")
        .DataBound("onSBLDataBound") // 新增DataBound事件
    )
)

2. 添加对应的JavaScript函数：

function onSBLDataBound(e) {
    var dropDown = e.sender;
    // 每次数据绑定完成后，选中第一项
    dropDown.select(0);
    // 若第一项是占位符（值为空），也可以直接清空值：
    // dropDown.value("");
}

额外注意事项 #

• 确认additionalDataSBLDropDown函数已正确传递最新的TaxYear值，确保新数据源确实是对应当前TaxYear的选项；
• 如果不需要保留SBL的选中状态，两种方式都能解决问题，推荐方式2（更贴合Kendo的事件驱动逻辑）。

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