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

现在的问题是如何将动态添加的行中的数据捕获到我的 Controller 中并保存到数据库中？

最佳答案

您可以使用以下 View ，它将使用 HTTP Post 而不是 Ajax 添加新记录。 将其替换为具有适当参数的 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" />
}

添加添加新行:

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

你的 Action 可能是这样的:

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

        return this.View(model);
    }

在存储库中，您实际上可以将数据保存在数据库中。您可以为此使用 EF 或任何其他 ORM。

关于javascript - 如何动态添加行到html表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18415730/