剣道UI ASP.net MVC - selectイベントでドロップダウンリストが空のデータを取得するのはなぜですか？

Question

私のASP.net MVCビューでは、私は剣道のドロップダウンリストとグリッドを持っています。私が後にしているのは、ドロップダウンリストの選択に基づいてグリッドがデフォルトで非表示になっていることです。グリッドは関連するデータを入力して表示されます。

ただし、ドロップダウンリストの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> 

私が間違って何をやっているとどのように私はそれを修正することができますか？

Answer 1

hereと表示されている変更イベントを使用したいと思います。

EDIT：あなたはあなたの選択デリゲート内、こちらのお電話、本質的に以前の選択何見ている：要素の値が設定される前に

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

selectイベントがトリガされます。