Question

I am using ASP.NET MVC 3.

I have textboxes and I have a control that displays the calculated value of the sum of these textboxes. I use jQuery to calculate these results.

I am struggling with post back, then the total is cleared and I don’t know how it can retain the calculated results. So I thought that if I have a property in my view model then it will retain the value on post back. I tried using Html.TextboxFor for the total and this seems to hold the value when I click the submit button. But I don’t want it to be a textbox, just text, but I still need it to be bound to the view model.

Part of my view model:

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

Part of my 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 for the additions:

$('.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);
});

When I type in a value in a textbox then it calculates correctly. If I type in values in the 4 textboxes then it is calculated correctly. If I enter a value into on 1 of the textboxes then the TotalMonthlyIncome is null, but when all 4 textboxes have values in it then it has the value of the additions of the textboxes. Why is it doing this? Is it something that is not right in my code?

Answer 1

In the setter of the TotalMonthlyIncome property you must take into account that your decimals could be 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);
    }
}