ASP。Net Razor MVC引导登录模式验证

Using Bootstrap in my Razor page, I am opening a modal window:

在我的剃刀页面上使用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>

The issue I have is that, for example, I entered an incorrect username/password combination, the form validates, but the modal window closes. Is there a way to re-open the modal window after the form has posted if the validation triggered an error?

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

2 个解决方案

#1

You could add a property named IsModalShown i.e.

您可以添加一个名为ismodaldisplay的属性，例如。

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

Render this as a hidden for in your view i.e.

将其呈现为隐藏在视图中。

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

When the modal is opened set the hidden value to true, this will enable the modal state to be posted back to the controller action i.e.

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

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

Please note the above will depend on the version of bootstrap you are using but there are other docs on the official site

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

Then add the following to your view that automatically pops it up

然后在你的视图中添加以下自动弹出窗口。

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

#2

I had a similar problem, but didn't have a model in view. Posting my solution, in case it would help someone. I wanted to show an error message stored in TempData (in case of wrong login/password combination, on which Batuta was asking).

我也遇到过类似的问题，但没有考虑到模型。张贴我的解决方案，以防它会帮助某人。我想显示一个存储在TempData中的错误消息(以防出现错误的登录/密码组合，Batuta正在询问)。

Controller:

控制器:

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

Showing the message in modal window:

在模态窗口显示消息:

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

Opening modal in index:

在指数:开模态

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

Maybe not that clean, but works for me.

也许不是很干净，但对我来说很有效。

#1