Question

我正在使用默认的Web应用程序mvc项目，并且我尝试从模式登录/注册：

所以我创建了一个包含登录和注册模型的新模型

public class LogInRegisterViewModel
    {
        public LoginViewModel login { get; set; }
        public RegisterViewModel register { get; set; }
    }

然后在我的布局页面中，我提供了该模型以及登录/注册的部分视图：

<div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">                    
                @if (User.Identity.IsAuthenticated)
                {
                    <li>@Html.ActionLink("MyUploads", "Index", "Tutorials")</li>
                    <li>@Html.ActionLink("Upload", "Create", "Tutorials")</li>
                }
            </ul>

            @Html.Partial("_LoginPartial",model) @*model = new LogInRegisterViewModel()*@
        </div>

模态的html代码在我的_LoginPartial视图中（也许这是我的错误？），以及登录和注册表单（从帐户控制器复制）：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content mc">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 login-modal">
                            <section id="loginForm">
                                @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
                                {
                                    @Html.AntiForgeryToken()
                                    <h4>Use a local account to log in.</h4>
                                    <hr />
                                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                                    <div class="form-group">
                                        <div>
                                            <h5 class="user-name login-labels"><i class="fa fa-user" aria-hidden="true"></i> User Name</h5>
                                        </div>
                                        <div class="col-md-8 login-input">
                                            @Html.TextBoxFor(m => m.login.UserName, new { @class = "form-control" })
                                            @Html.ValidationMessageFor(m => m.login.UserName, "", new { @class = "text-danger" })
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <h5 class="user-password login-labels"><i class="fa fa-lock" aria-hidden="true"></i> Password</h5>
                                        <div class="col-md-8 login-input">
                                            @Html.PasswordFor(m => m.login.Password, new { @class = "form-control" })
                                            @Html.ValidationMessageFor(m => m.login.Password, "", new { @class = "text-danger" })
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-10 login-btn">
                                            <input type="submit" value="Log in" class="btn btn-primary" />
                                        </div>
                                    </div>
                                    @* Enable this once you have account confirmation enabled for password reset functionality
                                        <p>
                                            @Html.ActionLink("Forgot your password?", "ForgotPassword")
                                        </p>*@
                                }
                            </section>
                        </div>
                        <div class="col-md-6">
                            @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
                            {
                                @Html.AntiForgeryToken()
                                <h4>Create a new account.</h4>
                                <hr />
                                @Html.ValidationSummary("", new { @class = "text-danger" })
                                <div class="form-group">
                                    @Html.LabelFor(m => m.register.FirstName, new { @class = "col-md-2 control-label" })
                                    <div class="col-md-10">
                                        @Html.TextBoxFor(m => m.register.FirstName, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="form-group">
                                    @Html.LabelFor(m => m.register.LastName, new { @class = "col-md-2 control-label" })
                                    <div class="col-md-10">
                                        @Html.TextBoxFor(m => m.register.LastName, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="form-group">
                                    @Html.LabelFor(m => m.register.ProfileAvatar, new { @class = "col-md-2 control-label" })
                                    <div class="col-md-10">
                                        @Html.TextBoxFor(m => m.register.ProfileAvatar, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="form-group">
                                    @Html.LabelFor(m => m.register.Email, new { @class = "col-md-2 control-label" })
                                    <div class="col-md-10">
                                        @Html.TextBoxFor(m => m.register.Email, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="form-group">
                                    @Html.LabelFor(m => m.register.Password, new { @class = "col-md-2 control-label" })
                                    <div class="col-md-10">
                                        @Html.PasswordFor(m => m.register.Password, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="form-group">
                                    @Html.LabelFor(m => m.register.ConfirmPassword, new { @class = "col-md-2 control-label" })
                                    <div class="col-md-10">
                                        @Html.PasswordFor(m => m.register.ConfirmPassword, new { @class = "form-control" })
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-offset-2 col-md-10">
                                        <input type="submit" class="btn btn-default" value="Register" />
                                    </div>
                                </div>
                            }
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>

现在，如果您点击登录按钮而不提供用户名和密码，该页面会将我重定向到帐户/登录，同样适用于注册。

那么如何解决这个问题，以便在模态上弹出验证错误，而不是重定向到Account控制器？

提前感谢您的帮助。

Answer 1

对于客户端验证，包括视图或布局中的jquery验证包。

@section scripts
{
    @Scripts.Render("~/bundles/jqueryval")
}

此外，您可以使用Ajax.BeginForm（）帮助程序而不是Html.BeginForm来实现您的注册和登录表单。

Answer 2

首先确保您已包含脚本以实际验证表单：

<script src=".../Scripts/jquery.validate.js"></script>
<script src=".../Scripts/jquery.validate.unobtrusive.js"></script>

如何在不重定向的情况下从bootstrap模式登录/注册？

2 个答案: