如何动态添加行到HTML表格中

6

我有一个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; }
}

现在的问题是如何在我的控制器中捕获动态添加行中的数据并保存到数据库中?

你可以通过Ajax调用或者完整的Postback来保存行数据,你想使用哪种方式? - Ehsan Sajjad
1个回答

4
你可以使用以下的View,它将使用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来完成此操作。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接