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

MODAL

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

此代码未经测试，仅供参考。

Answer 2

更新

遇到此post之后。我能够使代码也起作用。不幸的是，这是导致我出错的类。一旦删除它，我的代码也可以正常工作。感谢您的帮助。

Answer 3

e.preventDefault（）调用每次都阻止提交。即使表格有效。请尝试使用“已确认”标志，以确保仅在显示模式之前调用e.preventDefault（）。

var confirmed = false;
function SubmitConfirmfunction() {

    confirmed = false;
    $("#contactForm").submit();

}
$(document).ready(function () {
    $('#contactForm').submit(function (e) {
    
        if (confirmed == false) {
            if ($(this).valid()) {
                confirmed = true;
                e.preventDefault();
                $('#myModal').modal("show");
            }
        }
    });
});

如果表单提交有效，则MVC显示模式

3 个答案: