Question

作为初学MVC程序员，我不断在网上寻求帮助。我试图使用JavaScript动态地向HTML表添加一行。下面的代码工作得很好，它添加了行。问题是当我返回控制器时，新行不在那里。如果我从3行数据开始并添加1或2行，当我单击提交按钮时，它仅返回原始3条记录。不知道为什么下面没有返回我添加的新行。下面是代码的缩小部分。

非常感谢任何帮助。

这是我的观点。

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

控制器。

    [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();
    });
});

Answer 2

您的javascript在文档就绪时运行。

请尝试：

<input type="button" class="add-button" name="add" value="Add" />

切换到：

<button type="button" class="add-button" onclick="doIt();" name="add">Add</button>

也是主要功能：

function doIt() {
        var count = 0;
            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();
    }

我希望它的作品。

使用Javascript动态地将行添加到html表

这是我的观点。

控制器。

2 个答案: