動的にhtmlテーブルに行を追加する方法

Question

私は動的にHTMLテーブルに行を追加できるASP.net MVC 4.0 Webアプリケーションを手に入れました。私の見解では

：

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

次のビューは、Ajaxの代わりにHTTP Postを使用して新しいレコードを追加します。 Ajax.BeginFormを適切なパラメータに置き換えると、単純なポストリクエストではなくAjaxが使用されます。

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

は、新しい行を追加追加：

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

     return this.View(model); 
    } 

、リポジトリにあなたが実際にデータベース内のデータを保存することができます：

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

あなたの行動は、このようなものでした。これにはEFまたは他のORMを使用できます。