如何在 MVC Razor 表单中显示计算字段？

Question

从 MVC4 和 Razor 表单开始，但在提交表单之前在表单中显示计算字段时遇到问题。

比如说，为了简单起见，我们有“价格”和“数量”字段，它们是可编辑的文本框，还有第三个只读文本框，用于显示计算出的总价格 * 数量。

这篇文章表明，使用我们新奇的 Razor 既方便又好用，但是当我们尝试以下操作时，表单上绝对没有任何动态变化：

@{
   var value = model.Item.Value;
   var price = model.Item.Proce;
   var calculated = value * price;
}

<div class="price">Your price: @calculated</div>

Answer 1

如果你希望它在用户输入时或提交表单之前是实时的，你将不得不使用 javascript；服务器端剃刀代码还不够。razor 代码只会在页面首次呈现时执行。

您有几个选择：

1. 当用户完成输入后，通过 ajax 将数据发送到服务器以获得计算出的总数。获取响应并将其显示在页面上
2. 只需在用户键入时在客户端上完全更新计算（您可以使用 MVVM 框架来帮助完成此操作（例如 Knockout.js））

编辑

添加一些示例链接：

下面是 #1 的示例：在 asp.net mvc 中对控制器进行简单的 Ajax 调用

以下是如何实现#2 的示例： http://knockoutjs.com/examples/cartEditor.html

就我个人而言，我会在客户端上进行计算（#2），然后在服务器端进行验证，因为这才是重要的。