动态添加控件到窗体中的ASP.NET MVC5

好了，我环顾四周，虽然我已经发现了几个景点，提供一些有益的建议，没有一个是我所知道的完全正确。我在ASP.NET MVC 5上创建了一个书籍数据库站点。为了编辑站点来编辑个人书籍，我的表单包含一个包含所有书籍作者姓名的文本框列表。我希望能够动态地添加或删除它们，只需单击一个按钮，即可添加一个新的空框或将当前框删除。我试着使用jQuery，写一对函数如下：动态添加控件到窗体中的ASP.NET MVC5

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，而且我之前意外地发布了该版本。这已得到纠正。但是，这根本不起作用。任何时候我点击按钮，它会将我发送到发布方法，就好像我点击了表单末尾的“提交”按钮。有没有什么办法可以使用MVC 5和jQuery来制作这个动态的文本框列表？有没有办法用AJAX做到这一点？

以前的意见添加一个preventDefault命令的功能适用于单个添加，但如果我尝试添加多个新的作者到列表中，它仍然提交而不是只调用该函数。如果有人说我的代码存在很多问题，我很抱歉，我还是新手，并且正在学习。

来源

2016-08-02 MVCNovice

使您的按钮'type =“button”'（默认情况下它们将提交按钮）。但是，为什么要补充多'addAuthor'按钮） –

检查此链接：https://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery – Vijai

有你的代码的多个问题但如果您从视图中显示完整的表单，并试图用这些函数进行修改，以及您试图将其绑定到的模型，则将它们全部指出将更容易。 – Jakotheshadows

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

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

来源

2016-08-02 22:28:29 StriplingWarrior

动态添加控件到窗体中的ASP.NET MVC5

回答

相关问题