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

您可以使用以下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。

如何动态地向html表添加行

1 个答案: