ASP.NET MVC + Jquery: submit form assíncrono
14/12/2010
Esta semana tivesse a necessidade de realizar o submit em um form de maneira assíncrona: Hijax. Com ASP.NET MVC e JQuery esta é uma tarefa bastante trivial.
Então sem enrolar, vamos ao form:
@using (Html.BeginForm("cadastrar", "home", FormMethod.Post, new { id = "form_cadastro" })) {
<label for="Nome" style="display:block;">Nome</label>
@Html.TextBox("Nome")<br />
<label for="Email" style="display:block;">Email</label>
@Html.TextBox("Email")<br />
<input type="submit" name="enviar" value="enviar" />
}
Eu preciso que este formulário seja postado para o servidor de forma assíncrona, em bizarrices no JavaScript (no projeto em que fiz isso este era um arquivo .html e não .cshtml). Para fazermos isso vamos utilizar jquery para submeter o formulário e serializar os dados a serem enviados, sem que precisemos ficar configurando tudo como parâmetros.
O código JavaScript ficou mais ou menos assim:
1 $(function () {
2 $('#form_cadastro').submit(function (e) {
3 e.preventDefault();
4
5 $.post($(this).attr("action"), $(this).serialize(), function (retorno) {
6 alert(retorno.Ok);
7 }, "json");
8 });
9 });
A mágica é que atachamos um evento submit ao formulário, linha 2. Na linha 3 cancelamos o evento que normalmente seria disparado pelo input submit. Na linha 5 tudo o que fazemos é uma requisição post. Vejam como não utilizamos "magic strings" para os parâmetros da chamada post. Ao invés disso utilizamos os próprios valores já definidos no form: sua action, e serializamos os campos como parâmetros da requisição.
Pronto! Simples assim. Na action no servidor eu optei por trabalhar com o request mesmo:
1 public ActionResult Cadastrar(){
2 var ok = true;
3 if(string.IsNullOrWhiteSpace(Request.Form["Nome"]))
4 ok = false;
5 if(string.IsNullOrWhiteSpace(Request.Form["Email"]))
6 ok = false;
7
8 return Json(new { Ok = ok });
9 }
Resultados:
Em outro post mostrarei como fazer com que o formulário funcione com ou sem JavaScript.
Abraços,
Vinicius Quaiato.
