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

Question

开始使用 MVC4 和 Razor 表单，但在提交表单之前无法在表单中显示计算字段。

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

这post suggests使用我们新奇的 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 代码是不够的。 Razor 代码只会在页面首次呈现时执行。

您有几个选择:

1. 当用户完成输入时，通过 ajax 将数据发送到服务器得到一个计算总数。获取响应并将其显示在页
2. 只需在客户端作为用户完全更新计算类型(你可以使用 MVVM 框架来帮助解决这个问题(例如 淘汰赛.js))

编辑

添加一些示例链接:

这是#1 的示例:Making a Simple Ajax call to controller in asp.net mvc

这是您如何实现#2 的示例:http://knockoutjs.com/examples/cartEditor.html

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