View에 객체를 Json으로 넘김 Controller에서 결과

Question

고객의 주소 및 연락처 번호를 표시한다고 가정합니다. 고객을 선택하기 위해 드롭 다운이 있으며 선택한 고객의 주소 및 연락처 번호를 표시해야합니다.

고객 주소 및 연락처를 반환하는 저장 프로 시저를 만들었습니다.

이것은 고객보기 드롭 다운입니다.

<div class="form-group"> 
        @Html.LabelFor(model => model.CustomerName, htmlAttributes: new { @class = "control-label col-md-4" }) 
        <div class="col-md-8"> 
         @Html.DropDownListFor(model => model.CustomerName, new SelectList(ViewBag.CustomerName, "Id", "Name"), "Select Customer", new { @class = "form-control", id = "cmbCustomerList" }) 
         @Html.ValidationMessageFor(model => model.CustomerName, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

이

내가 지금까지 시도한 스크립트입니다.

"#AddressSection"주소 및 연락처 번호 표시 영역

"#cmbCustomerList"고객 드롭 다운 목록

"판매/GetCustomerDetails"컨트롤러와 액션

$(document).ready(function() { 

//Address Section 
$("#AddressSection").hide(); 
$('#cmbCustomerList').change(function() { 
    if ($('#cmbCustomerList :selected').text() == "Select Customer") { 
     $("#AddressSection").hide(); 
    } 
    else { 
     $("#AddressSection").show();   
     var selectedVal = $(this).find(':selected').val(); 
     $.get("/Sales/GetCustomerDetails/" + selectedVal, function (data, status) { 
      //Here I want to pass the values to the address and contact number labels 
     }); 
    } 
}); 
}); 

이 컨트롤러의 동작입니다.

public JsonResult GetCustomerDetails(int id) 
     { 
      List<CustomerViewModel> customer = _handler.GetCustomerDetails(id); 
      return Json(customer, JsonRequestBehavior.AllowGet); 
     } 

보기에서 3 개의 레이블을 다시 입력하여 주소 및 연락처 번호를 표시하십시오. 의해 AddressLine1, AddressLine2,

그래서 내 질문이 얼마나보기에 별도로 3 속성에 액세스 할 수 있습니다

ContactNumber 등 3 곳이있는 CustomerViewModel에서

<label id="lblAddressLine1" /> 
<label id="lblAddressLine2" /> 
<label id="lblContactNumber" /> 

?

감사합니다.

Answer 1

당신이 고객 정보로 업데이트 할 요소의 HTML보기 $ .each 루프

$.get("/Sales/GetCustomerDetails/" + selectedVal, function (data, status) { 
      $.each(data, function (index, item) { 
        $("#txtAddressLine1").text(item.AddressLine1); 
      }); 
});