Asp MVC привязка вычисленных результатов от jQuery к модели

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 текстовых поля, то это будет правильно рассчитано. Если я ввожу значение в 1 из текстовых полей, тогда 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 необходимо учитывать, что ваши десятичные дроби могут быть нулевыми:

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);
    }
}