如何動態添加行到html表

Question

我有一個ASP.net MVC 4.0的Web應用程序，它使用戶能夠動態地添加行到HTML表。

筆者認爲：

$('.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> 

在我的模板：

<%@ 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> 

在我的模型：

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; } 
} 

現在問題是如何將動態添加的行中的數據捕獲到我的控制器中並保存到數據庫中？

Answer 1

您可以使用以下視圖，它將使用HTTP Post而不是Ajax添加新記錄。 用適當的參數替換Ajax.BeginForm將使用Ajax而不是普通的post請求。

@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" /> 
} 

添加添加新行：

<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> 

你的行動可能是這樣的：

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

     return this.View(model); 
    } 

而且在存儲庫可以將數據實際保存在數據庫中。您可以使用EF或任何其他ORM來做到這一點。