2016-10-04 51 views
0

我使用的是默认的Web应用程序的MVC项目,我试图登录/从模式寄存器:如何登录/从引导模式注册而不重定向?

enter image description here

所以我做了包含登录模型的新模式,并注册

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> 

现在如果你点击登录按钮,而不提供用户名和密码,页面会将我重定向到帐户/登录,与注册表相同。

那么我该如何解决这个问题,这样的验证错误弹出模态,而不是重定向到帐户控制器?

在此先感谢您的帮助。

回答

1

确保首先你已经包含了脚本来实际验证表单:

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

对于客户端验证,在您的视图或布局中包含jQuery验证包。

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

此外,您还可以使用Ajax.BeginForm()辅助而不是Html.BeginForm来实现您的注册和登录表单。

相关问题