Serializando formulários com jQuery de forma assíncrona em aplicações ASP.NET MVC

Se você acompanha este site, certamente percebeu que nos últimos tempos, os novos conteúdos baixaram consideravelmente de frequência. Isso se deveu basicamente há dois fatos: o trabalho na Conio (que tem exigido muito do meu tempo, inclusive os extras) e um projeto pessoal que, creio eu, em algumas semanas irei anunciar.

Agora, com a relativa normalização das atividades, pretendo retormar a geração de conteúdos aqui no site. Tanto para os posts quanto para o projeto de podcast – Papo Tech.

Afim de retomar as atividades aqui do site, hoje gostaria de falar um pouco sobre uma metodologia que tem sido de grande utilidade em alguns projetos web que tenho trabalhado dentro da plataforma ASP.NET MVC: a serialização de formulários utilizando jQuery e JSON. Portanto, para falar sobre isso, estou assumindo que você já possua boa vivência prática com as tecnologias das quais falaremos aqui: jQuery, JSON, AJAX, ASP.NET MVC, etc. Certo?!

Serialização?!

O processo de serialização pode ser entendido, de forma simplificada, como aquele que possibilita a conversão de um tipo de determinado objeto para um outro tipo, que de forma geral, terá a manipulação mais simplificada para aquela situação corrente. A Figura 1 ilustra o modus operandi do processo ao qual nos referimos.

 

Figura 1. Visão geral do processo de serialização

Uma vez serializado, se houver necessidade, o novo objeto pode então ser transportado para o servidor de aplicação para que as tarefas devidas possam ser executas, e de volta ao cliente para realização de novas operações em momento posterior. Neste caso, se o objeto original for requerido no cliente (como em chamadas AJAX, por exemplo), naturalmente que um processo inverso ao da serialização, isto é, deserialização, deverá ser executado.  A Figura 2 ilustra o processo de transporte dos objetos serializados entre as áreas de aplicação em uma infraestrutura web.

Figura 2. De/serialização e transporte

Para que a ideia fique ainda mais clara, escreveremos um pouco de código. Faremos o seguinte:

1. Criaremos um formulário HTML simples, com apenas dois campos: “Nome” e “E-mail”.
2. Na sequência, serializaremos e enviaremos o mesmo para visualização no próprio navegador. Bem simples.

O formulário que iremos criar é bem simples. Possui apenas dois campos, conforme mencionado na lista acima. O código da Listagem 1 apresenta o formulário de nossa aplicação.

Listagem 1. O formulário HTML do primeiro exemplo

Na sequência, adicionaremos o código Javascript responsável por serializar o formulário e enviar o mesmo para visualização no navegador. Como você poderá notar, o jQuery possui uma função nativa para serialização de elementos HTML, chamada “.serialize()”. O que ela faz nada mais é do que, transformar em uma string no formato JSON, elementos HTML, incluindo formulários. A Listagem 2 ilustra sua utilização.

function MostraFormSerializado() {
    var Res = $("form").serialize();
    $("#Resultado").text(Res);
}
$("input[type='button']").on("click", MostraFormSerializado);
//MostraFormSerializado();

Listagem 2. O código Javascript que serializa o formulário de exemplo

O resultado pode ser visualizado na Figura 3.

Figura 3. O formulário serializado

ASP.NET MVC e a serialização de formulários

Se você já possui alguma experiência com ASP.NET MVC, sabe que existem diferentes formas de transportar os dados de um formulário para suas actions específicas. O objetivo deste post é justamente o de apresentar uma nova forma de se realizar esta tarefa.

É comum encontrar nas aplicações web modernas, formulários grandes e complexos. Passar os dados destes formulários para actions nem sempre é um trabalho simples ou trivial. Desta forma, a serialização de formulários se apresenta como um alternativa interessante para estes cenários, principalmente quando pensamos em JSON, que é um formato que tem suporte nativo dentro da plataforma .NET.

A seguir, veremos como serializar o o mesmo formulário apresentado pela Listagem 1, só que agora, passando estas informações de forma assíncrona para a action via AJAX com jQuery e de lá, exibindo os dados na tela. O processo é bem simples entretanto, apresenta o modus operandi deste tipo de operação.

Para realizar tal procedimento, iniciaremos criando um projeto do tipo ASP.NET MVC 4. Sugestivamente o nomeei como “SerializacaoASPNETMVC”. Criei um projeto do tipo “Empty”, disponível na coleção do framework MVC. Neste ponto, sua Solution Explorer deverá estar parecida com aquela apresentada pela Figura 4.

 

Figura 4. A Solution Explorer do projeto de exemplo

O próximo passo consiste na estruturação do tipo “Usuarios”, uma vez que dentro de nossa aplicação ASP.NET MVC, os dados provenientes do formulário serão tipados desta forma. Para isso, adicionei à Solution apresentada pela Figura 4, um novo diretório e o nomeei como “ViewModel”. Na sequência, adicionei uma nova classe em seu interior e a nomeei como “Usuarios”. Seu código pode ser visualizado através da Listagem 3.

public class Usuarios
  {
    public string Nome { get; set; }
    public string Email { get; set; }
  }

Listagem 3. A estrutura da classe usuários

Na sequência adicionei um novo controller e o nomeei como “Serializacao”. Em seu interior, adicionei duas novas actions: “Index” e “ProcessaFormulario”. Seus códigos podem ser visualizados através da Listagem 4.

public ActionResult Index()
{
  return View();
}

[HttpGet]
public JsonResult ProcessaFormulario(Usuarios Usuario)
{
  return Json(new { OK = true, Nome = Usuario.Nome, Email = Usuario.Email }, JsonRequestBehavior.AllowGet);
}

Listagem 4. O conteúdo das actions “Index” e “ProcessaFormulario”

Ok. Só nos resta agora a parte do cliente. Assim, adicionei uma nova view para a action “Index”. Em seu interior, temos o código apresentado pela Listagem 5.

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Serialização</title>
</head>
<body>
    <fieldset>
        <legend>Formulário a ser serializado</legend>
        <form>
            <label for="Nome">Nome:</label>
            <input type="text" id="Nome" name="Nome" />
            <label for="Email">E-mail:</label>
            <input type="text" id="Email" name="Email" />
            <input type="button" id="Botao" name="Botao" value="Serializar" />
        </form>
        <div id="Resultado" style="color: red;"></div>
    </fieldset>
</body>
</html>

Listagem 5. O formulário HTML do primeiro exemplo

A view em execução pode ser visualizada através da Figura 5.

Figura 5. Formulário de exemplo

Na sequência adicionarei o código Javascript que fará não apenas a serialização, mas também a chamada assíncrona do [controller]/[action] que processará nosso formulário e devolverá a resposta para a view. A Listagem 6 apresenta este código.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js" ></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#formulario").validate({
                rules: {
                    Nome: {
                        required: true
                    },
                    Email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    Nome: "Usuário obrigatório.",
                    Email: {
                        required: "Email obrigatório.",
                        email: "Por favor, informe um e-mail válido."
                    }
                },
                submitHandler: function () {
                    $.ajax({
                        type: "get",
                        url: "/Serializacao/ProcessaFormulario",
                        data: $("#formulario").serialize(),
                        success: function (data) {
                            if (data.OK)
                            {
                                $("#Resultado").text(data.Nome + " - " + data.Email);
                            }
                            else
                            {
                                $("#Resultado").text("Falhou!");
                            }
                        }
                    });

                    return false;
                }
            });
        });
</script>

Listagem 6. Serializando o formulário de forma assíncrona

O resultado pode ser visualizado através da Figura 6.

Um pouco de explicação

O código jQuery apresentado aqui é simples e dispensa comentários detalhados. Vale ressaltar apenas o fato de que estamos utilizando  um conhecido plugin jQuery para automatizar o processo de validação de formulários – o jQuery Validate. No método “submitHandler” do mesmo (isto é, se todas as validações foram superadas), estamos chamando de forma assíncrona (com AJAX) o controller que processará o formulário serializado e devolverá uma resposta em formato JSON para exibição na view. Simples, não?!

Do lado do controller (Listagem 4), o que fizemos foi criar uma action que espera um “Usuario” como parâmetro (lembre-se que criamos uma classe DTO “Usuarios”) e devolvemos para a view este objeto “Usuario” formatado como JSON. É claro que, como nosso objetivo aqui é apresentar o modelo de trabalho com formulários serializados, devolver a resposta pura e simples para a view já cumpre seu papel de exemplificar, entretanto, vale mencionar aqui que, uma vez com os dados do formulário no interior da view, você tem o poder de fazer o que quiser com dados, como por exemplo, gravar os mesmos no banco de dados, etc.

Por hoje é só. Um abraço e até a próxima!