MVC3/면도기에 다시 게시에서 레이블을 업데이트하는 방법

Question

MVC/면도기/자바 스크립트 초보자 질문 :

내가 사용이 드롭 다운 목록에서 하나의 제품을 선택할 수있는 MVC3/면도기 양식을 가지고있다.

<div class="editor-label"> 
    Product 
</div> 
<div class="editor-field"> 
    @Html.DropDownList("ProductID", (IEnumerable<SelectListItem>)ViewBag.Products, "--Select One--") 
    @Html.ValidationMessageFor(model => model.ProductID) 
</div> 

은 내가 다음 원하는 것은 단지 드롭 다운 목록 (모델 속성 이름이 Amount입니다) 아래의 레이블에 선택한 제품의 가격을 표시하는 것입니다.

꽤 쉽지만 면도기에서 꽤 새로워졌고 Javascript에 대해 거의 알지 못해서 어떻게해야하는지, 그리고 어떻게 모두 함께 작동하는지 자세히 설명해 주시면 감사하겠습니다.

Answer 1

드롭 다운 아래에 div/span을 추가하십시오.

@Html.DropDownList("ProductID", (IEnumerable<SelectListItem>)ViewBag.Products, "--Select One--") 
<div id="itemPrice"></div> 

그리고 스크립트에서 가격을 반환하는 컨트롤러 액션 중 하나에 ajax 호출을합니다.

$(function(){ 
    $("#ProductId").change(function(){ 
    var val=$(this).val();   
    $("#itemPrice").load("@Url.Action("GetPrice","Product")", { itemId : val }); 
    }); 
}); 

하고 제품 컨트롤러 그 것이다

public string GetPrice(int itemId) 
{ 
    decimal itemPrice=0.0M; 
    //using the Id, get the price of the product from your data layer and set that to itemPrice variable. 

    return itemPrice.ToString(); 
} 

이 같은 컨트롤러 액션을! jQuery를 페이지에로드했는지 확인하십시오. 그러면 정상적으로 작동합니다.

편집 :이 (아직로드되지 않은 경우) jQuery 라이브러리를로드하는 페이지 라인,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

Answer 2

사용자가 제품을 선택하면 금액을 볼 수 없습니다 (페이지가 서버에서 렌더링되지만 실제로 클라이언트에서 실행되므로 클라이언트 측의 페이지에서 모델을 사용할 수 없음을 기억하십시오)). 따라서 클라이언트에 전달 된 제품을 기준으로 금액 조회를 포함하는 자바 스크립트 배열을 렌더링해야합니다 (클라이언트 측 JavaScript를 통해 사용할 수 있도록). 그렇지 않으면 클라이언트 측 JavaScript에 콜백을해야합니다. 서버를 사용하여이 정보를 검색하십시오.

나는 이것을하기 위해 jQuery를 사용할 것이다.

다음은 배열을 사용한 경우 jQuery/Javascript 코드의 간단한 예제입니다.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     // This code can easily be built up server side as a string, then 
     // embedded here using @Html.Raw(Model.NameOfPropertyWithString) 
     var list = new Array(); 
     list[0] = ""; 
     list[1] = "$1.00"; 
     list[2] = "$1.25"; 

     $("#ProductID").change(displayAmount).keypress(displayAmount); 

     function displayAmount() { 
      var amount = list[($(this).prop('selectedIndex'))]; 
      $("#amount").html(amount); 
     } 
    }); 
</script> 
<select id="ProductID" name="ProductID"> 
    <option value="" selected>-- Select --</option> 
    <option value="1">First</option> 
    <option value="2">Second</option> 
</select> 
<div id="amount"></div> 

당신은 jQuery에 대한 문서보고 시간을 보내고 싶을 것이다. 꽤 많이 사용하게 될 것입니다. 코드는 기본적으로 드롭 다운을 "선택"하고 변경 및 키 누르기 이벤트에 핸들러를 연결합니다. 실행되면 displayAmount 함수를 호출합니다. displayAmount()는 선택한 인덱스를 검색 한 다음 목록에서 값을 가져옵니다. 마지막으로 HTML을 검색된 양으로 설정합니다.

로컬 배열 대신 컨트롤러를 호출 할 수 있습니다. 컨트롤러에서 JsonResult로 값을 반환 한 작업 (메서드)을 만듭니다. jquery.ajax()를 사용하여 콜백을 수행합니다. 여기에서 jQuery 사이트를 검색해보십시오.이 작업을 수행하는 방법에 대한 예제가 많이 있습니다.