ASP.NET MVC5のフォームにコントロールを動的に追加する

Question

OK、私は周りを見回しましたが、いくつかの有用な提案を提供するいくつかのスポットを見つけていますが、私が知る限り正しいものはありません。私は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 fuctionのないバージョンを持っていましたが、代わりにクラスをjQueryで設定するために使用しました。私は誤ってそのバージョンを以前に投稿しました。これは修正されました。 しかし、これはまったく機能しません。私がボタンをクリックするたびに、フォームの最後に "submit"ボタンをクリックしたかのように私をpostメソッドに送ります。 MVC 5とjQueryだけを使ってこのダイナミックテキストボックスのリストを作る方法はありますか？ AJAXでやる方法はありますか？

関数にpreventDefaultコマンドを追加する前のコメントは、1回の追加で機能しますが、複数の新しい著者をリストに追加しようとすると、関数を呼び出す代わりにサブミットされます。誰かが言ったように私のコードに多くの問題がある場合、私はまだ新しいと学習して、ごめんなさい。

Answer 1

デフォルトでは、ボタンによりフォームが送信されます。

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