Bootbox回调表单提交无法正常工作

我正在动态创建一些表单，我在MVC5应用程序中使用bootbox 4以及bootstrap 3和jquery 3.1.0。

编辑：我将项目的jquery从1.10.2更新到3.1.0，下面仍有相同的问题。

用法：单击remove，bootbox确认通过模式删除，如果确认，则调用表单上的.submit（）操作。

应用截图

问题：我点击删除按钮，它会弹出一个模式来确认动作，然后我点击“继续”但它什么也没做。 在所有表单元素中似乎只有一个工作提交动作。 所以我能够成功调用每页刷新一个元素的提交。

我是javascript的新手，所以我现在有一个基本的理解，我正在尝试找出我的代码，我的代码如下。 任何帮助，将不胜感激。

我的观看代码 ：

@foreach (var user in Model.Users) {   @user.Id   @user.FirstName @user.LastName   @Html.CheckBox("role", user.IsAdmin)   @using (Html.BeginForm("UpdateUserRole", "Admin", FormMethod.Post, new {@class = "btn-inline"})) { @Html.Hidden("id", user.Id) @Html.Hidden("role", user.GetRole(user.IsAdmin)) Update } @using (Html.BeginForm("RemoveUser", "Admin", FormMethod.Post, new {@class = "btn-inline", @id=user.Id+"Form"})) { @Html.Hidden("id", user.Id) Remove }   } 

我的脚本（添加到View的底部） ：

 @section scripts {  $(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(); } } } }); }); });  } 

编辑 ：这是一些HTML输出：

 
 
 
 
 Joe 
 
 Joe Cuevas 
 
  
 
 
  Update 
 
  Remove 
 
 
 
  

编辑：解决方案

事实certificate，在最终的HTML输出中，modelstate覆盖了来自我的View的foreach循环生成的所有表单的id值。 这解释了为什么上述所有症状都在发生。 在返回我的viewModel之前，我只是将以下代码添加到我的控制器中并修复了它： ModelState.Remove（“id”）;

Answer 1

table / tr / td / form是一个很好的，就嵌套而言。 您可以简化触发表单提交：

 $('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.confirmfunction。 如果您想要自定义按钮文本，请按照此处的第二个示例进行操作。

 $('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(); } } }); }); 

您可能需要考虑以下事实：用户可以在不单击“继续”按钮的情况下触发表单提交，在这种情况下，删除请求将在未经确认的情况下发生。

此外， 尚未确认Bootbox与jQuery 3.x一起使用 ，虽然这更多地取决于父Bootstrap库版本 - 如果已升级到jQuery 3.x，则必须升级到Bootstrap 3.3.7。