Kendo UI ASP.net MVC - 为什么下拉列表在 select 事件中获取空数据？

Question

在我的 ASP.net MVC 视图中，我有一个 Kendo 下拉列表和一个网格。我想要的是默认情况下隐藏网格，基于下拉列表的 selection，网格应该填充相关数据并显示。

但是，下拉列表的 select 事件没有获得正确的数据。它获取之前的 selection 而不是当前的 selection。

视图代码是：

@model MyApplication.Models.CustomerModel

@{
    ViewBag.Title = "Customer Information";
}

<h2>Customer Information</h2>
    <div class="container">
        <div class="row">
            @(Html.Kendo().DropDownList()
                         .Name("CustomerID")
                         .OptionLabel("Select Customer")
                         .BindTo((List<SelectListItem>)ViewBag.CustomerList)
                         .DataTextField("Text")
                         .DataValueField("Value")
                         .Events(e => e.Select("onSelect"))
                         .HtmlAttributes(new {  @class = "k-textbox large" }))
        </div>

        <div class="row">
            @(Html.Kendo().Grid<MyApplication.Models.CustomerModel>()
                          .Name("contractGrid")
                          .Columns(columns =>
                              {
                                  columns.Bound(c => c.ContractCode).Title("Contract ID").Width(240);
                                  columns.Bound(c => c.ContractDescription).Title("Description").Width(240);
                                  columns.Bound(c => c.ContractPrice).Title("Price").Width(240);
                                  columns.Bound(c => c.ExpirationDate).Title("Expiration Date").Width(240).Format("{0:MM/dd/yyyy}");                                  
                              }
                          )
                          .Sortable()
                          .Pageable(page => page
                              .Refresh(true)
                              .PageSizes(true)
                          )
                          .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .Read(read => read.Action("GetContracts", "Pricing").Data("additionalDataContracts"))
                                        .PageSize(10)
                           )
            )
        </div>
    </div>

<script>
    $(document).ready(function () {
        $("#contractGrid").hide();
    });



    var ddlItem=null;

    function additionalDataContracts(e) {
        var dataItem = $("#CustomerID").data("kendoDropDownList").value();
        alert("Additional Data - Customer: " + dataItem);
        return {
            item: dataItem
        }
    }

    function onSelect(e) {
        ddlItem = this.dataItem(e.item);
        var dataItem = $("#CustomerID").data("kendoDropDownList").value();
        alert("Select: " + dataItem);
        $("#contractGrid").show();
        var gridContracts = $("#contractGrid").data("kendoGrid");
        gridContracts.dataSource.read();     
    }
</script>

我做错了什么，我该如何纠正？

Answer 1

我相信您会想要使用 change 事件，看到 here。

编辑：由于您在 select 委托中的调用，您看到的本质上是之前的 selection：

$("#CustomerID").data("kendoDropDownList").value()

select 事件在设置元素值之前触发。

Kendo UI ASP.net MVC - 为什么下拉列表在 select 事件中获取空数据？

Kendo UI ASP.net MVC - Why dropdownlist is getting empty data on select event?

kendo-ui

kendo-grid

kendo-asp.net-mvc