Question

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几乎一无所知，所以我会很感激有关如何做到这一点的详细解释，以及它们如何挂在一起。

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的文档。你最终会使用它。代码基本上“选择”下拉列表并将处理程序附加到change和keypress事件。当它们触发时，它会调用displayAmount函数。 displayAmount（）检索选定的索引，然后从列表中获取值。最后，它将HTML设置为检索的数量。

您可以调用控制器，而不是本地阵列。您将在控制器上创建一个以JSONResult形式返回值的操作（方法）。你可以使用jquery.ajax（）进行回调。在这里和jQuery网站做一些搜索，我相信你会找到很多关于如何做到这一点的例子。

如何从MVC3 / Razor中的回发更新标签

2 个答案: