別の剣道コンボボックスに基づいて剣道MVCコンボボックスを設定する

Question

別のコンボボックスの選択に基づいて、1つのコンボボックスの値を入力しようとしています。私はMVC 5アプリケーションで剣道MVCコンボボックスを使用しています。私の場合は、SalesOrganisationコンボボックスの選択に基づいてSales Officeコンボボックスに値を入力しようとしています。そのためには、SalesOfficeコンボのコントローラメソッドを呼び出して国コード値を渡す必要があります。私は販売組織のドロップダウンコントロールの変更イベントにajaxメソッドを書いています。そのコントローラメソッドを呼び出す。私はメソッドの発射を見ることができますが、私はJavaScriptコードのデータを警告するとき、値は[オブジェクト] [オブジェクト]を示しています。しかし、ステータスは成功を示しています何が間違っているか分かりません。どのように私は、営業所のドロップダウンが取り込ま得るのですか

コンボボックス

<div class="form-group"> 
       @Html.LabelFor(model => model.Company, htmlAttributes: new { @class = "control-label col-md-4" }) 
       <div class="col-md-6"> 
        <div class="editor-field"> 
         @(Html.Kendo().ComboBoxFor(model => model.Company) 
          .Name("SalesOrganisation") 
          .HtmlAttributes(new { style = "width:300px" }) 
          .DataTextField("Company") 
          .DataValueField("CountryCode") 

          .DataSource(dataSource => dataSource 
          .Read(read => read.Action("RequestHeader_SalesOrganisation", "Request").Type(HttpVerbs.Post)) 

          ) 
          .Events(e => 
          { 
           e.Change("onChange"); 
          }) 
         ) 
        </div> 
        @Html.ValidationMessageFor(model => model.Company, "", new { @class = "text-danger" }) 
       </div> 
      </div> 
      <div class="clearfix"></div> 
      <div class="form-group"> 
       @Html.LabelFor(model => model.SalesOffice, htmlAttributes: new { @class = "control-label col-md-4" }) 
       <div class="col-md-6"> 
        <div class="editor-field"> 
         @(Html.Kendo().ComboBoxFor(model => model.SalesOffice) 
          .Name("SalesOffice") 
          .HtmlAttributes(new { style = "width:300px" }) 
          .DataTextField("SalesOffice") 
          .DataValueField("SalesOfficeID") 

          .DataSource(dataSource => dataSource 
          .Read(read => read.Action("RequestHeader_SalesOffice", "Request").Type(HttpVerbs.Post)) 
          ) 
         ) 
        </div> 
        @Html.ValidationMessageFor(model => model.SalesOffice, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

SalesOfficeコントローラ方法

public ActionResult RequestHeader_SalesOffice(string id) 
      { 
       var response = requestRepository.GetSalesOffice(id).AsQueryable().ProjectTo<SalesOfficeViewModel>(); 

       var jsonResult = Json(response, JsonRequestBehavior.AllowGet); 
       jsonResult.MaxJsonLength = int.MaxValue; 
       return jsonResult; 
      } 

のjQuery

function onChange() { 

     alert($('#SalesOrganisation').val()); 

     var ServiceUrl = "/CC.GRP.MCRequest/Request/RequestHeader_SalesOffice?id=" + $('#SalesOrganisation').val(); 
     var content = ''; 
     $.support.cors = true; 

     $.ajax({ 
      type: 'Post', 
      url: ServiceUrl, 
      async: true, 
      cache: false, 
      crossDomain: true, 
      contentType: "application/json; charset=utf-8", 
      dataType: 'json', 
      error: function (xhr, err) { 
      }, 
      success: function (data, status) { 
       $('#SalesOffice').val(data); 
       alert(data); 
       alert(status); 
      } 
     }); 
    } 

Answer 1

あなたの特定のシナリオに基づいています。先頭のコンボボックスは、2番目のコンボボックスから選択項目を制御する必要があります。この場合、コンボボックスのcascading機能を使用するのが最も簡単な方法になり、コードの量を減らすことができます。

したがって、トップコンボボックスは変更イベントを取り除くことができます。

我々はこれに少し変更秒1：

@(Html.Kendo().ComboBoxFor(model => model.SalesOffice) 
          .Name("SalesOffice") 
          .HtmlAttributes(new { style = "width:300px" }) 
          .DataTextField("SalesOffice") 
          .DataValueField("SalesOfficeID") 

          .DataSource(dataSource => dataSource 
           .Read(read => 
           { 
            read.Action("RequestHeader_SalesOffice", "Request") 
             .Type(HttpVerbs.Post) 
             .Data("GetFilterOption"); <-- This Bit 
           }) 
           ).CascadeFrom("SalesOrganisation") //<--This Bit 

) 

その後、我々はあなたのトップコンボボックスから選択した値を返しますGetFilterOptionと呼ばれるjavascript関数を追加します。あなたはコンボボックスに結合し、新しく収集結果から値を選択することができるようにするために

function GetFilterOption(){ 
    return { id: $('#SalesOrganisation').val() } 

} 

これは、新しい結果セットをバック返します。

現在のソリューションが機能していない理由は、選択リストを戻して、それを基になるデータソースではなく値にバインドすることです。

success: function (data, status) { 
       // $('#SalesOffice').val(data); <-- FROM THIS TO 
       $('#SalesOffice').data('kendoComboBox').setDataSource(data); 
       alert(data); 
       alert(status); 
      } 

うまくいけば、あなたの質問に答える：あなたは自分のjavascriptのコードを変更したい場合

ですから、このような何かを行うことができます。どんな問題であれ知らせてくれるので、変更を反映するように答えを更新します。

EDIT

チャットを通じてトムと試行錯誤の後に我々は、コンボボックス内（「入って」）

、その後.ServerFiltering（真）ので、終了を.Filteringを追加するための溶液になりましたこれでアップ：//demos.telerik：

@(Html.Kendo().ComboBoxFor(model => model.SalesOffice) 
          .Name("SalesOffice") 
          .HtmlAttributes(new { style = "width:300px" }) 
          .DataTextField("SalesOffice") 
          .DataValueField("SalesOfficeID") 
          .Filter("Contains") 
          .DataSource(dataSource => dataSource 
           .Read(read => 
           { 
            read.Action("RequestHeader_SalesOffice", "Request") 
             .Type(HttpVerbs.Post) 
             .Data("GetFilterOption"); <-- This Bit 
           }) 
           .ServerFiltering(true) 
           ).CascadeFrom("SalesOrganisation") //<--This Bit 

) 

Answer 2

[{SalesOfficeID: 58, SalesOfficeCode: "XX", SalesOffice: ""},…] 
0 
: 
{SalesOfficeID: 58, SalesOfficeCode: "XX", SalesOffice: ""} 
1 
: 
{SalesOfficeID: 57, SalesOfficeCode: "8118", SalesOffice: "T&T"} 
2 
: 
{SalesOfficeID: 56, SalesOfficeCode: "8117", SalesOffice: "International"} 
3 
: 
{SalesOfficeID: 55, SalesOfficeCode: "8116", SalesOffice: "Central"} 
4 
: 
{SalesOfficeID: 54, SalesOfficeCode: "8115", SalesOffice: "CS Coverage"} 
5 
: 
{SalesOfficeID: 53, SalesOfficeCode: "8114", SalesOffice: "CS South"} 
6 
: 
{SalesOfficeID: 52, SalesOfficeCode: "8113", SalesOffice: "CS Scotland"} 
7 
: 
{SalesOfficeID: 51, SalesOfficeCode: "8112", SalesOffice: "CS North"} 
8 
: 
{SalesOfficeID: 50, SalesOfficeCode: "8111", SalesOffice: "CS Major Accounts"} 
9 
: 
{SalesOfficeID: 49, SalesOfficeCode: "8110", SalesOffice: "CS London"} 
10 
: 
{SalesOfficeID: 48, SalesOfficeCode: "8109", SalesOffice: "IAM - PS"} 
11 
: 
{SalesOfficeID: 47, SalesOfficeCode: "8108", SalesOffice: "IAM - I&C"} 
12 
: 
{SalesOfficeID: 46, SalesOfficeCode: "8107", SalesOffice: "Edinburgh"} 
13 
: 
{SalesOfficeID: 45, SalesOfficeCode: "8106", SalesOffice: "Manchester"} 
14 
: 
{SalesOfficeID: 44, SalesOfficeCode: "8105", SalesOffice: "Blackfriars FM"} 
15 
: 
{SalesOfficeID: 43, SalesOfficeCode: "8104", SalesOffice: "Blackfriars FMR"} 
16 
: 
{SalesOfficeID: 42, SalesOfficeCode: "8103", SalesOffice: "Reading"} 
17 
: 
{SalesOfficeID: 41, SalesOfficeCode: "8102", SalesOffice: "Hatfield BTSI"} 
18 
: 
{SalesOfficeID: 40, SalesOfficeCode: "8101", SalesOffice: "Hatfield PS"} 
Name