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

在 Dropdown 下添加一个 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-21T23:13:10.560 回答
0

当用户选择产品时，您的视图无法使用 Amount（请记住页面在服务器上呈现，但实际上在客户端上执行；您的模型在客户端的页面中不可用）。因此，您要么必须在一个 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 站点进行一些搜索，我相信您会找到大量有关如何执行此操作的示例。

于 2012-04-21T23:06:26.897 回答