如何MVC3 /剃刀更新從回發一個標籤

MVC /剃刀/ JavaScript的新手問題：如何MVC3 /剃刀更新從回發一個標籤

我有一個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幾乎一無所知，所以我很感激任何關於如何做的詳細解釋，以及它是如何掛在一起的。

來源

2012-04-20 Shaul Behr

在下拉菜單中添加一個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>

來源

2012-04-21 23:13:10 Shyju

謝謝，這看起來很有希望。但我後悔仍然不工作。也許這是關於「確保你的頁面中加載了jQuery」的部分 - 我需要加載哪個腳本文件？另外，因爲它是一個Ajax調用，我認爲該腳本是JavaScript類型的？（是的，我真的**是**新手。| - ）） – 2012-04-23 16:55:38

@Shaul：在您的頁面中包含對下拉菜單的引用。我更新了我的答案。使用螢火蟲控制檯查看是否有腳本錯誤。 – Shyju 2012-04-23 17:00:10

你介意檢查語法，特別是$（＃itemPrice ...？）行的語法，它看起來至少有一個雙引號缺失，並且@ Url.Action中的單引號可能應該是雙引號......甚至在改變這些之後，我在「GetPrice」下面看到一個編譯器警告，說「Expected'，'or'）'... – 2012-04-23 17:21:24

當用戶選擇產品時，金額對您的視圖不可用（請記住，該頁面在服務器上呈現，但實際上在客戶端上執行;您的模型在客戶端的頁面上不可用）。所以你要麼必須在一個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設置爲檢索的數量。

而不是本地陣列，你可以打電話給你的控制器。你會在你的控制器上創建一個action（方法），它返回值作爲JsonResult。你會使用jquery.ajax（）進行回調。在這裏做一些搜索和jQuery網站，我相信你會發現很多關於如何做到這一點的例子。

來源

2012-04-21 23:06:26

如何MVC3 /剃刀更新從回發一個標籤

回答

相關問題