Сохранение рассчитанных итогов jQuery после обратной передачи

Question

Я использую jQuery и ASP.NET MVC 3 с razor view engine.

У меня есть пара текстовых полей, в которые можно вводить числовые значения.У меня есть элемент управления меткой, в котором подсчитываются суммы текстовых полей с помощью jQuery.

У меня есть следующие текстовые поля и метки (для вычисленных результатов):

<input id="GrossMonthlySalary" type="text" />
<input id="SpouseGrossMonthlySalary" type="text" />
<input id="AdditionalIncome" type="text" />
<input id="ChildSupportIncome" type="text" />

<label id="TotalMonthlyIncome" class="total-amount"></label>

В моем файле .jsУ меня есть следующее:

$(function () {

   $('#GrossMonthlySalary, #SpouseGrossMonthlySalary, #AdditionalIncome, #ChildSupportIncome').keyup(function () {
      var val1 = $('#GrossMonthlySalary').val();
      var val2 = $('#SpouseGrossMonthlySalary').val();
      var val3 = $('#AdditionalIncome').val();
      var val4 = $('#ChildSupportIncome').val();

      var totalMonthlyIncome =
         (parseInt(val1, 10) || 0) +
         (parseInt(val2, 10) || 0) +
         (parseInt(val3, 10) || 0) +
         (parseInt(val4, 10) || 0);

      if (totalMonthlyIncome == 0) {
         $('#TotalMonthlyIncome').text('');
      }
      else {
         $('#TotalMonthlyIncome').text(totalMonthlyIncome);
      }
   });
});

Если я нажму на кнопку «Отправить» и появятся ошибки, то ошибки отобразятся, и элемент управления «Моя метка» с вычисленными результатами будет удален.Как мне сохранить значения после отправки обратно?

Еще один вопрос о том, как я рассчитал результаты, это хорошо или есть лучший способ?

Answer 1

Имейте в виду, что parseInt потерпит неудачу, как только попадет не числовой символ:

parseInt('$10') // NaN

Что касается вычисления итогов, поскольку вы не выполняете никакой дополнительной обработки для определенных значений, вы можете упростить все это с помощью селектора классов.

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

  var incomes = $('.incomes'),
      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;
  totalDisplay.text(totalVal);
});

Answer 2

Ваш код jQuery выглядит просто отлично. Я могу немного его укоротить (http://jsfiddle.net/JBqRj/4), но на самом деле это ничего не оптимизирует.

Если вы хотите опубликовать его на сервере, вам просто нужно добавить в форму скрытое текстовое поле, содержащее то же значение, что и ваша метка: http://jsfiddle.net/JBqRj/5/

Чтобы сохранить опубликованные значения после ошибки, вам нужно сделать это в своем коде ASP. Просто заполните поля формы (включая скрытое) теми же, что были опубликованы.