title: Dynamically add rows in ASP.NET MVC table form
body: <p>I'm trying to program an "add" button below an ASP.NET MVC table to dynamically append a blank row, and then have a submit button to save each row to the database with one click.</p>
  
  <p>There are <a href="https://stackoverflow.com/questions/28691404/how-to-add-new-row-dynamically-in-asp-net-mvc-5">several</a> <a href="https://stackoverflow.com/questions/4751870/dynamically-add-remove-table-rows-in-asp-net">similar</a> <a href="https://stackoverflow.com/questions/1954590/add-row-dynamically-to-table-in-asp-net">questions</a> on SO but none that I have been able to apply to this. I've been trying to apply <a href="https://codexsquare.blogspot.com/2014/07/handling-multiple-entries-and-one-time.html" rel="noreferrer">this example</a> but the "add" button is not appending new rows.</p>
  
  <p>Model:</p>
  
  <pre><code>public class TableForm
      {
          public int Id { get; set; }
          public List&lt;TableFormData&gt; TableFormDatas { get; set; }
      }
  
      public class TableFormData
      {
          public int Id { get; set; }
          public string ClientSampleID { get; set; }
          public string AdditionalComments { get; set; }
          public string AcidStables { get; set; }
  </code></pre>
  
  <p>Razor view:</p>
  
  <pre><code>@model NewTestSix.Models.TableForm
  
  @{
      ViewData["Title"] = "Create";
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  
  @using (Html.BeginForm())
  {
      @Html.ValidationSummary(true)
  
  &lt;fieldset&gt;
      &lt;legend&gt;Sample submission&lt;/legend&gt;
      &lt;table id="submissionTable" class="table table-bordered"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;td&gt;Sample ID&lt;/td&gt;
                  &lt;td&gt;Additional Comments&lt;/td&gt;
                  &lt;td&gt;Acid-stable amino acids&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tr id="tablerow0"&gt;
              &lt;td&gt;
                  &lt;div class="editor-field"&gt;
                      &lt;input class="text-box single-line" name="ClientSampleID[0]" type="text" value="" required="required" /&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div class="editor-field"&gt;
                      &lt;input class="text-box single-line" name="AdditionalComments[0]" type="text" value="" required="required" /&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div class="editor-field"&gt;
                      &lt;input class="text-box single-line" name="AcidStables[0]" type="text" value="" /&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;button type="button" class="btn btn-primary" onclick="removeTr(0);"&gt;Delete&lt;/button&gt;
              &lt;/td&gt;
              &lt;td&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
  
      &lt;/table&gt;
      &lt;p&gt;
          &lt;button id="add" type="submit" class="btn btn-primary"&gt;Add&lt;/button&gt;
      &lt;/p&gt;
      &lt;hr /&gt;
  
      &lt;p&gt;
          &lt;input type="submit" value="Create" class="btn btn-default" /&gt;
      &lt;/p&gt;
  &lt;/fieldset&gt;
  }
  
  @section Scripts {
      &lt;script src="~/bundles/jqueryval.js" type="text/javascript"&gt;
          var counter = 1;
          $(function () {
  
              $('#add').click(function () {
                  $('&lt;tr id="tablerow' + counter + '"&gt;&lt;td&gt;' +
                      '&lt;input type="text" class="text-box single-line" name="ClientSampleID[' + counter + ']" value="" required="required" /&gt;' +
                      '&lt;/td&gt;' +
                      '&lt;td&gt;' +
                      '&lt;input type="text" class="text-box single-line" name="AdditionalComments[' + counter + ']" value="" required="required" /&gt;' +
                      '&lt;/td&gt;' +
                      '&lt;td&gt;' +
                      '&lt;input type="text" class="text-box single-line" name="AcidStables[' + counter + ']" value="" required="required" /&gt;' +
                      '&lt;/td&gt;' +
                      '&lt;td&gt;' +
                      '&lt;button type="button" class="btn btn-primary" onclick="removeTr(' + counter + ');"&gt;Delete&lt;/button&gt;' +
                      '&lt;/td&gt;' +
                      '&lt;/tr&gt;').appendTo('#submissionTable');
                  counter++;
                  return false;
              });
          });
          function removeTr(index) {
              if (counter &gt; 1) {
                  $('#tablerow' + index).remove();
                  counter--;
              }
              return false;
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>I'm not too fussed about model binding with the controller at this stage, I just want to get this add button working. example controller:</p>
  
  <pre><code>  [HttpPost]
          public ActionResult Index(string any = "")
          {
              IList&lt;TableForm&gt; _TableForm = new List&lt;TableForm&gt;();
  
              //Loop through the forms
              for (int i = 0; i &lt;= Request.Form.Count; i++)
              {
                  var ClientSampleID = Request.Form["ClientSampleID[" + i + "]"];
                  var additionalComments = Request.Form["AdditionalComments[" + i + "]"];
                  var acidStables = Request.Form["AcidStables[" + i + "]"];
  
                  if (!String.IsNullOrEmpty(ClientSampleID))
                  {
                      _TableForm.Add(new TableForm { ClientSampleID = ClientSampleID, AcidStables = acidStables, AdditionalComments = additionalComments });
                  }
              }
  
              return View();
          }
  </code></pre>
  
  <p>Thanks for any insights.</p>
  
  <p>Current:
  <a href="https://i.stack.imgur.com/XN6w9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XN6w9.png" alt="current"></a></p>
  
  <p>Desired after clicking "add" button:
  <a href="https://i.stack.imgur.com/4x53g.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4x53g.png" alt="enter image description here"></a></p>