Kendo UI ASP.net MVC - 为什么dropdownlist会在select事件中获取空数据?

时间:2016-07-19 13:37:58

标签: kendo-ui kendo-grid kendo-asp.net-mvc

在我的ASP.net MVC视图中,我有一个Kendo下拉列表和一个网格。我所追求的是网格默认是隐藏的,根据下拉列表的选择,网格应填充相关数据并显示。

但是,下拉列表的select事件未获得正确的数据。它获取先前的选择而不是当前选择。

视图的代码是:

@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>

我做错了什么,如何纠正?

1 个答案:

答案 0 :(得分:1)

我相信您会想要使用更改活动,见here

编辑:由于您在此处的选择,您在选择的代表中看到了以前的选择基本上是什么:

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

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