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

【问题标题】：How to update a label from a postback in MVC3/Razor如何从 MVC3/Razor 中的回发更新标签
【发布时间】：2012-04-24 03:55:06
【问题描述】：

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 几乎一无所知，所以我希望能详细说明如何做到这一点，以及如何将这一切联系在一起。

【问题讨论】：

标签： asp.net-mvc-3 razor

【解决方案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>

【讨论】：

谢谢，这看起来很有希望。但我很遗憾仍然没有工作。也许这是关于“确保你的页面中加载了 jQuery”的部分——我需要加载哪个脚本文件？另外，由于它是一个 Ajax 调用，我假设脚本是 javascript 类型的？（是的，我真的 am 是新手。|-)）
@Shaul：在您有下拉菜单的页面中包含对 jQuery 脚本的引用。我用那个更新了我的答案。使用firebug控制台查看是否有脚本错误。
您介意检查语法，尤其是 $(#itemPrice... 开头的行吗？看起来至少缺少一个双引号，@Url.Action 中的单引号应该可能是双引号......即使在更改这些之后，我在“GetPrice”下收到编译器警告，说“预期'，'或'）'......
@Shaul：你是对的。我错过了“那里！谢谢。我现在修好了。现在应该可以正常工作了。URL.Action 可以正常工作。
不，@Url.Action('GetPrice','Product') 上仍然存在编译器错误，直到我将其更改为 @Url.Action("GetPrice","Product")。但是当我在该方法上设置断点时，它不会被命中。如果我拼错了，它根本不会抛出任何异常。我还能做错什么？

【解决方案2】：

当用户选择产品时，您的视图无法使用 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 网站上进行一些搜索，我相信您会找到大量有关如何执行此操作的示例。

【讨论】：