kendo 콤보 상자 선택에 따라 텍스트 상자 채우기

Question

내 MVC 5 응용 프로그램의 콤보 상자 선택에 따라 두 개의 텍스트 상자 컨트롤을 채워야합니다. 콤보 상자는 검도 MVC 컨트롤입니다. 텍스트 상자 컨트롤에 할당해야하는 값은 콤보 상자 컨트롤에 바인딩 된 컬렉션에 있습니다. 누군가가 그것에 대해 어떻게 생각하는지 알려줄 수 있습니까? javascript/jquery에서 처리해야하거나 검도 콤보 상자 이벤트에서 처리해야합니까? 좋은 예가 될 것입니다.

콤보 박스

 @Html.LabelFor(model => model.Name1, htmlAttributes: new { @class = "control-label col-md-4" }) 

     <div class="col-md-4"> 
      <div class="editor-field"> 
       @(Html.Kendo().ComboBoxFor(model => model.Name1) 

        .HtmlAttributes(new { style = "width:300px" }) 
        .DataTextField("Name1") 
        .DataValueField("CustomerMasterDataId") 

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

텍스트 상자

<div class="form-group"> 
       @Html.LabelFor(model => model.CustomerNumber, htmlAttributes: new { @class = "control-label col-md-4" }) 
       <div class="col-md-6"> 
        <div class="editor-field"> 
         @Html.EditorFor(model => model.CustomerNumber, new { htmlAttributes = new { @class = "form-control" } }) 

        </div> 
        @Html.ValidationMessageFor(model => model.CustomerNumber, "", new { @class = "text-danger" }) 
       </div> 
      </div> 
      <div class="clearfix"></div> 
      <div class="form-group"> 
       @Html.LabelFor(model => model.CustomerGroup, htmlAttributes: new { @class = "control-label col-md-4" }) 
       <div class="col-md-6"> 
        <div class="editor-field"> 
         @Html.EditorFor(model => model.CustomerGroup, new { htmlAttributes = new { @class = "form-control" } }) 

        </div> 
        @Html.ValidationMessageFor(model => model.CustomerGroup, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

콤보를 poulates 컨트롤러 메소드

public ActionResult RequestHeader_CustomerData() 
    { 
     var response = requestRepository.GetCustomerData().AsQueryable().ProjectTo<CustomerViewModel>(); 

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

CUSTOMERNUMBER와 이름 1 필드는 텍스트 상자

에게 뷰 모델

public class CustomerViewModel 
    { 
     public int CustomerMasterDataId { get; set; } 
     public int CustomerNumber { get; set; } 

     [Display(Name = "Customer Name")] 
     public string Name1 { get; set; } 

     [Display(Name = "Customer Group")] 
     public string CustomerGroup { get; set; } 
    } 

을 채우는 데 사용 될 수 있습니다

Answer 1

예, 변경 이벤트 처리 : 이제

@(Html.Kendo().ComboBoxFor(model => model.Name1) 
     .HtmlAttributes(new { style = "width:300px" }) 
     .DataTextField("Name1") 
     .DataValueField("CustomerMasterDataId") 
     .DataSource(dataSource => dataSource 
     .Events(e => e.Change(onComboChange)) 
     .Read(read => read.Action("RequestHeader_CustomerData", "Request").Type(HttpVerbs.Post)) 
       ) 
      ) 

을 js로 처리 :

@section scripts 
{ 
    <script type="text/javascript"> 
     function onComboChange(e) { 
      var dataItem = e.sender.dataItem(); 

      if (dataItem) { 
       //set the value of text box (input) 
       $("#CustomerNumber").val(dataItem.CustomerNumber); 
       $("#CustomerGroup").val(dataItem.CustomerGroup); 
      }; 
     }; 

    </script> 
} 

여기에 js가 있습니다. http://jsfiddle.net/sg53719/74LwhebL/1/