動態將控件添加到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();
    ...
}