ブートストラップモーダルポップアップでログイン検証エラーが表示されない

Question

モーダルダイアログに貼られたラベルにエラーが表示されないように、ログインポップアップのブートストラップモーダルダイアログを使用しています。すべてうまくいく、コントローラが呼び出され、ユーザーの資格情報が検証されます。この問題は、コントローラからjsonレスポンスメッセージを返す際に起こります。モーダルダイアログでエラーを表示する代わりに、空白ページにリダイレクトされ、上にjsonエラーが表示されます。アドバイスや提案をお願いします。 私は重複した質問を送ってはいけません。私は既に多くの研究を行っています。与えられたコードをチェックし、何が間違っているかを見てください。

部分図：_signIn.cshtml

<div class="modal fade" id="signInModal" tabindex="-1" role="dialog" aria-labelledby="signInModalLabel" aria-hidden="true" 
data-keyboard="false"> 
<div class="modal-dialog modal-sm"> 
      <div class="modal-content"> 
     <div class="modal-body"> 
      <!-- Row --> 
      <div class="row"> 
       <h4> 
        <p class="text-xs-center"> 
         Sign in to Photolab 
        </p> 
       </h4> 
      </div> 

      <p class="text-xs-center"> 
       <span class="pi-or">or use your email address</span> 
      </p> 

      @using (Html.BeginForm("ValidateUser", "Account", 
FormMethod.Post, new { Id = "signInForm" })) 
      { 

       @Html.AntiForgeryToken() 
       @Html.ValidationSummary(true) 

       <div class="row"> 
        <div class="col-md-12 col-sm-10 col-xs-12"> 

         <div class="modalbox"> 

          <p> 
           <label id="lblMessage" class="small"></label> 
          </p> 

          <!-- Email form --> 
          <div class="form-group"> 
           @Html.TextBoxFor(model => model.UserName, new { @class = "form-control form-control-round", @required = "required", @placeholder = "Email address", id = "signInEmail" }) 
           @Html.ValidationMessageFor(model => model.UserName) 
          </div> 
          <!-- End email form --> 
          <!-- Password form --> 
          <div class="form-group"> 
           @Html.TextBoxFor(model => model.Password, new { @class = "form-control form-control-round", @type = "Password", @placeholder = "Password", @required = "required" }) 
          </div> 
          <!-- End password form --> 

          <p class="pull-right small"> 
           <a href="#" id="forgotModal"> 
            Forgot password? 
           </a> 
          </p> 

          <div class="checkbox pull-left"> 
           <label class="small"> 
            @Html.CheckBoxFor(model => model.RememberMe)Remember Me 
           </label> 
          </div> 
          <!-- Submit button --> 
          <div class="form-group-btn"> 
           <button type="submit" id="btnSignIn" class="btn btn-primary btn-block"> 
            Sign In 
           </button> 
          </div> 
          <!-- End submit button --> 

         </div> 
         <!-- End box --> 
        </div> 

       </div> 

      } 
      <!-- End row --> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <p class="text-xs-center"> 
      Don't have Account? <a href="#" id="btnSignUp" class="flipLink">Sign Up</a> 
     </p> 
    </div> 
</div> 

はJQuery：

<script> 
$(function() { 

    $('#btnSignIn').click(function() { 

     var url = '@Url.Action("ValidateUser", "Account")'; 
     event.preventDefault(); 
     $.ajax({ 
      type: 'POST', 
      cache:false, 
      url: url, 
      datatype:'json', 
      data: $(this).serialize(), 
      success: function (result) { 
       if (result.success != true) { 
        lert(result.response); 
        $("#lblMessage").text(""); 
        $("#lblMessage").append(result.response); 
       } 
       else 
       { 
        alert(result.response); 
        window.location.href = result.response; 
       } 
      } 
     }); 
    }); 
} 

MVC AccountController.cs

[AllowAnonymous] 
    [ValidateAntiForgeryToken] 
    public ActionResult ValidateUser(LoginModel model, string returnUrl) 
    { 
     var result = new { success = "false", response = "Error Message" }; 

     try 
     { 
      var loginResult = _customerRegistrationService.ValidateCustomer(model.UserName, model.Password); 

      switch (loginResult) 
      { 
       case LoginResult.Successful: 
        { 
         //_authenticationService.SignIn(model.UserName, model.Password, true); 

         ImplementFormsAuthentication(model.UserName); 

         result = new { success = "true", response = Url.Action("Listings", "Listing") }; 

         return RedirectToAction("Listings", "Listing"); 

         //break; 

        } 
       case LoginResult.NotRegistred: 

        result = new { success = "false", response = "The user name or password provided is incorrect" }; 
        break; 
       case LoginResult.WrongPassword: 
        result = new { success = "false", response = "Incorrect Password" }; 
        break; 

       default: 
        result = new { success = "false", response = "Invalid username/password" }; 
        break; 
      } 
     } 
     catch (Exception ex) 
     { 
      throw ex; 
     } 

     return Json(result, JsonRequestBehavior.AllowGet); 
    } 

あなたはボタンタイプを提出し使用している_Layout.cshtml

<li class="nav-item"> 
     <a href='#' id="btnLogin" class="nav-link active" data-toggle="modal" data-target="#signInModal">             Login 
              </a> 
             </li> 

Answer 1

。空白のページにリダイレクトしています。 ボタンタイプボタンを使用して、フォームを空白ページにポストしません。

<button type="button" id="btnSignIn" class="btn btn-primary btn-block"> 
     Sign In 
</button>