Question

在我的Razor页面中使用Bootstrap，我打开一个模态窗口：

<div class="container-fluid">
    <div class="navbar navbar-fixed-top navbar-default">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand pull-right" href="#">
                <img src="assets/img/logo-header.png" alt="Alternate Text for Image">
            </a>
        </div>

        <div class="navbar-offcanvas offcanvas navmenu-fixed-left">
            <a class="navmenu-brand" href="#">eServices</a>
            <ul class="nav nav-justified">
                <li><a href="#" data-toggle="modal" data-target="#modalSignup" data-backdrop="static">New Here?</a></li>
                <li><a href="index.html">Services</a></li>
                <li><a href="#" data-toggle="modal" data-target="#modalLogin" data-backdrop="static">Sign In</a></li>
            </ul>
        </div>
   </div>
</div>

<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <p>
                    <h3 class="modal-title" id="myModalLabel">Login to MyApplication</h3>
                </p>
            </div>

                @using (Html.BeginForm("index", "home", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { role = "form", @class = "form-horizontal" }))
                {
                    @Html.AntiForgeryToken()
                    <div class="form-group @Html.ValidationErrorFor(m => m.Username, "has-error has-feedback")">
                        <div class="col-sm-12">
                            @Html.FormTextBoxFor(p => p.Username, new { @class = "form-control" })
                            @if (!Html.IsValid(m => m.Username))
                            {
                                <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                            }
                            @Html.ValidationMessageFor(m => m.Username, null, new { @class = "help-block" })
                        </div>
                    </div>
                    <div class="form-group @Html.ValidationErrorFor(m => m.Password, "has-error has-feedback")">
                        <div class="col-sm-12">
                            @Html.FormPasswordFor(p => p.Password, new { @class = "form-control" })
                            @if (!Html.IsValid(m => m.Password))
                            {
                                <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                            }
                            @Html.ValidationMessageFor(m => m.Password, null, new { @class = "help-block" })
                        </div>
                    </div>
                    @Html.ValidationSummary(true, string.Empty, new { @class = "test" }, "span")
                    <div class=" pull-right">
                        <p>
                            <button type="submit" class="btn btn-default">@Forms.ButtonSignin</button>
                        </p>
                        <br />
                        <p>
                            @Html.ActionLink("Forgot your username?", "ForgotUsername")
                        </p>
                        <p>
                            @Html.ActionLink("Forgot your password?", "ForgotPassword")
                        </p>
                    </div>
                }
        </div>
    </div>
</div>

我遇到的问题是，例如，我输入了错误的用户名/密码组合，表单验证，但模态窗口关闭。如果验证触发了错误，有没有办法在表单发布后重新打开模态窗口？

Answer 1

您可以添加名为IsModalShown的属性，即

public class AModel
{
    public bool IsModalShown { get; set; }
}

在您的视图中将其渲染为隐藏的内容，例如

@Html.HiddenFor(m => m.IsModalShown)

当模态打开时，将隐藏值设置为true，这将使模态状态回发到控制器动作，即。

$('#modalLogin').on('show.bs.modal', function (e) {
    $('#IsModalShown').val(true);
})

请注意以上内容取决于您使用的bootstrap版本，但官方网站上还有其他文档

然后将以下内容添加到您自动弹出的视图中

$(function(){
    @if(Model.IsModalShown)
    {
        $('#signin_modal').modal('show');
    }
});

Answer 2

我有类似的问题，但没有看到模型。发布我的解决方案，以防它可以帮助某人。我想显示存储在TempData中的错误消息（如果登录/密码组合错误，Batuta要求的话）。

控制器：

public ActionResult SignIn(string login, string password)
    {
        if (Membership.ValidateUser(login, password))
        {
            // something
        }
        else
        {
            TempData["message-error"] = "Wrong combination";
        }
        return RedirectToAction("Index", "Home");
    }

在模态窗口中显示消息：

@if (TempData["message-error"] != null)
{
@TempData["message-error"]
}

在索引中打开模态：

@if (TempData["message-error"] != null)
{
<script type="text/javascript">
    $('#myModal').modal('show');
</script>
}

也许不那么干净，但对我有用。

ASP.Net Razor MVC Bootstrap登录模式验证

2 个答案: