JQuery和MVC POST

Question

我有一个绑定到模型的html元素(使用MVC3)

        <label id="total-amount">
             @Html.Encode(@Model.TotalAmount)
        </label>

我在客户端使用Jquery修改了这个值

        if (!$(this).is(':checked')) {

           var lblTotalAmount = $("#total-amount");
           var totalAmount = nationalPrice + recurPrice;
           lblTotalAmount.text(totalAmount.toFixed(2));

        }

它工作得很好。但是当我在我的控制器中发布Model.TotalAmount的值时..我通过JQuery修改的值没有反映...

    [HttpPost]
    [ActionName("Payment")]
    public ActionResult PaymentViaPost(PaymentVM viewModel)
    {
        //still the same value before JQuery modification
        var totalAmount = viewModel.TotalAmount; 

我是不是遗漏了什么，比如我需要一个使用AJAX的异步调用或者别的什么……如果是这样，我该怎么做呢？

Answer 1

标签中的文本不会发送到服务器，您需要使用某种输入控件。

我建议您使用隐藏控件，并让您的JQuery同时更新标签和隐藏输入。

例如：

@Html.HiddenFor( x => x.TotalAmount)
<label id="total-amount">
     @Html.Encode(@Model.TotalAmount)
</label>

if (!$(this).is(':checked')) {
   var lblTotalAmount = $("#total-amount");
   var totalAmount = nationalPrice + recurPrice;
   lblTotalAmount.text(totalAmount.toFixed(2));

   var hiddenInput = $("#TotalAmount");
   hiddenInput.val(totalAmount);   
}

Answer 2

我相信这可以通过以下方式实现：

1. 从客户端更新html控制值正如您所做的那样
2. 使用$.Post of jQuery将更新后的值发送到MVC控制器(创建新控制器以更新模型)
3. 在控制器操作中更新您的模型

一旦模型被更新，它将反映在您的UI上。在您的例子中，问题是您的模型没有更新，因此PaymentViaPost操作总是从模型中获取旧值

下面的链接可能会有所帮助

MVC3 and jQuery

Update model with jQuery