title: first @Html.TextBoxFor field doesn't update model when doing an ajax post
body: <p>Bit of a strange one this - within a form, I have some fields</p>
  
  <pre><code> &lt;div class="container"&gt;
  
                @*  &lt;div class="row"&gt;
                      &lt;div class="col-md-12" &gt;@Html.HiddenFor(m =&gt; m.Reference)&lt;/div&gt;
                  &lt;/div&gt;*@
  
  
                  &lt;div class="row"&gt;
                      &lt;div  class="col-md-1" &gt;@Html.Label("Amount:")&lt;/div&gt;
                      &lt;div class="col-md-2" &gt;@Html.TextBoxFor(m =&gt; m.Amount)&lt;/div&gt;
                      &lt;div class="col-md-2" &gt;@Html.Label("Includes VAT:")&lt;/div&gt;
                      &lt;div class="col-md-7" &gt;@Html.CheckBoxFor(m =&gt; m.IncludesVAT) &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  </code></pre>
  
  <p>and I post the data to a controller using:</p>
  
  <pre><code>function refreshData() {
  
      $.ajax({
          url: '@Url.Action("UpdateDebitModel", "Home")',
          type: 'post',
          data: JSON.stringify($("#DebitForm").serialize())
      });
  }
  </code></pre>
  
  <p>It all works but the first @Html.TextBoxFor or CheckBoxFor never passes its value to the controller (e.g. Amount in this case, but if I switch the order above so the checkbox is the first control then the checkbox value is always ignored).</p>
  
  <p>I can get around it by having a hidden field - i.e. if I uncomment the above hidden field everything works. (It doesn't have to be a hidden for, it could be a TextBoxFor - and it doesn't matter which field in the model is referenced)</p>
  
  <p>I am perplexed, I must be missing something here.  As I said I can make it work but I really want to understand why the first control (and only the first control) is ignored?</p>
  
  <p>I'm calling the refreshData function on change:</p>
  
  <pre><code>$('#Amount').change(function () {
          refreshData();
      });
  </code></pre>