javascript - 如果表单提交有效，则 MVC 显示模态

Question

美好的一天!我想创建一个模式，仅当表单有效时用户单击提交按钮时才会弹出，就像 this .单击后表单验证工作完美，但当表单有效时，表单没有任何反应，模式也不会弹出。

我已经尝试了 here 中的解决方案比如

$('#myModal').modal("show");
$('#myModal').dialog('open');
$('#myModal').modal();
$('#myModal').show();
$('#myModal').modal('toggle');

但仍然没有弹出。

查看

<div class="col-lg-offset-4 col-lg-12">
 @using (Html.BeginForm("CedulaModule", "ApplicationForm", FormMethod.Post, new { id = "contactForm", name = "contactForm" }))
{
        @Html.AntiForgeryToken()

    <div class="form-horizontal">

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.ApplicationCode, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.ApplicationCode, new { htmlAttributes = new { @class = "form-control", @Value = @ViewBag.iAppFrmDet, @readonly = "readonly" } })
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Firstname, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.Firstname, new { htmlAttributes = new { @class = "form-control", placeholder = @Html.DisplayNameFor(m => m.Firstname) } })
            @Html.ValidationMessageFor(model => model.Firstname, "", new { @class = "text-danger" })
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.MiddleInitial, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.MiddleInitial, new { htmlAttributes = new { @class = "form-control", placeholder = @Html.DisplayNameFor(m => m.MiddleInitial) } })
            @Html.ValidationMessageFor(model => model.MiddleInitial, "", new { @class = "text-danger" })
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Surname, htmlAttributes: new { @class = "control-label" })
            @Html.EditorFor(model => model.Surname, new { htmlAttributes = new { @class = "form-control", placeholder = @Html.DisplayNameFor(m => m.Surname) } })
            @Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })
        </div>

        <div class="form-group">
            <input type="submit" value="Save" id="validate" class="btn btn-default"/>
        </div>
    </div>
}

模态

<div id="myModal" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            Confirm Submit
            <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
        </div>

        <div class="modal-body">
                    @Html.Partial("CedulaPartial")
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <input type="submit" value="Submit" class="btn btn-success" />
        </div>
    </div>
</div>

JQUERY

<script type="text/javascript">
$('#contactForm').submit(function (e) {
    e.preventDefault();

    if ($(this).valid()) {
        $('#myModal').modal("show");
    }
});

提前致谢。

Answer 1

如果您的表单有效，请将此信息保存在任何 TempData 中，并在表单加载时检查此变量(如果存在数据标志)，然后显示您的模态。

在控制后操作中添加 TempData。

TempData[“modalValid”]=true;

使用 JavaScript 加载表单。

$(document)ready(function (){
 If(@TempData[“modalValid””]==true)
      //display your modal
      //set null in TempData
});

此代码未经测试，仅供引用。