Integrando jQuery DataTables com ASP.NET MVC

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 }" [...] continue lendo...