将消息返回到用于登录的bootstrap模式

我正在使用bootstrap模式中的登录构建一个网站。 如果用户输入了错误的用户名或密码，我希望它在模态上显示一条消息。 我已经能够通过ajax将消息作为json传递，但IE尝试将json作为文件下载，Chrome在浏览器窗口中打开它。 我如何让它停止这样做？

登录表单处于部分视图中，在模式中呈现：

 
 × 
Log In to your Account
 
 
 
 @using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "loginForm" })) { @Html.AntiForgeryToken() 
 @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
 @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" }) 
 
 @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" }) 
 
 Log In 
 
 
  Remember me Forgot Password? 
 }  

按下按钮触发我的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

它正在打开一个新的浏览器窗口，因为您正在进行正常的表单提交！

为什么提交正常表单？ 因为即使你有一些代码来点击提交按钮上的点击事件来做一个ajaxpost，你也不会停止正常的表单提交行为，因此它也会提交正常的表单。

您可以使用jquery preventDefault()方法来阻止正常表单提交。

从ajax调用中调用的action方法返回Redirect响应也没有意义。 您应该返回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调用的success / done处理程序中，检查响应并根据需要执行下一步（将消息/重定向用户显示到/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事件上连接而不是按钮上的click事件。当用户在输入输入表单元素值后单击“输入”按钮时，它将提交表单。

 $("#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); }); });