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

好的，我环顾四周，虽然我发现了一些提供有用建议的地方，但没有一个像我所说的那样是完全正确的。我正在ASP.NETMVC5上制作一个图书数据库网站。对于编辑站点编辑单个书籍，我的表单包含一个文本框列表，其中包含所有书籍作者的姓名。我希望能够添加或删除这些动态，以便与一个按钮点击一个新的空框将被添加或当前框将被删除。我尝试使用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");
    }

函数addAuthor（）{
var div=$（''）；
var cnt=$（'Author'）；
附加分区（cnt）；
cnt=$（''）；
cnt.append（“”）；
附加分区（cnt）；
第4节附加（“”）；
第4节附加（“”）；
$（this）.parent（）在（div）之后；
}
函数removeAuthor（）{
if（$（'#AuthorSet>div'）。长度>1）
$（'#AuthorSet'）。删除（$（this.parent（））；
其他的
警告（“必须至少有一位作者”）；
}

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

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

@foreach（Bookshelf.Models.Author-auth-in-Model.Authors.OrderBy（a=>a.LastName）
.ThenBy（a=>a.FirstMidName））
{
@Label（“Author”，new{@class=“control Label col-md-2”}）
@文本框（“authorList”，auth.FullName）
+
-
}

编辑：几分钟前我无意中发布了错误的版本；我有一个没有onclick函数的版本，但是在jQuery中使用了一个类来设置它，我不小心在早些时候发布了这个版本。这一点已得到纠正。 然而，这根本不起作用。每当我单击按钮时，它都会将我发送到post方法，就像我单击表单末尾的“提交”按钮一样。有没有什么方法可以只用MVC5和jQuery来创建这个文本框的动态列表？有没有一种方法可以用AJAX实现呢

---

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

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

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

---

使您的按钮

type=“button”

（默认情况下，它们将是提交按钮）。但是为什么要添加多个

addAuthor

按钮？）检查此链接：目前的代码存在多个问题，但是如果从您的角度显示您试图使用这些函数修改的完整表单，则更容易指出所有问题，以及您试图将其绑定到的模型。感谢@StephenMuecke-看看这个：-我遇到了一个非常类似的问题，动态添加/删除元素，然后使用它们发布到我的MVC控制器。幸运的是，斯蒂芬挽救了这一天！：）