Vinicius Quaiato

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
2
3
4
5
6
7
8
9
$(function () {
  $('#form_cadastro').submit(function (e) {
    e.preventDefault();

    $.post($(this).attr("action"), $(this).serialize(), function (retorno) {
        alert(retorno.Ok);
    }, "json");
  });
});

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
2
3
4
5
6
7
8
9
public ActionResult Cadastrar(){
  var ok = true;
  if(string.IsNullOrWhiteSpace(Request.Form["Nome"]))
    ok = false;
  if(string.IsNullOrWhiteSpace(Request.Form["Email"]))
    ok = false;

  return Json(new { Ok = ok });
}

Resultados:

Em outro post mostrarei como fazer com que o formulário funcione com ou sem JavaScript.

Abraços,

Vinicius Quaiato.

ASP.NET MVC + Jquery: submit form assíncrono

Voltar