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

Question

在我的 Razor 页面中使用 Bootstrap，我正在打开一个模式 window:

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

我遇到的问题是，例如，我输入了错误的 username/password 组合，表单有效，但模式 window 关闭。如果验证触发错误，是否可以在表单发布后重新打开模式 window？

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 中的错误消息（如果 login/password 组合错误，Batuta 正在询问）。

控制器：

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

以模式显示消息 window：

@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 登录模式验证

ASP.Net Razor MVC Bootstrap Login Modal Validation

asp.net

asp.net-mvc

twitter-bootstrap

razor

bootstrap-modal