Question

我正在使用ASP.NET MVC 3。

我有文本框，我有一个控件，显示这些文本框总和的计算值。我使用jQuery来计算这些结果。

我正在努力回发，然后总数被清除，我不知道它如何保留计算结果。所以我认为如果我的视图模型中有一个属性，那么它将保留回发后的值。我尝试使用Html.TextboxFor作为总数，这似乎在我点击提交按钮时保持该值。但我不希望它成为文本框，只是文本，但我仍然需要将它绑定到视图模型。

我的观点模型的一部分：

public class EditGrantApplicationViewModel
{
   public decimal? GrossMonthlySalary { get; set; }
   public decimal? SpouseGrossMonthlySalary { get; set; }
   public decimal? AdditionalIncome { get; set; }
   public decimal? ChildSupportIncome { get; set; }
   public decimal? TotalMonthlyIncome
   {
      get { return totalMonthlyIncome; }
      set
      {
         totalMonthlyIncome = GrossMonthlySalary +
            SpouseGrossMonthlySalary +
            AdditionalIncome +
            ChildSupportIncome;
      }
   }
}

我的部分HTML：

<td><label>Gross Monthly Salary:</label> <span class="red">**</span></td>
<td>@Html.TextBoxFor(x => x.GrossMonthlySalary, new { @class = "income", maxlength = "10", size = "20" })
   @Html.ValidationMessageFor(x => x.GrossMonthlySalary)
</td>

<td><label>Spouse Gross Monthly Salary:</label></td>
<td>@Html.TextBoxFor(x => x.SpouseGrossMonthlySalary, new { @class = "income", maxlength = "10", size = "20" })
   @Html.ValidationMessageFor(x => x.SpouseGrossMonthlySalary)
</td>

<td><label>Any Additional Income:</label></td>
<td>@Html.TextBoxFor(x => x.AdditionalIncome, new { @class = "income", maxlength = "10", size = "20" })
   @Html.ValidationMessageFor(x => x.AdditionalIncome)
</td>

<td><label>Child Support Received:</label></td>
<td>@Html.TextBoxFor(x => x.ChildSupportIncome, new { @class = "income", maxlength = "10", size = "20" })
   @Html.ValidationMessageFor(x => x.ChildSupportIncome)
</td>

<td><label class="total">Total Monthly Income:</label></td>
<td>
   <label id="TotMonthlyIncome" class="total-amount">@Html.DisplayTextFor(x => x.TotalMonthlyIncome)</label>
   @Html.HiddenFor(x => x.TotalMonthlyIncome)
</td>

增加的jQuery：

$('.income').keyup(function () {

   var incomes = $('.income'),
      totDisplay = $('#TotMonthlyIncome'),
      totalDisplay = $('#TotalMonthlyIncome'),
      totalVal = 0;

   incomes.each(function () {
      var matches = null;
      // find the number to add to total
      matches = $(this).val().match(/\d+/);
      // not bothering with the regex on totalVal because we set it
      totalVal = (matches !== null ? parseInt(matches[0], 10) : 0) + parseInt(totalVal, 10);
   });
   totalVal = totalVal === 0 ? '' : totalVal;
   totDisplay.text(totalVal);
   $('#TotalMonthlyIncome').val(totalVal);
});

当我在文本框中输入值时，它会正确计算。如果我在4个文本框中键入值，则会正确计算。如果我在一个文本框中输入一个值，则TotalMonthlyIncome为null，但是当所有4个文本框中都有值时，它具有文本框添加的值。它为什么这样做？这是我的代码中不对的东西吗？

Answer 1

您可以创建隐藏的输入并将其与viewmodel属性绑定。

<%: Html.HiddenFor(m => m.CalculatedValue) %>
<div id="DisplayCalculatedValue"><%: Model.CalculatedValue %></div>

<script type="text/javascript">
var value = // calculate it
$('#CalculatedValue').val(value);
$('#DisplayCalculatedValue').html(value);
</script>

Answer 2

在TotalMonthlyIncome属性的setter中，您必须考虑到您的小数可能为null：

private decimal? totalMonthlyIncome;
public decimal? TotalMonthlyIncome
{
    get { return totalMonthlyIncome; }
    set
    {
        totalMonthlyIncome =
            (GrossMonthlySalary.HasValue ? GrossMonthlySalary.Value : 0m) +
            (SpouseGrossMonthlySalary.HasValue ? SpouseGrossMonthlySalary.Value : 0m) +
            (AdditionalIncome.HasValue ? AdditionalIncome.Value : 0m) +
            (ChildSupportIncome.HasValue ? ChildSupportIncome.Value : 0m);
    }
}

Asp MVC绑定计算结果从jQuery到模型

2 个答案: