1

MVC / Razor / Javascript初心者の質問：

ドロップダウンリストから単一の製品を選択できるMVC3/Razorフォームがあります。

<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）。

これはかなり簡単なはずですが、私はRazorにかなり慣れておらず、Javascriptについてほとんど何も知らないので、それを行う方法と、すべてがどのように連携するかについての詳細な説明をいただければ幸いです。

4

2 に答える 2

4

ドロップダウンの下にdiv/spanを追加します。

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

スクリプトで、価格を返すコントローラーアクションの1つに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>
于 2012-04-21T23:13:10.560 に答える
0

ユーザーが製品を選択すると、金額はビューに表示されません（ページはサーバーでレンダリングされますが、実際にはクライアントで実行されます。モデルはクライアント側のページでは使用できません）。したがって、クライアントに渡される製品に基づいた金額のルックアップを含む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のドキュメントを確認するのに少し時間をかけたいと思うでしょう。あなたはそれをかなり使うことになります。コードは基本的にドロップダウンを「選択」し、changeイベントとkeypressイベントにハンドラーをアタッチします。それらが起動すると、displayAmount関数を呼び出します。displayAmount（）は、選択されたインデックスを取得し、リストから値を取得します。最後に、HTMLを取得した量に設定します。

ローカル配列の代わりに、コントローラーを呼び出すことができます。値をJsonResultとして返すアクション（メソッド）をコントローラーに作成します。jquery.ajax（）を使用してコールバックを実行します。こことjQueryサイトで検索してみてください。これを行う方法については、たくさんの例が見つかると思います。

于 2012-04-21T23:06:26.897 に答える