2016-10-04 11 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") 
} 

また、あなたはあなたの登録とログインフォームを実装する代わりにHtml.BeginFormのAjax.BeginForm()ヘルパーを使用することができます。

関連する問題