在 MVC 应用程序中刷新数据源时，Kendo 下拉列表不会重新渲染

Question

我有一个带有 razon 页面和 2 个 kendo 下拉列表的 MVC 应用程序。这是第一个下拉列表的定义：

@(Html.Kendo().DropDownList()
    .Name("TaxYearDropDown")
    .DataTextField("TaxYear")
    .DataValueField("TaxYear")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("CheckListGetTaxYears", "Case")
                .Data("additionalData")
                .Type(HttpVerbs.Post);
        });
    })
    .HtmlAttributes(new { style = "width:100px;" })
    .SelectedIndex(0)
    .Events(e => e
        .Change("onChangeTaxYearDropDown")
    )
)

这是 javascript 函数 onChangeTaxYearDropDown:

function onChangeTaxYearDropDown(e) {

    $("#SBLDropDown").data("kendoDropDownList").dataSource.read();

}

这就是第二个下拉列表的定义方式：

@(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")
    )
)

这是 javascript 函数 onChangeSBLDropDown 中的代码：

function onChangeSBLDropDown() {

    var FileNum = "@Model.FileNum";
    var Suffix = "@Model.Suffix";

    var TaxYear = $('#TaxYearDropDown').data("kendoDropDownList").value();
    var SBL = $('#SBLDropDown').data("kendoDropDownList").value();

    if (SBL != " ") {
        var obj = {
            FileNum: FileNum,
            Suffix: Suffix,
            TaxYear: TaxYear,
            SBL: SBL
        }

        $.ajax(
        {
            type: "POST", //HTTP POST Method
            url: "/Case/GetCheckList", // Controller/Action
            data: JSON.stringify(obj),
            traditional: false,
            cache: false,
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                LoadCheckList(data);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Error retrieving checklist "); alert("Error: " + errorThrown);
            }
        });
    }

}

首次加载页面时，下拉菜单如下所示：

当我单击 S/B/L 下拉菜单上的箭头时，我看到的是：

这都是正确的，如果我单击 1/24/1-20 选项，该值将成为所选值，并且该值将传递到控制器以检索其他数据。

当我单击 1/24/1-20 选项时，下拉菜单如下所示：

如您所见，日期字段中填充了数据。这都是正确的。

我遇到的问题是，当我从 TaxYear 下拉列表中选择新值时，我希望 S/B/L 下拉列表显示所选的第一项，即“选择 S/B/L”。相反，它显示“1/24/1-20”作为所选值。

我知道正在调用控制器来刷新 sbl 下拉数据源，因为我在控制器中设置了断点。然后，我跟踪代码并验证列表是否已返回到视图。

我唯一能想到的是kendo dropdownlist查看当前数据源，然后查看新数据源，如果它们相同（在我的情况下是可能的），则下拉列表不会重新 -渲染。

这就是剑道下拉列表的工作原理吗？如果是这样，我可以以某种方式重绘下拉列表吗？

如有任何建议，我们将不胜感激。

Answer 1

数据源应该使用新数据进行更新，您可以确认我将其删除。 不会改变的是所选项目。如果先前选择的项目仍在新数据源中，则不会发生任何变化。如果该项目不再位于数据源中，我预计它将变为空白。

您需要做的是在应用更新的数据源后将下拉选择放回索引零。我能想到的最简单的方法是为 dataBound 事件添加一个处理程序，该处理程序在下拉列表读取数据源并将其绑定到其视图时触发：

.DataBound("onDataBoundSBLDropDown")

在该处理程序中，您可以使用 select() 方法将其设置为索引 0：

function onDataBoundSBLDropDown() {
    $("#SBLDropDown").data("kendoDropDownList").select(0);
    onChangeSBLDropDown();
}

请注意，select() 方法不会触发更改事件，这就是为什么我在上面的函数中添加了对 onChangeSBLDropDown() 的调用。

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/methods/select

这样做的一个副作用是在第一次渲染时调用 onChangeSBLDropDown() 。因此，如果 TaxYearDropDown 仍在实例化，则此行可能会失败：

var TaxYear = $('#TaxYearDropDown').data("kendoDropDownList").value();

如果发生这种情况，我会将其留给您解决。要么在 onChangeSBLDropDown() 函数中满足它，要么使用布尔变量在事件第一次发生时不从 onDataBoundSBLDropDown() 调用它。例如：

firstTime = true;
function onDataBoundSBLDropDown() {
    $("#SBLDropDown").data("kendoDropDownList").select(0);
    if (firstTime) {
        firstTime = false;
    } else {
        onChangeSBLDropDown();
    }
}