javascript - 使用 Javascript 将行动态添加到 html 表中

Question

作为一名初学者 MVC 程序员，我一直在网上搜索帮助。我正在尝试使用 javascript 将一行动态添加到 HTML 表中。下面的代码效果很好，它添加了行。问题是当我返回 Controller 时，新行不存在。如果我从 3 行数据开始并添加 1 或 2 行，当我单击提交按钮时，它只返回原始的 3 条记录。不知道为什么下面没有返回我添加的新行。下面是代码的缩减部分。

任何帮助将不胜感激。

这是我的 View 。

@model List<ACES.Models.ENTITY_CONTACTS>

@using (Html.BeginForm("Edit", "Contacts", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <div class="form-horizontal">
        <table id="dataTable" class="list-Contacts table-condensed table-striped  table-responsive test">
            <tr>
                <th class="danger text-center">
                    <label>Last Name</label>
                </th>
                <th class="text-center">
                    <label>First Name</label>
                </th>
                <th class="text-center">
                    <label>Title</label>
                </th>
                <th class="text-center">
                    <label>EMail Address</label>
                </th>

            </tr>

            @if (Model != null && Model.Count > 0)
            {
                int j = 0;
                foreach (var i in Model)
                {
                    if (j == 1)
                    {
                        <tr class="contacts-record-template" style="display:none">

                            <td>
                                @Html.TextBoxFor(a => a[j].LASTNAME)
                            </td>
                            <td>
                                @Html.TextBoxFor(a => a[j].FIRSTNAME)
                            </td>
                            <td>
                                @Html.TextBoxFor(a => a[j].TITLE)
                            </td>
                            <td>
                                @Html.TextBoxFor(a => a[j].EMAIL, new { @style = "width: 200px;" })
                            </td>

                        </tr>
                    }

                    <tr class="contacts-record">
                        <td>
                            @Html.TextBoxFor(a => a[j].LASTNAME)
                        </td>
                        <td>
                            @Html.TextBoxFor(a => a[j].FIRSTNAME)
                        </td>
                        <td>
                            @Html.TextBoxFor(a => a[j].TITLE)
                        </td>
                        <td>
                            @Html.TextBoxFor(a => a[j].EMAIL, new { @style = "width: 200px;" })
                        </td>

                    </tr>
                    j++;
                }
            }
        </table>


        @*Display buttons*@
        <input type="button" class="add-button" name="add" value="Add" />

        <div style="text-align:right"><a href="#" id="addNew">Add Contact</a></div>
        <input type="submit" name="submitAction" value="Submit" class="btn btn-primary" onclick="return confirm('Please double check all information before submitting.   Submit Notification?')" />
    </div>


}
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.maskedinput.min.js"></script>
<script type="text/javascript">
    $('.phone2').mask('999-999-9999');
    $('.phone').mask('?999-999-9999');


    $(document).ready(function () {
        var count = 0;
        $('.add-button').click(function () {
            count++;
            var template = $('.contacts-record-template').clone()
            template.find('input[type=text]').val(null);
            template.find('input[type=checkbox]').prop('checked', false);
            $.each(template.find('input[type=text]'), function () {
                var name = $(this).attr('name');
                name = name.replace('0', count - 1);
                $(this).attr('name', name);
            });

            $('.list-Contacts').append(template);
            template.removeClass('contacts-record-template').addClass('contacts-record').show();
        })
    });

</script>

---

Controller 。

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit(string submitAction, List<ENTITY_CONTACTS> entity_Contacts)
    {
        if (ModelState.IsValid)
        {
            foreach (var i in entity_Contacts)
            {
                ViewBag.temp = i.LASTNAME;
            }
            db.SaveChanges();
        }
        return View(entity_Contacts);

Answer 1

问题是，您的模板输入字段的名称类似于 [1].LASTNAME。但是在您的代码中，您正在对 0 而不是 1 进行替换。

当您尝试为动态生成的输入字段生成名称值时，更改您的代码以替换 1 而不是 0。

下面的代码应该可以正常工作。

$(document).ready(function () {

    $('.add-button').click(function() {

        var count = $("tr.contacts-record").length;
        var template = $('.contacts-record-template').clone();
        template.find('input[type=text]').val(null);
        template.find('input[type=checkbox]').prop('checked', false);
        $.each(template.find('input[type=text]'), function() {
            var name = $(this).attr('name');             
            name = name.replace('1', count);             
            $(this).attr('name', name);
        });

        $('.list-Contacts').append(template);
        template.removeClass('contacts-record-template')
                                           .addClass('contacts-record').show();
    });
});