Html.ValidationSummary Twitter Bootstrap Modal无法正常工作

时间:2014-10-18 14:02:49

标签: javascript asp.net-mvc twitter-bootstrap razor twitter-bootstrap-3

这部分代码不起作用。

        @if (ViewData.ModelState.Any(x => x.Value.Errors.Any()))
    {
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Validation Errors</h4>
                </div>
                <div class="modal-body">
                    @Html.ValidationSummary()
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    }

但这样做/你不能解除警报,但它会弹出!

@if (ViewData.ModelState.Any(x => x.Value.Errors.Any()))
{
<div class="alert alert-danger">
    <a href="#" class="close" data-dismiss="alert">×</a>
    <h4>Validation Errors</h4>
    @Html.ValidationSummary()
</div>
}

我每次都使用完全相同的验证Razor代码。 &安培;我不确定我是否应该看到Chrome开发人员工具包中发生的事情。

编辑: 这是完整的页面。

@using Project.Models
@model LoginViewModel
@{
ViewBag.Title = "Log in";
Layout = "";
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")

 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
 <![endif]-->

</head>
 <body class="login-page">
             @if (ViewData.ModelState.Any(x => x.Value.Errors.Any()))
             {
                <div class="modal fade" id="ValidationSummaryModal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span     aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title">Validation Errors</h4>
                            </div>
                            <div class="modal-body">
                                @Html.ValidationSummary()
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-    dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save     changes</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->
    }
    <div class="login-box">
        @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl },     FormMethod.Post, new { role = "form" }))
        {
            @Html.AntiForgeryToken()
            <div class="login-box-title red">
                @ViewBag.Title
            </div>
            <div class="login-box-content">
                @Html.TextBoxFor(m => m.Email, new { @placeholder = "Email" })
                @Html.TextBoxFor(m => m.Password, new { @placeholder = "Password",    @type="password" })
                <input id="submit" name="submit" type="submit" value="Sign in!">
                <div class="half">
                    @Html.ActionLink("Forgot your password?", "ForgotPassword")
                </div>
                <div class="half last">
                    @Html.ActionLink("Sign Up!", "Register")
                </div>
            </div>
        }
    </div>
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
    <script type="text/javascript">
        $(window).load(function () {
            $('#ValidationSummaryModal').modal('show');
        });
    </script>
 </body>
</html>

1 个答案:

答案 0 :(得分:0)

如果在同一视图和页面加载中有其他模态,请输入一个id(例如#ValidationSummaryModal) 在脚本下面的部分添加此

<script type="text/javascript">
    $(window).load(function(){
        $('#ValidationSummaryModal').modal('show');
    });
</script>