Bootbox回调表单提交无法正常工作 [英] Bootbox callback form submit not working properly
问题描述
我正在动态创建一些表单，我在MVC5应用程序中使用bootbox 4以及bootstrap 3和jquery 3.1.0。
I'm dynamically creating some forms and I'm using bootbox 4 alongside bootstrap 3 and jquery 3.1.0 in an MVC5 application.
编辑：我将项目的jquery从1.10.2更新为3.1.0，下面仍有相同的问题。
I updated my project's jquery from 1.10.2 to 3.1.0, still have the same issue below.
用法：点击删除，bootbox通过模态确认删除，如果确认，请在表单上调用.submit（）操作。
Usage: click remove, bootbox confirm removal via modal, and if confirmed, call the .submit() action on the form.
问题：我点击了删除按钮，它弹出一个模态来确认动作，然后我点击继续，但它什么也没做。在所有表单元素中似乎只有一个工作提交操作。所以我能够成功调用每页刷新一个元素的提交。
The issue: I click on the delete button and it pops up a modal to confirm the action, and i click "continue" but it does nothing. There seems to be only one working submit action among all the form elements. So I'm able to successfully call submit on one element per page refresh.
我是javascript的新手，所以我现在基本了解并且我'我试着找出我的代码，我的代码如下。任何帮助将不胜感激。
I'm new to javascript, so I have a basic understanding at the moment and I'm trying figure out what I'm doing wrong with my code below. Any help would be appreciated.
我的查看代码：
@foreach (var user in Model.Users)
{
<tr>
<td>
@user.Id
</td>
<td class="text-center">
@user.FirstName @user.LastName
</td>
<td class="text-center">
@Html.CheckBox("role", user.IsAdmin)
</td>
<td>
@using (Html.BeginForm("UpdateUserRole", "Admin", FormMethod.Post, new {@class = "btn-inline"}))
{
@Html.Hidden("id", user.Id)
@Html.Hidden("role", user.GetRole(user.IsAdmin))
<button type="submit" class="btn btn-info">Update</button>
}
@using (Html.BeginForm("RemoveUser", "Admin", FormMethod.Post, new {@class = "btn-inline", @id=user.Id+"Form"}))
{
@Html.Hidden("id", user.Id)
<button data-user-id=@user.Id type="submit" class="btn btn-danger buttonElement">Remove</button>
}
</td>
</tr>
}
我的脚本（添加到View底部） ：
@section scripts
{
<script type="text/javascript">
$(function () {
$('form').on('click','button.buttonElement',function (e) {
var user = $(this).attr("data-user-id");
e.preventDefault();
bootbox.dialog({
message: "Do you want to continue ?", title: "Remove User",
buttons: {
main: { label: "Cancel", className: "btn btn-default", callback: function () { return true; } },
success: { label: "Continue", className: "btn btn-default", callback: function () { $('#'+user+'Form').submit(); } }
}
});
});
});
</script>
}
编辑：这是一些HTML输出：
Edit: Here's some HTML output:
<table class="table table-hover">
<tbody>
<tr>
<td>
Joe
</td>
<td class="text-center">
Joe Cuevas
</td>
<td class="text-center">
<input checked="checked" id="role" name="role" type="checkbox" value="true"><input name="role" type="hidden" value="false">
</td>
<td>
<form action="/Admin/UpdateUserRole" class="btn-inline" method="post">
<input data-val="true" data-val-regex="Invalid!" data-val-regex-pattern="([A-Za-z0-9.-])+" data-val-required="NetworkID is required!" id="id" name="id" type="hidden" value="joe"><input id="role" name="role" type="hidden" value="Admin"> <button type="submit" class="btn btn-info">Update</button>
</form> <form action="/Admin/RemoveUser" class="btn-inline" id="joeForm" method="post">
<input data-val="true" data-val-regex="Invalid!" data-val-regex-pattern="([A-Za-z0-9.-])+" data-val-required="NetwordID is required!" id="id" name="id" type="hidden" value="joe"> <button data-user-id="joe" type="submit" class="btn btn-danger buttonElement">Remove</button>
</form>
</td>
</tr>
</tbody>
</table>
编辑：解决方案
事实证明，在最终的HTML输出中，modelstate覆盖了来自我的View的foreach循环生成的所有表单的id值。这解释了为什么上述所有症状都在发生。在返回我的viewModel之前，我只是将以下代码添加到我的控制器中并修复了它：
ModelState.Remove（id）;
It turns out that modelstate was overriding the id value of all forms generated by the foreach loop from my View, on the final HTML output. This explains why all the symptoms above were occurring. I simply added the following code to my controller before returning my viewModel and it was fixed: ModelState.Remove("id");
推荐答案
table / tr / td / form是一个很好的，就嵌套而言。您可以简化触发表单提交：
table / tr / td / form is a fine, as far as nesting goes. You can probably simplify triggering the form submit with:
$('form').on('click','button.buttonElement',function (e) {
var user = $(this).attr("data-user-id");
var form = $(this).closest('form'); // <-- add this
e.preventDefault();
bootbox.dialog({
message: "Do you want to continue ?",
title: "Remove User",
buttons: {
main: {
label: "Cancel",
className: "btn btn-default",
callback: function () {
return true;
}
},
success: {
label: "Continue",
className: "btn btn-default",
callback: function () {
form.submit(); // <-- change this
}
}
}
});
});
你也可以简单地使用 bootbox.confirm 功能。如果您需要自定义按钮文字，请按照第二个示例此处，如此。
You could also simply use the bootbox.confirm function. If you want custom button text, follow the second example here, like so.
$('form').on('click','button.buttonElement',function (e) {
var user = $(this).attr("data-user-id");
var form = $(this).closest('form'); // <-- add this
e.preventDefault();
bootbox.confirm({
message: "Do you want to continue ?",
title: "Remove User",
buttons: {
cancel: {
label: "Cancel",
className: "btn btn-default"
},
confirm: {
label: "Continue",
className: "btn btn-default"
}
},
callback: function(result) {
if(result == true) {
form.submit();
}
}
});
});
您可能需要考虑用户可以触发提交的事实没有单击继续按钮的表单，在这种情况下删除请求将在没有确认的情况下发生。
You might want to consider the fact that a user could trigger the submission of the form without clicking your continue button, in which case the delete request will occur without confirmation.
此外， Bootbox尚未确认可以与jQuery一起使用3.x但，虽然这更多地取决于父Bootstrap库版本 - 如果你升级到jQuery 3.x，你必须升级到Bootstrap 3.3.7。
Also, Bootbox hasn't been confirmed to work with jQuery 3.x yet, although that depends more on the parent Bootstrap library version - you have to upgrade to Bootstrap 3.3.7 if you've upgraded to jQuery 3.x.
这篇关于Bootbox回调表单提交无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
