html tablosuna dinamik olarak satır ekleme

Question

Kullanıcının html tablosuna dinamik olarak satır eklemesini sağlayan bir ASP.net MVC 4.0 web uygulaması var. Bence

:

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

benim şablonunda: Benim Modelinde

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

Şimdi soru, dinamik olarak eklenen satırlardaki verileri denetleyicime nasıl kaydedebilirim ve veritabanına nasıl kaydedebilirim?

Answer 1

Ajax yerine HTTP Postasını kullanarak yeni kayıt ekleyeceğiniz aşağıdaki Görünümü kullanabilirsiniz. Ajax.BeginForm ile uygun parametrelerle değiştirmek, düz posta isteği yerine Ajax kullanır.

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

Kişisel Eylem böyle olabilir:

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

     return this.View(model); 
    } 

Ve depoda aslında veritabanındaki verileri kaydedebilirsiniz

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

Ekleme yeni satır ekleyin. Bunun için EF veya başka bir ORM kullanabilirsiniz.