ログインに使用されるブートストラップモーダルにメッセージを返します

Question

私はブートストラップモーダルでログインしてウェブサイトを構築しています。ユーザーが間違ったユーザー名やパスワードを入力した場合は、モーダルにメッセージを表示する必要があります。私はjsonとしてajax経由でメッセージを渡すことができましたが、IEはjsonをファイルとしてダウンロードしようとします。そしてChromeはブラウザウィンドウでそれを開きます。これをやめるにはどうしたらいいですか？

ログインフォームはモーダルでレンダリング部分図である。

<!-- LOGIN MODAL --> 
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
    <h4 class="modal-title">Log In to your Account</h4> 
</div> 

<div class="modal-body"> 

    <p id="failedloginmessage" class="alert-danger"></p> 

    @using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "loginForm" })) 
    { 
     @Html.AntiForgeryToken() 

     <div class="loginForm"> 

      @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

      <div class="form-group"> 
       @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label" }) 

       @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control", id = "txtUserName" } }) 
       @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" }) 
      </div> 

      <div class="form-group"> 
       @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label" }) 

       @Html.PasswordFor(model => model.Password, htmlAttributes: new { @class = "form-control", placeholder = "Password", id = "txtPassword" }) 
       @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" }) 
      </div> 


      <div class="form-group"> 
       <button id="btnlogin" type="submit" class="btn btn-primary btn-block">Log In</button> 
      </div> 
     </div> 

     <div class="checkbox"> 
      <label><input type="checkbox"> Remember me</label> 
      <a href="#" class="pull-right link">Forgot Password?</a> 
     </div> 
    } 

</div> 

ボタンのクリックによってトリガ

私のjqueryの：

$("#btnlogin").click(function() { 

    $.ajax({ 
     url: "/Login/Login", 
     type: "POST", 
     datatype: 'application/json', 
     contentType: 'text/html', 
     data: $("#loginForm").serialize(), 
     success: function (result) { 
      if (result.success === "false") 
       $("#failedloginmessage").html(result.response); 
      } 
     })  
}); 

マイログインコントローラ：

[HttpPost] 
public ActionResult Login(CModel model) 
{ 
    try 
    { 
     Person user = new Person(model.UserName, model.Password); 

     if (user.Login()) 
     { 
      Session["user"] = user; 

      return RedirectToAction("Index", "User"); 
     } 
     else 
     { 
      var result = new { success = "false", response = "User name or password is incorrect." }; 

      return Json(result, JsonRequestBehavior.AllowGet); 
     }    
    } 
    catch (Exception ex) 
    { 
     throw ex; 
    } 
} 

Answer 1

通常のフォーム送信を行っているため、新しいブラウザウィンドウが開きます！

通常のフォーム送信はなぜですか？ ajax投稿を行うためにsubmitボタンのclickイベントを呼び出すコードがありますが、通常のフォーム送信動作を停止しているわけではないので、通常のフォーム送信も行っています。

jquery preventDefault()メソッドを使用すると、通常のフォーム送信を防ぐことができます。

また、ajax呼び出しから呼び出されているアクションメソッドからのリダイレクト応答を返すこともありません。 JSON応答を戻す必要があります。

あなたはまた、検討するかもしれない

[System.Web.Mvc.HttpPost] 
[ValidateAntiForgeryToken()] 
public ActionResult Login(CModel model) 
{ 
    try 
    { 
     if (yourIfConditionToCheckCredentialsGoesHereNow) 
     { 
      return Json(new { success = true ,url = Url.Action("Index","User") }); 
     } 
     else 
     { 
      return Json(new { success = false, response = "Password is incorrect." }); 
     } 
    } 
    catch (Exception ex) 
    { 
     return Json(new { success = false, response = "Error processing!" }); 
    } 
} 

と成功に/ $.ajaxコールのハンドラを行って、応答を確認し、必要に応じて次のステップを実行します（提示メッセージ/ /users/indexページにユーザーをリダイレクト）

$(function() { 

    $("#btnlogin").click(function (e) { 
     e.preventDefault(); 

     $.ajax({ 
      url: $("#loginForm").attr("action"), 
      type: "POST", 
      data: $("#loginForm").serialize(), 
     }).done(function(result) { 
      if (!result.success) { 
       $("#failedloginmessage").html(result.response);  
      } else { 
       alert('successful login'); 
       window.location.href = result.url; 
      } 
     }).fail(function(x, a, e) { 
      alert(e); 
     }); 
    }); 

}); 

ボタンのクリックイベントではなくフォームのsubmitイベントで配線します。ユーザーが入力フォームの要素値を入力した後に[Enter]ボタンをクリックすると、フォームが送信されます。

$("#loginForm").submit(function (e) { 
    e.preventDefault(); 

    $.ajax({ 
     url: $(this).attr("action"), 
     type: "POST", 
     data: $(this).serialize() 
    }).done(function(result) { 
     //existing code to check result 
    }).fail(function(x, a, e) { 
     alert(e); 
    }); 
});