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

Question

好的，我已经环顾四周，虽然我找到了一些提供一些有用建议的地方，但没有一个是正确的，因为我可以说。我在ASP.NET MVC 5上创建了一个book数据库站点。对于编辑站点来编辑单个书籍，我的表单包含一个包含所有书籍作者姓名的文本框列表。我希望能够动态添加或删除它们，这样只需单击一个按钮，就会添加一个新的空框或删除当前框。我尝试使用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方法，就好像我点击了＆＃34;提交＆＃34;表格末尾的按钮。有没有什么办法可以使用MVC 5和jQuery制作这个动态文本框列表？有没有办法用AJAX做到这一点？

之前为函数添加preventDefault命令的注释适用于单个添加，但如果我尝试向列表中添加多个新作者，它仍会提交而不是仅调用该函数。对不起，如果我的代码存在很多问题，就像有人说的那样，我还是新手并且在学习。

Answer 1

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

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