在 ASP.NET MVC5 中向窗体动态添加控件

Question

好的，我环顾四周，虽然我找到了一些提供一些有用建议的地方，但据我所知，没有一个是完全正确的。我正在 ASP.NET MVC 5 上创建一个图书数据库站点。对于编辑站点来编辑单个图书，我的表单包含一个包含所有图书作者姓名的文本框列表。我希望能够动态添加或删除这些，以便通过单击按钮添加一个新的空框或删除当前框。我尝试使用jQuery，写了一对函数如下：

    function addAuthor() {
        var div = $('<div class="form-group author-input"></div>');
        var cnt = $('<label for="Author" class="control-label col-md-2">Author</label>');
        div.append(cnt);
        cnt = $('<div class="col-md-10"></div>');
        cnt.append('<input type="text" name="authorList" />');
        div.append(cnt);
        div.append('<button class="glyphicon-plus-sign" onclick="addAuthor"></button>');
        div.append('<button class="glyphicon-minus-sign" onclick="removeAuthor"></button>');
        $(this).parent().after(div);
    }

    function removeAuthor() {
        if ($('#AuthorSet > div').length > 1)
            $('#AuthorSet').remove($(this).parent());
        else
            alert("Must have at least one author");
    }

被修改的视图部分如下所示：

    <div id="AuthorSet">
        @foreach (Bookshelf.Models.Author auth in Model.Authors.OrderBy(a=>a.LastName)
                                                               .ThenBy(a=>a.FirstMidName))
        {
            <div class="form-group author-input">
                @Html.Label("Author", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextBox("authorList", auth.FullName)
                </div>
                <button class="btn btn-default glyphicon-plus-sign text-center" onclick="addAuthor">+</button>
                <button class="btn btn-default glyphicon-minus-sign text-center" onclick="removeAuthor">-</button>
            </div>
        }
    </div>

编辑：几分钟前我不小心发布了错误的版本；我有一个没有 onclick 功能的版本，而是使用一个类在 jQuery 中设置它，我不小心在之前发布了那个版本。这已得到纠正。 但是，这根本不起作用。每当我单击按钮时，它都会将我发送到 post 方法，就好像我单击了表单末尾的“提交”按钮一样。有什么方法可以只使用 MVC 5 和 jQuery 来制作这个动态的文本框列表吗？有没有办法用 AJAX 做到这一点？

之前向函数添加 preventDefault 命令的注释适用于单个添加，但如果我尝试将多个新作者添加到列表中，它仍然会提交而不是仅调用函数。如果有人说我的代码有很多问题，我很抱歉，我还是新手，正在学习。

Answer 1

默认情况下，按钮会导致表单提交。您需要阻止点击处理程序中的默认行为，如下所示：

function addAuthor(e) {
    e.preventDefault();
    ...
}