ASP.NET MVC form submit com ou sem Ajax
18/12/2010
Fala galera, neste por aqui eu mostrei como fazer o submit assíncrono de um formulário no ASP.NET MVC usando Jquery.Agora quero mostrar "quase" a mesma coisa, mas deixando o formulário funcional tanto com como sem JavaScript: Hijax!
O Hijax
Hijax é a idéia de acrescentar funcionalidades javascript/ajax para um página que já funciona semanticamente da forma tradicional fazendo posts para o servidor e causando refresh nas páginas.A idéia é melhorar e adicionar funcionalidades na página e não fazer com que ela só funcione com ajax.É um técnica não intrusiva, que permite tanto aos que possuem javascript habilitado quanto os que não possuem utilizar a aplicação da mesma maneira.
O form html
@using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post, new { id = "login" }
)){ @Html.ValidationSummary(true) <fieldset> <legend>Fields</legend> <div class="editor-label"> @Html.LabelFor(model => model.Usuario) </div> <div class="editor-field"> @Html.EditorFor(model => model.Usuario) </div> <div class="editor-label"> @Html.LabelFor(model => model.Senha) </div> <div class="editor-field"> @Html.EditorFor(model => model.Senha) </div>
</fieldset>}
Bastante simples né?!Reparem apenas que para colocar um id no form eu passei alguns parâmetros: Action, Controller, método(Get ou Post) e no final um objeto anônimo contendo a propriedade id, que é o id do elemento.
O código jquery
Feito isso vamos criar o código JavaScript para dar o comportamento assíncrono:
$(function () { $("#login").submit(function (e) { e.preventDefault();
$.post($(this).attr("action"), $(this).serialize(), function (retorno) { $("#login")[0].reset();
alert(retorno.Resultado);
}
);
}
);
}
);
Tudo que esse código faz é um post assíncrono para a action definida no form, passando seus campos como parâmetros.Na função de callback limpamos o form e exibimos um alerta com a reposta do servidor.Poderíamos fazer um monte de outras coisas, mas para não alongar muito o exemplo, apenas exibimos uma alert.
A action MVC
A grande sacada da brincadeira está na action no nosso controller:
[HttpPost]
public ActionResult SubmitForm(Login login){
if(Request.IsAjaxRequest()) return Json(new { Resultado = "Você está logado!" }
);
return RedirectToAction("Index");
}
A action verifica se a requisição é uma requisição ajax utilizando o método IsAjaxRequest do objeto de Request.Caso seja uma requisição ajax o comportamento e o fluxo são diferentes de uma requisição comum. Neste caso apenas retornamos um Json com uma mensagem.Quando não é uma requisição ajax fazemos um redirecionamento para uma action. Desta forma nosso formulário funciona tanto quando o cliente possui javascript habilitado como quando não está.
Com Javascript habilitado
Sem Javascript habilitado
Quem não teria javascript habilitado?
Simples: muitos dispositivos mobile tem um péssimo suporte a javascript. E hoje é muito comum acessar a internet com browser limitado destes dispositivos.
Abraços, Vinicius Quaiato.
