[英]Dynamically adding controls to a form in ASP.NET MVC5
OK, I've looked around and while I've found a few spots that offer some useful suggestions, none are quite right as I can tell. 好的,我环顾四周,虽然我发现了一些可以提供有用建议的地方,但据我所知,没有一个是正确的。 I'm making a book database site on ASP.NET MVC 5. For the edit site to edit individual books, my form contains a list of textboxes containing the names of all the book's authors.
我正在ASP.NET MVC 5上建立一个图书数据库站点。对于要编辑单个图书的编辑站点,我的表单包含一个包含所有图书作者姓名的文本框列表。 I want to be able to add or remove these dynamically, so that with a click of a button a new empty box will be added or the current box will be removed.
我希望能够动态添加或删除这些,以便单击按钮即可添加新的空框或删除当前框。 I tried using jQuery, writing a pair of functions as follows:
我尝试使用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");
}
The part of the view being modified looks like this: 被修改的视图部分如下所示:
<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>
EDIT: I accidentally posted the wrong version a few minutes ago; 编辑:几分钟前,我不小心发布了错误的版本; I had a version without an onclick fuction but instead used a class to set it in jQuery, and I accidentally posted that version earlier.
我有一个没有onclick功能的版本,而是使用一个类在jQuery中进行设置,而我不小心将其发布了。 This has been corrected.
这已得到纠正。 However, this is not working at all.
但是,这根本不起作用。 Any time I click on the buttons it sends me to the post method as if I'd clicked the "submit" button at the end of the form.
每当我单击按钮时,它都会将我发送到post方法,就像单击表单末尾的“提交”按钮一样。 Is there any way I can make this dynamic list of textboxes using just MVC 5 and jQuery?
有什么方法可以仅使用MVC 5和jQuery制作此动态文本列表吗? Is there a way to do it with AJAX?
有没有办法用AJAX做到这一点?
The previous comment to add a preventDefault command to the functions works for a single addition, but if I try to add more than one new author to the list it still submits instead of just calling the function. 前面的向函数添加preventDefault命令的注释仅适用于一次添加,但是如果我尝试向列表中添加多个新作者,则它仍会提交而不是仅调用函数。 I'm sorry if there are a lot of problems with my code as someone said, I'm still new and learning.
抱歉,有人说我的代码有很多问题,我还是新手,正在学习。
By default, buttons will cause a form submit. 默认情况下,按钮将导致表单提交。 You need to prevent the default behavior in your click handler like so:
您需要防止点击处理程序中的默认行为,如下所示:
function addAuthor(e) {
e.preventDefault();
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.