Question

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

<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();

要在页面上提交第一个也是唯一的表单，它才有效！

Answer 1

将您的创建按钮类型更改为type = button，并使其仅打开模态视图。并在模态div持有者中设置yespost按钮以输入提交。此外，您可以尝试将整个模态div持有者放在form-group div中。在这里你打开模态视图之前发布。这是因为你的按钮有2个逻辑任务，将这些任务分开，这应该有效。

在mvc 5中保持提交模态对话框确认

1 个答案: