title: "Add item" JavaScript buttons for forms bound to collections -- is the situation any better in MVC3?
body: <p>So I asked <a href="https://stackoverflow.com/questions/3305199/inline-crud-in-asp-net-mvc">a question last year</a> about having an "add item" button that'll generate a new row in a form in JavaScript that I can return to an MVC POST action handler.</p>
  
  <p>For instance, if I have a form generated like this:</p>
  
  <pre><code>@for(int i = Model.Notes.Count - 1; i &gt;= 0; i--)
  {
      &lt;tr&gt;
          &lt;td&gt;@Html.HiddenFor(m =&gt; m.Notes[i].Id, new Dictionary&lt;string, object&gt; { { "data-index", i } } )
          @Html.TextBoxFor(m =&gt; m.Notes[i].Timestamp, new { @class = "datepicker" })&lt;/td&gt;
          &lt;td&gt;@Html.DropDownListFor(m =&gt; m.Notes[i].PersonId, new SelectList(Model.People, "Id", "Name"))&lt;/td&gt;
          &lt;td&gt;@Html.EditorFor(m =&gt; m.Notes[i].Amount)&lt;/td&gt;
          &lt;td&gt;@Html.EditorFor(m =&gt; m.Notes[i].Comment)&lt;/td&gt;
      &lt;/tr&gt;
  }
  </code></pre>
  
  <p>The HTML it generates for a single row:</p>
  
  <pre><code>&lt;tr&gt;
                  &lt;td&gt;&lt;input data-index="2" data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Notes_2__Id" name="Notes[2].Id" type="hidden" value="16192"&gt;
                  &lt;input class="datepicker hasDatepicker valid" data-val="true" data-val-required="The Timestamp field is required." id="Notes_2__Timestamp" name="Notes[2].Timestamp" type="text" value="11/04/2011 2:11:21 PM"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;select id="Notes_2__PersonId" name="Notes[2].PersonId"&gt;
  &lt;option value="8367"&gt;Rei&lt;/option&gt;
  &lt;option value="8668"&gt;Ray&lt;/option&gt;
  &lt;option value="8883"&gt;Roy&lt;/option&gt;
  &lt;option value="8814"&gt;Rob&lt;/option&gt;
  &lt;option value="8886"&gt;Ron&lt;/option&gt;
  &lt;/select&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input class="text-box single-line" data-val="true" data-val-number="The field Amount must be a number." data-val-required="The Amount field is required." id="Notes_2__Amount" name="Notes[2].Amount" type="text" value="0.00"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input class="text-box single-line" id="Notes_2__Comment" name="Notes[2].Comment" type="text" value="Some comment"&gt;&lt;/td&gt;
              &lt;/tr&gt;
  </code></pre>
  
  <p>If I want to add an item in MVC2, I had to write some really dry JavaScript code to determine the index of the latest item, generate all the <code>tr</code>s, <code>td</code>s, and <code>input</code> HTML and set the attributes to match.</p>
  
  <p>Not only is this really non-trivial, if I ever change something in the cshtml, I have to be very careful to make sure all the JavaScript matches. It's a really nasty duplication of code.</p>
  
  <p>Is there any better way to do it in MVC3?</p>
  
  <p>Thanks in advance,</p>
  
  <p>Rei</p>