Artigos .NET Integrando jQuery DataTables com ASP.NET MVC
Artigo do tipo Tutorial

Integrando jQuery DataTables com MVC
O ASP.NET MVC é uma implementação da Microsoft do padrão MVC para aplicações WEB na plataforma .NET, enquanto que o DataTables é um plugin do jQuery que possibilita a realização de uma série de operações com tabelas HTML de forma rápida e produtiva. Hoje exploraremos algumas formas de carregar dados no plugin, além de integrarmos o mesmo com o ASP.NET MVC, criando rotinas para realizar o processamento das requisições no lado do servidor.

Nosso artigo começará com uma apresentação das variadas possibilidades de fontes de dados, passando pelo DOM, Array JavaScript, Ajax e concluindo com a aplicação do recurso de processamento de operações de ordenação, filtro e paginação no lado do servidor, através de uma aplicação ASP.NET MVC.


Em que situação o tema é útil
Este tema é útil a todos os projetos que precisam manipular listas, ajudando a realizar operações como busca e ordenação, seja qual for o volume de dados, visto que aprenderemos a trabalhar com processamento das requisições no lado do servidor, trafegando apenas os dados visualizados pelo usuário.

Na última edição nós conhecemos o plugin DataTables do jQuery, onde vimos como manipular tabelas em HTML. Na ocasião apresentamos as configurações básicas do plugin, além dos principais recursos do mesmo, como por exemplo, ordenação, filtros e grids com linhas expansivas. Porém, apresentamos apenas os recursos processados via client-side.

Esta abordagem funciona bem para recursos com pequeno volume de dados, como por exemplo, um cadastro mais simples, que não tem a previsão de crescer tanto nem em número de colunas e nem em número de registros.

Isto se dá pela natureza das aplicações WEB onde precisamos estar atentos à tudo o que trafega entre servidor e cliente. Se estivermos tratando, por exemplo, de uma listagem de movimentações de material em um grande operador logístico, é possível que tenhamos que carregar alguns milhares de registros. Neste caso, teríamos uma grande sobrecarga em nossa aplicação. A primeira sobrecarga seria na recuperação destas informações da base de dados. Se estivermos trabalhando com ORM teremos a sobrecarga dos objetos em memória, visto que o ORM irá criar um objeto para cada registro de nossa consulta. Teremos ainda a sobrecarga de banda, visto que teremos algumas dezenas de kbytes trafegados do nosso servidor para o browser do cliente. Por fim teremos uma sobrecarga no client, onde o browser terá que gerenciar uma lista enorme de objetos JavaScript.

Pensando nisso, o DataTables trabalha não apenas com listas pequenas, mas para volumes maiores de dados, nos possibilitando a realização de processamento no servidor.

O DataTables trabalha com diversas fontes de dados possíveis, sendo algumas client-side e outras Server-side. Como client-side temos:

o DOM – Neste caso utilizamos um table HTML como fonte de dados, com suas linhas e colunas montadas;

o Array JavaScript – Neste caso temos um table HTML vazio e passamos uma lista de objetos JavaScript como parâmetro para o DataTables. Desta forma, o próprio plugin se encarrega de criar dinamicamente as colunas e linhas do table HTML, de acordo com a lista passada como parâmetro.

Além disso, temos ainda as seguintes formas de carga de dados através do servidor:

o Fonte de dados Ajax – Neste caso aplicamos o DataTables em uma table HTML vazio e passamos como parâmetro uma URL que retornará uma lista com os dados a serem carregados no table.

o Processamento no servidor - Neste caso temos o comportamento parecido com o da fonte de dados Ajax, porém todo o processamento de ordenação e filtro é realizado pelo servidor.

Nesta edição veremos como trabalhar com uma fonte AJAX e com processamento no servidor, através das actions do ASP.NET MVC, mas antes disso vamos conhecer um pouco mais a fundo as quatro fontes de dados possíveis, compreendendo as características das mesmas, assim como seus prós e contras.

Fonte de dados DOM

Quando trabalhamos com o DOM como fonte de dados, temos que ter nossa Table já montada no HTML, isto significa dizer que não utilizaremos todos os benefícios de produtividade do DataTables, visto que teremos a necessidade de renderizar a tabela manualmente. Neste cenário, temos como benefício o uso dos recursos e ordenação, filtro e paginação do DataTables. Por outro lado, todos estes são realizados diretamente no client-side, ocasionando uma sobrecarga na máquina do cliente, dependendo do volume de dados.

Além disso, se nossa tabela HTML for gerada no servidor, teremos um volume maior de dados trafegados na rede, visto que teremos uma série de tags HTML para serem carregadas pelo browser.

Para compreendermos melhor, vamos imaginar dois cenários possíveis de uso desta fonte dados: o primeiro cenário é o de montagem da table pelo lado servidor, onde temos um controller que passa uma lista de objetos para a view renderizar. Para fins de exemplos, teremos um repositório estático (Listagem 1), que irá criar uma lista de objetos falsos, que servirá para simularmos a montagem da table.

Listagem 1. Repositorio Fake


  01     using System;
  02     using System.Collections.Generic;
  03     using System.Linq;
  04     using System.Web;
  05     using Models;
  06     
  07     namespace Repositorio
  08     {
  09            public static class RepositorioFake
  10            {
  11             private static int UltimoId = 0;
  12             private static IList<Cliente> clientesCadastrados = 
                 CarregarClientesCadastradosDefault();
  13     
  14             public static IList<Cliente> GetClientesCadastrados(){
  15                 return clientesCadastrados;
  16             }
  17     
  18             public static IList<Cliente> CarregarClientesCadastradosDefault()
  19             {
  20                 IList<Cliente> clientesDefaults = new List<Cliente>();
  21                 clientesDefaults.Add(new Cliente() { 
  22                     Id = UltimoId++, Nome = "Maria Ferreita", 
                         Sexo = "Feminino", 
  23                     Estado = "Rio de Janeiro", Idade = 26 });
  24                 clientesDefaults.Add(new Cliente() { 
  25                     Id = UltimoId++, Nome = "João Silva", 
                         Sexo = "Masculino", 
  26                     Estado = "São Paulo", Idade = 32 });
  27                 clientesDefaults.Add(new Cliente() { 
  28                     Id = UltimoId++, Nome = "Marieta Julia", 
                         Sexo = "Feminino", 
  29                     Estado = "Rio de Janeiro", Idade = 24 });
  30                 clientesDefaults.Add(new Cliente() { 
  31                     Id = UltimoId++, Nome = "Juliana Mariz", 
                         Sexo = "Feminino", 
  32                     Estado = "Minas Gerais", Idade = 30 });
  33                 clientesDefaults.Add(new Cliente() { 
  34                     Id = UltimoId++, Nome = "Ricardo Ferreira", 
                         Sexo = "Masculino", 
  35                     Estado = "Rio de Janeiro", Idade = 30 });
  36                 clientesDefaults.Add(new Cliente() { 
  37                     Id = UltimoId++, Nome = "Mario Zafra",
                         Sexo = "Masculino", 
  38                     Estado = "Minas Gerais", Idade = 28 });
  39                 clientesDefaults.Add(new Cliente() { 
  40                     Id = UltimoId++, Nome = "Julieta Severo", 
                         Sexo = "Feminino", 
  41                     Estado = "Minas Gerais", Idade = 27 });
  42                 clientesDefaults.Add(new Cliente() { 
  43                     Id = UltimoId++, Nome = "Christina Oliveira", 
                         Sexo = "Feminino", 
  44                     Estado = "Rio de Janeiro", Idade = 40 });
  45                 clientesDefaults.Add(new Cliente() { 
  46                     Id = UltimoId++, Nome = "Luana dos Santos", 
                         Sexo = "Feminino", 
  47                     Estado = "São Paulo", Idade = 22 });
  48                 clientesDefaults.Add(new Cliente() { 
  49                     Id = UltimoId++, Nome = "Tadeu Santoro", 
                         Sexo = "Masculino", 
  50                     Estado = "São Paulo", Idade = 25 });
  51                 clientesDefaults.Add(new Cliente() { 
  52                     Id = UltimoId++, Nome = "Luiz Bueno", 
                         Sexo = "Masculino", 
  53                     Estado = "São Paulo", Idade = 27 });
  54                 clientesDefaults.Add(new Cliente() { 
  55                     Id = UltimoId++, Nome = "Galvao Cesar", 
                         Sexo = "Masculino", 
  56                     Estado = "Rio de Janeiro", Idade = 27 });
  57                 clientesDefaults.Add(new Cliente() { 
  58                     Id = UltimoId++, Nome = "Arnaldo Santos", 
                         Sexo = "Masculino", 
  59                     Estado = "Rio de Janeiro", Idade = 28 });
  60                 clientesDefaults.Add(new Cliente() { 
  61                     Id = UltimoId++, Nome = "Bruna Salvatore", 
                         Sexo = "Feminino", 
  62                     Estado = "Minas Gerais", Idade = 35 });
  63                 clientesDefaults.Add(new Cliente() { 
  64                     Id = UltimoId++, Nome = "Luiza Severo", 
                         Sexo = "Feminino", 
  65                     Estado = "São Paulo", Idade = 29 });
  66                 clientesDefaults.Add(new Cliente() { 
  67                     Id = UltimoId++, Nome = "Juliana Aguiar", 
                         Sexo = "Feminino", 
  68                     Estado = "Rio de Janeiro", Idade = 23 });
  69                 clientesDefaults.Add(new Cliente() { 
  70                     Id = UltimoId++, Nome = "Beatriz Rosa", 
                         Sexo = "Feminino", 
  71                     Estado = "Rio de Janeiro", Idade = 37 });
  72                clientesDefaults.Add(new Cliente() { 
  73                     Id = UltimoId++, Nome = "Juliana Silva", 
                         Sexo = "Feminino", 
  74                     Estado = "Rio de Janeiro", Idade = 35 });
  75                 clientesDefaults.Add(new Cliente() { 
  76                     Id = UltimoId++, Nome = "Maria Albuquerque", 
                         Sexo = "Feminino", 
  77                     Estado = "Rio de Janeiro", Idade = 35 });
  78     
  79                 return clientesDefaults;
  80             }
  81     
  82       }
  83     }

Como podemos ver na Listagem 1, na linha 11 temos um atributo estático responsável por armazenar o último ID dos clientes cadastrados, logo em seguida temos um atributo estático que simula uma lista de clientes cadastrados. Ao longo deste artigo trabalharemos desta forma, com dados estáticos em memória, para simularmos o que seria uma fonte centralizada de dados, visto que se fossemos abordar toda a parte de persistência em um SGDB o artigo ficaria muito grande.

Com o nosso repositório de dados já simulado, poderemos trabalhar na visualização dos dados do mesmo. Diante disso, teríamos um controller que retornaria uma view e passaria para ela os dados do nosso repositório Fake, ficando a view responsável pela renderização do table no HTML. Este controller pode ser visto na ...

Quer ler esse conteúdo completo? Tenha acesso completo