How to dynamically add a row to an html table

Question

I came up with an ASP.net MVC 4.0 web application that allows a user to dynamically add rows to an html table.

In my opinion:

$('.del').live('click', function () { id--; var rowCount = $('#options-table tr').length; if (rowCount > 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); }); <table class="dynatable" id="options-table" width="100%" style="text-align:center" border="1"> <tr class="prototype"> <%:Html.EditorFor(m => Model.ChillerDetails)%> //referring to the template </tr> <thead> </table> 

In my template:

 <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<GMIS.Models.GMISEBModels.ChillerPlantDetails>" %> <div id="ChillerPlantDetails"> <td><%: Html.EditorFor(m => m.ChillerAge) %></td> <td><%: Html.EditorFor(m => m.ChillerBrand) %></td> <td><%: Html.EditorFor(m => m.ChillerCapacity) %></td> <td><%: Html.EditorFor(m => m.ChillerRefrigerant) %></td> <td> <a href="#" class="add"><img src="<%= Url.Content("~/Content/Images/add.png") %>"/>&nbsp;<a href="#" class="del"><img src="<%= Url.Content("~/Content/Images/remove.png") %>"/> </td> </div> 

In my model:

 public class AddHealthCheckFormModel { public List<ChillerPlantDetails> 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; } } 

Now the question is, how can I capture data in dynamically added rows in my controller and save it in the database?

Answer 1

You can use the following view, which will add a new entry using HTTP Post instead of Ajax. Replacing it with Ajax.BeginForm with the appropriate parameters, use Ajax instead of a regular mail request.

 @using (Html.BeginForm()) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) <table class="list-chiller-record"> @for (int i = 0; i < this.Model.ChillerDetails.Count; i++) { if (i == 0) { <tr class="chiller-record-template" style="display:none"> <td>@Html.EditorFor(x=>x.ChillerDetails[i].ChillerAge)</td> <td>@Html.EditorFor(x=>x.ChillerDetails[i].ChillerBrand)</td> <td>@Html.EditorFor(x=>x.ChillerDetails[i].ChillerCapacity)</td> <td>@Html.EditorFor(x=>x.ChillerDetails[i].ChillerRefrigerant)</td> </tr> } <tr class="chiller-record"> <td>@Html.EditorFor(x=>x.ChillerDetails[i].ChillerAge)</td> <td>@Html.EditorFor(x=>x.ChillerDetails[i].ChillerBrand)</td> <td>@Html.EditorFor(x=>x.ChillerDetails[i].ChillerCapacity)</td> <td>@Html.EditorFor(x=>x.ChillerDetails[i].ChillerRefrigerant)</td> </tr> } </table> <br /> <input type="button" class="add-button" name="add" value="Add" /> <input type="submit" class="save-button" name="save" value="save" /> } 

Add add new line:

  <script type="text/javascript"> $(document).ready(function () { var count = 2; $('.add-button').click(function () { count++; var template = $('.chiller-record-template').clone() template.find('input[type=text]').val(''); $.each(template.find('input[type=text]'), function () { var name = $(this).attr('name'); name = name.replace('0', count - 1); $(this).attr('name', name); }); $('.list-chiller-record').append(template); template.removeClass('chiller-record-template').addClass('chiller-record').show(); }) }); </script> 

Your action may be as follows:

  [HttpPost] public ActionResult AddHealthCheck(AddHealthCheckFormModel model) { if (ModelState.IsValid) { HealthCheckRepository healthCheckRepository = new HealthCheckRepository(); healthCheckRepository.save(model); } return this.View(model); } 

And in the repository, you can actually save the data in the database. You can use EF or any other ORM for this.