2017-04-05 11 views
0

MVC 5アプリケーションのコンボボックスの選択に基づいて2つのテキストボックスコントロールを設定する必要があります。コンボボックスは、剣道MVCコントロールです。テキストボックスコントロールに割り当てる必要がある値は、コンボボックスコントロールにバインドされているコレクション内にあります。誰かが私にそれについて行く方法を教えてもらえますか?これはjavascript/jqueryで処理する必要がありますか、それとも剣道のコンボボックスのイベントで扱われますか?例が素晴らしいだろう。コンボ剣道コンボボックスの選択に基づいてテキストボックスを設定する

をpoulates

コンボボックス

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

コントローラメソッド

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フィールドがテキストボックスに

を移入するために使用されることに注意してくださいViewModelに

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

答えて

0

はい、変更イベントを処理:今

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

関連する問題