title: How to dynamically add row to html table
body: <p>I got a ASP.net MVC 4.0 web application which enable user to dynamically add rows to html table.</p>
  
  <p><strong>In my view:</strong></p>
  
  <pre><code>$('.del').live('click', function () {
      id--;
  
      var rowCount = $('#options-table tr').length;
  
      if (rowCount &gt; 2) {
           $(this).parent().parent().remove();
      }  
  });
  
  $('.add').live('click', function () {
      id++;
      var master = $(this).parents("table.dynatable");
  
      // Get a new row based on the prototype row
      var prot = master.find(".prototype").clone();
      prot.attr("class", "")
      prot.find(".id").attr("value", id);
  
      master.find("tbody").append(prot);
  });
  
  &lt;table class="dynatable" id="options-table" width="100%" style="text-align:center" border="1"&gt;
      &lt;tr class="prototype"&gt;
          &lt;%:Html.EditorFor(m =&gt; Model.ChillerDetails)%&gt; //referring to the template
      &lt;/tr&gt;
      &lt;thead&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>In my template:</strong></p>
  
  <pre><code>&lt;%@ Control  Language="C#" Inherits="System.Web.Mvc.ViewUserControl&lt;GMIS.Models.GMISEBModels.ChillerPlantDetails&gt;" %&gt;
  
  &lt;div id="ChillerPlantDetails"&gt;
      &lt;td&gt;&lt;%: Html.EditorFor(m =&gt; m.ChillerAge) %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%: Html.EditorFor(m =&gt; m.ChillerBrand) %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%: Html.EditorFor(m =&gt; m.ChillerCapacity) %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%: Html.EditorFor(m =&gt; m.ChillerRefrigerant) %&gt;&lt;/td&gt;
      &lt;td&gt;
          &lt;a href="#" class="add"&gt;&lt;img src="&lt;%= Url.Content("~/Content/Images/add.png") %&gt;"/&gt;&amp;nbsp;&lt;a href="#" class="del"&gt;&lt;img src="&lt;%= Url.Content("~/Content/Images/remove.png") %&gt;"/&gt;
      &lt;/td&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>In my Model:</strong></p>
  
  <pre><code>public class AddHealthCheckFormModel
  {
      public List&lt;ChillerPlantDetails&gt; ChillerDetails { get; set; }
  }
  
  public class ChillerPlantDetails
  {
      //[Required(ErrorMessage = "Please enter Chiller Capacity.")]
      [Display(Name = "Chiller Capacity")]
      public string ChillerCapacity { get; set; }
  
      //[Required(ErrorMessage = "Please enter Age of Chiller.")]
      [Display(Name = "Age of Chiller")]
      public string ChillerAge { get; set; }
  
      //[Required(ErrorMessage = "Please enter Chiller Brand.")]
      [Display(Name = "Chiller Brand")]
      public string ChillerBrand { get; set; }
  
      //[Required(ErrorMessage = "Please enter Chiller Refrigerant.")]
      [Display(Name = "Chiller Refrigerant")]
      public string ChillerRefrigerant { get; set; }
  }
  </code></pre>
  
  <p>Now the question comes to how can I capture the data in the dynamically added rows into my controller and save into database?</p>