基於另一個kendo combobox填充劍道MVC組合框

我想基於另一個組合框的選擇填充一個組合框的值。我在MVC 5應用程序中使用kendo mvc組合框。在我的情況下，我試圖根據SalesOrganisation組合框的選擇填充銷售辦公室組合框。爲了做到這一點，我需要調用SalesOffice組合框的控制器方法並傳遞國家/地區代碼值。我已經在銷售組織的下拉控件的變更事件上編寫了一個ajax方法。它調用控制器方法。我可以看到方法觸發，但是當我對JavaScript代碼中的數據做出警報時，值顯示[object] [object]。但狀態顯示成功不知道什麼是錯誤的。我如何得到填充售樓處下拉基於另一個kendo combobox填充劍道MVC組合框

組合框

<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); 
      } 
     }); 
    }

來源

2017-04-05 Tom

有你看了這個例子怎麼辦級聯組合的http：//demos.telerik。com/kendo-ui/combobox/cascadingcombobox –

你已經共享的例子是使用odata。在我的代碼中，我試圖調用被觸發的控制器操作方法。我可以看到它在服務器端獲取數據。我的問題是如何獲取客戶端上的json數據並綁定它 – Tom

如果這是獲取組合框列表中的值，或者它拉回一個新的「select」列表來綁定到組合框？ –

因此根據您的具體情況。頂部組合框應該控制第二個組合框中的選定項目。在這種情況下，使用組合框的cascading功能將是最簡單的方法，同時還可以減少代碼量。

因此，我們可以擺脫變化事件的頂部組合框。

我們稍微這一變化的第二個：

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

}

然後這將返回新的結果集供您綁定到組合框，並允許您從新收集的結果中選擇值。

您當前的解決方案無法正常工作的原因是您要將選擇列表恢復並將其綁定到值而不是基礎數據源。

所以，如果你想改變只是你的JavaScript代碼，你可以做這樣的事情：

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

希望這回答了你的問題。任何問題都會讓我知道，我會更新答案以反映任何更改。

編輯

通過聊天多的試錯與湯姆後，我們到了解決組合框中添加.Filtering（「包含」）

，然後.ServerFiltering（真），所以結束了這一點：

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

)

來源

2017-04-06 11:25:14

很奇怪。我添加了你的代碼。它在我的控制器方法中使用正確的id命中了斷點。該方法返回記錄，但我的組合框沒有綁定。它顯示沒有數據綁定。 – Tom

當您返回數據時，它是否具有您爲組合定義的屬性？當您使用fiddler/browser工具查看回復時，該調用的響應是什麼？ –

我沒有看到fiddler的火狐。使用Chrome。你的意思是Chrome中的開發人員工具。我在哪裏檢查鉻合金中的 – Tom

[{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

來源

2017-04-06 16:11:29 Tom

基於另一個kendo combobox填充劍道MVC組合框

回答

相關問題