在 mvc 5 中提交模态对话框确认答案

【问题标题】：hold submit for modal dialog confirmation in mvc 5在 mvc 5 中提交模态对话框确认
【发布时间】：2014-06-26 00:32:56
【问题描述】：

我试图在我的创建视图上提交数据时显示一个模式对话框。我需要模态来强制提交等待用户在模态对话框上确认。然后需要提交数据。下面是我使用 bootstrap 3.0 modal-dialog 创建视图的代码：

<div class="form-group">
                @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Name)
                    @Html.ValidationMessageFor(model => model.Name)
                </div>
            </div>
<div class="col-md-offset-2 col-md-10">
                <input id="create" type="submit" value="Create" class="btn btn-default"/>
            </div>

</div>

<div id="modalBox" class="modal">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">X</a>
            <h1>Confirmation</h1>
        </div>
        <div class="modal-body">
            <h6>Click YES to confirm</h6>
        </div>
        <div class="modal-footer">
            <button id="noPost" class="btn btn-default" name="postConfirm" value="false" data-dismiss="modal">No Thanks</button>
            <button id="yesPost" class="btn btn-primary" name="postConfirm" value="true" data-dismiss="modal">YES</button>
        </div>
    </div>
</div>

@section scripts{
<scripts>
$(function () {
    var modalBox = function (e) {
        e.preventDefault();
        $("#modalBox").modal({ show: true });
    };
    $("#create").click(modalBox);
});
<scripts>
}

这确实会中断提交功能并调出模式对话框，但我不知道一旦在对话框上做出选择后如何将数据提交回控制器。我还尝试使用带有以下脚本的 jquery ui 模式对话框：

<script>
$("#create").click(function (e) {
    e.preventDefault();
    $("#postModal").dialog("open");
});

$("#postModal").dialog({
    autoOpen: false,
    width: 400,
    resizable: false,
    modal: true,
    buttons: {
        "No Thanks": function (data) {
            $("#create").submit();
            $(this).dialog("close");
        },
        "YES": function () {
            $("#create").submit();
            $(this).dialog("close");
        }
    }
});
</script>

这确实会打开模态对话框，但我仍然无法将模型数据提交回控制器。任何帮助将不胜感激。

更新

通过检查生成的 html，我发现我的输入字段位于我没有放在那里的表单中。我怀疑这是因为我使用了 @Html.ValidationSummary(true) 或 MVC 内置的东西。所以不要使用：

$("#create").submit();

我用过：

$("form:first").submit();

在页面上提交第一个也是唯一一个表单，它成功了！

【问题讨论】：

标签： asp.net-mvc jquery-ui modal-dialog submit

【解决方案1】：

将您的创建按钮类型更改为 type=button，并使其仅打开模式视图。并在模态 div 持有者中制作您的 yespost 按钮以输入 submit 。您也可以尝试将整个模态 div 持有人放在您的表单组 div 中。在这里，您在打开模态视图之前进行发布。这是因为您的按钮有 2 个逻辑任务，将这些任务分开，这应该可以工作。

【讨论】：