ASP.NET MVC com jQuery + JSON

Sobre o jQuery

Apesar de ser um dos mais comentados “lançamentos” dos últimos anos, muita gente ainda não sabe e não tem prática com jQuery. Mas o mais legal disso é que o jQuery não tem nada de novidade por baixo dos panos.
Basicamente, jQuery é um projeto resultante da soma do CSS, com seus seletores, e das possibilidade do Java Script, tudo isto escrito em uma nova linguagem, um novo idioma.

Para exemplificar, em um passado não muito distante, desenvolver a comunicação Ajax era algo complicado.  Exigia-se muitas linhas de código, enfrentava-se dificuldade com testes, com retornos, etc. Hoje, com jQuery, é possível utilizar seus recursos “prontos” mantendo a preocupação nas regras do negócio ao invés da estrutura técnica para realizá-las.

A única questão diferente (diferente.. não dificil) é que exige uma sintaxe um pouco fora da usual tanto para desenvolvedores quanto para designer, pois mistura um pouco dos dois mundos ao utilizar seletores CSS com sintaxe baseada no ECMA 262. Fora isso não tem segredo, não é difícil e facilita muito a nossa vida.

Como o foco deste post não é o jQuery, recomendo que acesse o http://jquery.com para obter mais informações.

Sobre o JSON

Com o foco dado ao à comunicação assíncrona na web nestes últimos tempos, surgiu a necessidade de utilizarmos um formato prático para troca de informações entre as bibliotecas baseadas no ECMA 262 e códigos server-side. Neste cenário entra o JSON – JavaScript Object Notation.

O JSON nada mais é do que uma definição de nome/valor para representação de informações. Os “objetos” são representados através da estrutura abaixo:

Como é possível imaginar, a iteração nestes objetos deve ocorrer facilmente, visto que não há tipagem, regras ou qualquer outro detalhe que aumente a complexidade no acesso às informações.

O benefício ocorre quando unimos a facilidade do JSON com a produtividade do jQuery, como no exemplo abaixo:

$.getJSON("/Graficos/Obter",
                    function(data) {
                        if (data == '' || data == null) {
                            jAlert("Não foi possível obter os dados para visualização da tabela.");
                            return;
                        }
                        else {

                            $(eval(data)).each(function() {
                                // Execução

                            });

                            $("#planilha").dataTable({});


                        }
                    });

Se algo parece estranho, com certeza você não está habituado ao jQuery.

Como podemos perceber pelo exemplo, a sintaxe é extremamente simples. No exemplo acima, a instrução getJSON retorna de uma URL uma série de informações no formato JSON explicado acima. Através das informações retornadas (data), é possível criar uma laço (.each) onde podemos percorrer cada elemento e efetuar uma execução.

Na prática, um código em JSON tem o seguinte formato:

{"id":1,"nome":"Nobre"}

Uma coleção de objetos apresenta colchetes para delimetar os itens pertencentes à coleção:

[{"id":1,"nome":"Nobre"},{"id":2,"nome":"André"}] 

E como isto se encaixa do ASP.NET MVC?

No ASP.NET MVC não existe requisições mapeadas a arquivos físicos, mas sim a métodos que retornam algum tipo de informação para o usuário, que utilizam como base a classe ActionResult. Em alguns casos, este retorno pode ser uma ViewResult (telas aspx, por ex), um JavaScript, ou então um Json.

O ActionResult Json permite que objetos sejam “automaticamente” transformados para o padrão JSON, e esta transformação seja retornada para o autor da requisição.

O exemplo abaixo demonstra o resultado da transformação de um objeto extremamente simples:

public ActionResult Index()
{
    var teste = new object[]{ new { id = 1, nome = "Nobre"}, new { id = 2, nome = "André" }};
    return Json(teste);
}

Tá… e tem algum exemplo mais prático?

Em uma cenário mais real, esta abordagem poderia ser utilizada em uma interface com comunicação assíncrona, visando a troca de dados entre o código jQuery e o servidor. É possível executar o getJSON diretamente em um Controller, usufruindo ainda da possibilidade de retornar uma ActionResult Json ou ViewResult dependendo do tipo de requisição:

No Controller:

public class GraficoController : Controller
    {

        public ActionResult Padrao(string contexto, string tipo, string formato)
        {
            IList<IItemGrafico> dados = new GraficosPadraoRepository().ObterDadosParaGraficoPadrao(contexto);

            if ("json".Equals(formato, StringComparison.CurrentCultureIgnoreCase))
            {
                   return Json(dados);
            }

            ...

            return new FileStreamResult(builder.Exportar(), "image/png"); 
        }

No ASPX:

$.getJSON("/Grafico/Padrao?formato=json",
                    function(data) {
                        if (data == '' || data == null) {
                            jAlert("Não foi possível obter os dados para visualização da tabela.");
                            return;
                        }
                        else {

                            $("#planilha tbody").html("");
                            $(eval(data)).each(function() {
                                $("#planilha tbody").append("<tr><td>" + (this.Empresa != null ? this.Empresa : "") + "</td><td>" + this.Item + "</td><td>" + (this.Item2 != null ? this.Item2 : "") + "</td><td class=\"center\">" + this.Valor + "</td></tr>");
                            });

                            $("#planilha").dataTable({});


                        }
                    });

Lembrando que “data” (parametro da function callback) armazena o resultado da requisição a /Grafico/Padrao em formato JSON. Observem a iteração através da função “each” do jQuery.

Conclusão

Apesar de muito rápido, este post demonstra a utilização conceitual e prática do jQuery e JSON, dentro do ASP.NET MVC.

Espero que tenham gostado!

Abraços!