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

Question

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

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

用法：点击移除，bootbox通过模态确认移除，如果确认，调用表单上的.submit()动作。

问题：我点击删除按钮，它弹出一个确认操作的模式，我点击 "continue" 但它什么也没做。在所有表单元素中似乎只有一个有效的提交操作。因此，我能够在每次页面刷新时成功调用一个元素的提交。

我是 javascript 的新手，所以我现在有一个基本的了解，我正在尝试弄清楚我下面的代码做错了什么。任何帮助将不胜感激。

我的查看代码:

@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>
    }

我的脚本（添加到视图底部）:

@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输出：

<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>

编辑：解决方案

事实证明，modelstate 在最终 HTML 输出中覆盖了我视图中 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.confirm 函数。如果您想要自定义按钮文本，请按照第二个示例 here，像这样。

$('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

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

Bootbox callback form submit not working properly

javascript

asp.net-mvc

jquery

bootbox