Retornar mensagem ao modal de bootstrap usado para login

Estou construindo um site com o login em um modal de bootstrap. Se um usuário digitar um nome de usuário ou senha errada, eu quero que ele exiba uma mensagem no modal. Eu pude passar a mensagem como json via ajax, mas o IE tenta baixar o json como um arquivo, e o Chrome o abre em uma janela do navegador. Como faço para parar de fazer isso?

O formulário de login está em uma visão parcial que renderiza no modal:

   

Minha jquery desencadeada pelo clique do botão:

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

Meu controlador de login:

 [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; } } 

Está abrindo uma nova janela do navegador porque você está enviando um formulário normal!

Por que ele está enviando um formulário normal? Porque mesmo que você tenha algum código para fazer um link, clique em event no botão submit para fazer um post ajax, você não está parando o comportamento normal de envio de formulário, por isso está fazendo o formulário normal também.

Você pode usar o preventDefault() jquery preventDefault() para impedir o envio de formulário normal.

Também não há nenhum ponto em retornar uma resposta de Redirecionamento de um método de ação que está sendo chamado de uma chamada ajax. Você deve retornar uma resposta JSON de volta.

 [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!" }); } } 

E no manipulador de sucesso / feito da $.ajax , verifique a resposta e execute a próxima etapa conforme necessário (mostre a mensagem / redirecione o usuário para a página /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); }); }); }); 

Você também pode considerar a conexão no evento de submit do formulário em vez do evento click no botão. Quando o usuário clicar no botão Enter após inserir os valores do elemento do formulário de input, ele enviará o formulário.

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