Grids em ASP.NET MVC: utilizando o plugin Backgrid.js

A exibição de informações num formato tabular é, certamente, uma necessidade mais do que frequente na esmagadora maioria das aplicações voltadas à Internet.

Muitos controles (proprietários ou gratuitos) foram desenvolvidos procurando atender a este tipo de demanda. Diversas dessas soluções foram construídas sob a tecnologia JQuery, o que torna mais fácil a integração destas a sites concebidos nas mais diferentes plataformas. O plugin Backgrid.js é uma biblioteca com estas características, o que o transforma numa alternativa viável para a implementação de grids em aplicações ASP.NET MVC.

Atualmente na versão 0.2.0 (Abril/2013), a biblioteca Backgrid.js se destaca por procurar fornecer suporte aos seguintes recursos:

• A leitura de informações no formato JSON, o qual é suportado pelas principais plataformas de desenvolvimento;
• A paginação dos dados vinculados a uma grid;
• A ordenação crescente/decrescente dos dados associados a uma grid, bastando para isto um simples clique no cabeçalho de uma coluna/campo;
• Mecanismos para inclusão, alteração e/ou exclusão de registros.

Maiores informações (inclusive instruções para download e utilização da biblioteca) podem ser obtidas através do link:

http://wyuenho.github.io/backgrid/

O objetivo deste artigo é abordar a utilização do plugin Backgrid.js em uma aplicação ASP.NET MVC, permitindo assim a construção de grids que contem com funcionalidades de paginação e ordenação de dados. Isto implicará no uso da tecnologia ADO.NET (acessando um banco de dados SQL Server) e de JSON durante a implementação do site para testes.

Criando a solução de exemplo

A aplicação apresentada neste artigo foi criada a partir do Visual Studio 2012 Professional, fazendo uso para isto do .NET Framework 4.5 e da versão 4.0 do ASP.NET MVC. O exemplo a ser implementado fará uso de um banco de dados SQL Server (Northwind) via ADO.NET, com a conversão do resultado de uma consulta a informações de clientes para o formato JSON; serão estes dados a base para o preenchimento da grid criada por meio do plugin Backgrid.js.

Para gerar o projeto de testes será necessário, dentro do Visual Studio, acessar o menu File, opção New e, por fim, a opção Project. Dentro da tela New Project (Figura 1) selecionar o template ASP.NET MVC 4 Web Application, preenchendo o campo Name com o nome da aplicação a ser gerada (“TesteGridMVC”, neste caso); no campo Location é possível ainda definir o diretório no qual serão criados os arquivos para este projeto.

Figura 1: Criando um projeto ASP.NET MVC 4 para testes

Aparecerá então uma janela como a que consta na Figura 2. Deverão ser escolhidos o template para a criação do projeto (selecionar “Internet Application”), assim como o Engine utilizado para a geração das Views (marcar a opção “Razor”).

Figura 2: Criando um projeto ASP.NET MVC 4 para testes

Configurando o acesso à base de dados

Para a obtenção das informações utilizadas pela aplicação de exemplo será empregado o banco de dados Northwind. Maiores informações sobre como habilitar esta base para uso no SQL Server 2012 podem ser encontradas no link:

http://msdn.microsoft.com/en-us/library/vstudio/8b6y4c7s.aspx

Com a base de dados já configurada, adicionar ao arquivo Web.config do projeto de testes a string de conexão “Nortwind” (conforme indicado na Listagem 1).

Listagem 1: Ajustes no arquivo Web.config da aplicação

<?xml version="1.0" encoding="utf-8"?>
<configuration>

  ...

  <connectionStrings>
    <add name="Northwind"
        connectionString="Data Source=.;Initial Catalog=Northwind;Integrated Security=True"
        providerName="System.Data.SqlClient" />
  </connectionStrings>

  ...

</configuration>

Implementando as classes de acesso a dados

Com o projeto TesteGridMVC já criado e o acesso à base de dados devidamente configurado, chega o momento de prosseguir com a criação dos tipos empregados na manipulação de informações sobre clientes. As estruturas descritas nesta seção pertencerão à camada Model (namespace TesteGridMVC.Models).

Primeiramente será implementada a classe Cliente (Listagem 2). Foram definidos neste tipo (sob a forma de propriedades) o código do cliente, o nome da empresa, o responsável por negociações, o endereço da companhia, a cidade, o país, além do telefone para contatos.

Listagem 2: Classe Cliente

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TesteGridMVC.Models
{
    public class Cliente
    {
        public string CodCliente { get; set; }
        public string NomeCliente { get; set; }
        public string Responsavel { get; set; }
        public string Endereco { get; set; }
        public string Cidade { get; set; }
        public string Pais { get; set; }
        public string Telefone { get; set; }
    }
}

Já na Listagem 3 está o código referente à classe ClienteDAO. Este tipo baseia-se em um padrão conhecido Data Access Object (DAO), tendo por função centralizar o acesso à base de dados para a manipulação de informações sobre clientes.

Listagem 3: Classe ClienteDAO

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;

namespace TesteGridMVC.Models
{
    public class ClienteDAO
    {
        public List<Cliente> ObterInformacoesClientes()
        {
            List<Cliente> resultado = new List<Cliente>();

            using (SqlConnection conexao =
                new SqlConnection(ConfigurationManager
                    .ConnectionStrings["Northwind"].ConnectionString))
            {
                SqlCommand cmd = conexao.CreateCommand();
                cmd.CommandText =
                    "SELECT CustomerID AS CodCliente " +
                            ",CompanyName AS NomeCliente " +
                            ",ContactName AS Responsavel " +
                            ",Address AS Endereco " +
                            ",City AS Cidade " +
                            ",Country AS Pais " +
                            ",Phone AS Telefone " +
                    "FROM Customers " +
                    "ORDER BY 2";

                conexao.Open();
                using (SqlDataReader reader = cmd.ExecuteReader())
                {
                    while (reader.Read())
                    {
                        resultado.Add(new Cliente(){
                            CodCliente =
                                reader["CodCliente"].ToString(),
                            NomeCliente =
                                reader["NomeCliente"].ToString(),
                            Responsavel =
                                reader["Responsavel"].ToString(),
                            Endereco =
                                reader["Endereco"].ToString(),
                            Cidade =
                                reader["Cidade"].ToString(),
                            Pais =
                                reader["Pais"].ToString(),
                            Telefone =
                                reader["Telefone"].ToString()
                        });
                    }

                    reader.Close();
                }

                conexao.Close();
            }

            return resultado;
        }
    }
}

Será o método ObterInformacoesClientes (definido em ClienteDAO) que fornecerá os dados necessários para o preenchimento do controle gerado via plugin Backgrid.js. Quanto ao funcionamento desta operação, é possível observar:

• A partir da variável “conexao” (instância do tipo System.Data.SqlClient.SqlConnection) é estabelecida uma conexão com a base de dados utilizada pela aplicação de exemplo (empregando para isto a string de conexão “Northwind”);
• A referência de nome “cmd” (objeto do tipo System.Data.SqlClient.SqlCommand) representa a instrução SQL que fará a consulta à tabela de clientes;
• Ao se invocar o método ExecuteReader do objeto associado à variável “cmd” uma nova instância da classe SqlDataReader (namespace System.Data.SqlClient) é gerada. Será por meio desta referência que os diferentes registros serão lidos, com a conversão de tais informações em instâncias do tipo Cliente;
• Os objetos da classe Cliente são armazenados em uma coleção, a qual será devolvida como resultado da execução do método ObterInformacoesClientes.

Implementando o Controller que processará informações de clientes

Com os tipos da camada Model já definidos, deve-se proceder agora com a implementação do Controller que retornará os dados no formato JSON (possibilitando assim o preenchimento da grid que será criada através da biblioteca Backgrid.js).

JSON (sigla do inglês "Javascript Object Notation") é um formato aberto que torna possível a serialização de objetos como texto, representando uma opção ao padrão XML na transferência de informações através de uma rede. Este padrão é empregado costumeiramente em aplicações Web que utilizam recursos em AJAX e outros mecanismos de Javascript/JQuery.

Um objeto em JSON é composto por pares de informações, com cada um destes possuindo um identificador (string que identifica o nome de propriedade) e seu respectivo valor. Os seguintes tipos de dados podem ser empregados para a representação de valores em JSON: Numeric, String, Boolean, Array (os diversos elementos devem estar separados por vírgula e constando dentro de colchetes), e null.

A Listagem 4 demonstra um exemplo de objeto contendo dados relativos a uma empresa hipotética, com as informações estando de acordo com o padrão JSON.

Listagem 4: Exemplo de objeto já convertido para o formato JSON

{
     "RazaoSocial"        : "ACME Fabril Ltda.",
     "NomeFantasia"       : "ACME",
     "NumeroFuncionarios" : 10627,
     "Localizacao" :
     {
         "Endereco" : "Avenida 9 de Julho, 123",
         "Cidade"   : "São Paulo",
         "Estado"   : "SP",
         "CEP"      : "01234-567"
     },
     "Contatos" :
     [
         {
           "Nome"     : "João da Silva",
           "Telefone" : "(11)3555-1234"
         },
         {
           "Nome"     : "José de Oliveira",
           "Telefone" : "(11)3555-4567"
         }
     ]
}

Um novo Controller pode ser criado por meio da janela Solution Explorer: para isto, clicar com o botão direito do mouse sobre a pasta Controllers, selecionando em seguida no menu de atalho o item Add, opção Controller. Aparecerá então a janela Add Controller; preencher o campo Controller Name com o valor "ClienteController" (Figura 3), enquanto em Template deverá estar marcada a opção "Empty MVC Controller.

Figura 3: Criando um novo Controller

Na Listagem 5 está a implementação da classe ClienteController. Foi definido neste Controller apenas a Action ObterInformacoesClientes, a qual devolverá como resultado de sua execução dados (já no formato JSON) a respeito de todos os clientes cadastrados na base Northwind.

Listagem 5: Classe ClienteController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TesteGridMVC.Models;

namespace TesteGridMVC.Controllers
{
    public class ClienteController : Controller
    {
        [HttpGet]
        public JsonResult ObterInformacoesClientes()
        {
            List<Cliente> informacoesClientes =
                new ClienteDAO().ObterInformacoesClientes();
            return this.Json(
                informacoesClientes,
                JsonRequestBehavior.AllowGet);
        }
    }
}

No que se refere à maneira como a Action ObterInformacoesClientes foi implementada, é possível destacar:

• O uso do atributo HttpGetAtribute (namespace System.Web.Mvc). Isto indica, basicamente, que a Action em questão será acessada através de requisições HTTP do tipo GET;
• O retorno do método ObterInformacoesClientes é uma instância da classe JsonResult (namespace System.Web.Mvc). Objetos deste tipo são gerados invocando-se o método Json (definido na classe básica System.Web.Mvc.Controller), o qual transforma um objeto gerado em .NET para o equivalente no formato JSON. O primeiro parâmetro da operação Json corresponde à referência que será convertida para o padrão JSON; já o segundo argumento deverá receber o valor de enumeration JsonRequestBehavior.AllowGet, de maneira que mecanismos de Javascript possam obter os dados disponibilizados pela Action através de instruções próprias para este fim.

OBSERVAÇÕES:

• Por convenção, nomes de classes que representam atributos terminam com o sufixo Attribute. A utilização de expressões que envolvam um atributo vinculando o mesmo a uma estrutura de código dispensa o uso de tal sufixo ao final do nome. Logo, ao se empregar o atributo HttpGetAttribute emprega-se apenas “HttpGet” na Action a ser marcada com o mesmo.
• Actions que atendam a requisições do tipo GET em um Controller MVC poderão não estar associadas a um atributo HttpGetAttribute (que é opcional). Solicitações de outros tipos precisarão obrigatoriamente estar marcadas com um atributo que represente a ação HTTP equivalente (HttpPostAttribute para uma requisição POST).
• Por questões de simplificação, a implementação do Controller HomeController foi omitida. As Actions desta classe não possuem nenhuma instrução complexa que necessite detalhamento (o código-fonte de HomeController pode ser obtido a partir do material para download deste artigo).

Implementando a grid de consulta a informações de clientes

A Listagem 6 corresponde à implementação da View Index. A página HTML resultante do processamento desta estrutura conterá a grid com dados de clientes.

Listagem 6: View Index.cshtml

@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>Exemplo de utilização de grid -
                    plugin Backgrid.js</h1>
            </hgroup>
        </div>
    </section>
}
<link rel="stylesheet" href="~/Content/backgrid.css" />
<link rel="stylesheet" href="~/Content/backgrid-paginator.css" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/underscore.js"></script>
<script src="~/Scripts/backbone.js"></script>
<script src="~/Scripts/backgrid.js"></script>
<script src="~/Scripts/backbone-pageable.js"></script>
<script src="~/Scripts/backgrid-paginator.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        var Cliente = Backbone.Model.extend({});

        var PageableClientes = Backbone.PageableCollection.extend({
            model: Cliente,
            url: "/Cliente/ObterInformacoesClientes",
            state: {
                pageSize: 7
            },
            mode: "client"
        });

        var clientes = new PageableClientes();

        var columns = [
            {
                name: "CodCliente",
                label: "Código",
                cell: "string",
                editable: false
            },
            {
                name: "NomeCliente",
                label: "Cliente",
                cell: "string",
                editable: false
            },
            {
                name: "Responsavel",
                label: "Responsável",
                cell: "string",
                editable: false
            },
            {
                name: "Endereco",
                label: "Endereço",
                cell: "string",
                editable: false,
                sortable: false
            },
            {
                name: "Cidade",
                label: "Cidade",
                cell: "string",
                editable: false
            },
            {
                name: "Pais",
                label: "País",
                cell: "string",
                editable: false
            },
            {
                name: "Telefone",
                label: "Telefone",
                cell: "string",
                editable: false,
                sortable: false
            }
        ];

        // Inicializa uma instância da grid
        var grid = new Backgrid.Grid({
            columns: columns,
            collection: clientes,
            footer: Backgrid.Extension.Paginator
        });

        // Inicia a renderização da grid
        $("#gridClientes").append(grid.render().$el);

        // Obtém os dados acionando ClienteController
        clientes.fetch();

    });

</script>
<h3>Clientes cadastrados</h3>
<div id="gridClientes">
</div>

Basicamente, a construção de grids através do plugin Backgrid.js envolve o uso de algumas bibliotecas Javascript, além de folhas de estilo CSS empregadas na renderização destes controles. Conforme pode ser observado no início da Listagem 6, estão sendo referenciados:

• Os arquivos de estilo backgrid.css e backgrid-paginator.css, os quais definem como serão a aparência de grids com paginação ao se empregar a biblioteca Backgrid.js;
• A biblioteca de scripts JQuery (arquivo jquery-1.7.1.js);
• As bibliotecas Underscore.js (arquivo underscore.js) e Backbone.js (arquivo backbone.js), as quais formam a base a partir da qual o plugin Backgrid.js foi concebido;
• A própria biblioteca Backgrid.js (arquivo backgrid.js), além dos mecanismos para a paginação de resultados em grids (arquivos backbone-pageable.js e backgrid-paginator.js).

Quanto às instruções que irão gerar a grid com informações de clientes, notam-se os seguintes pontos:

• Inicialmente é criada uma classe Javascript de nome Cliente (via instrução Backbone.Model.extend), a qual corresponde ao modelo (uma espécie de "classe de dados") utilizado na manipulação dos diferentes objetos/registros serializados no formato JSON;
• Já a classe PageableClientes (gerada através da instrução Backbone.PageableCollection.extend) será empregada em operações que envolvam a paginação da coleção de objetos contendo informações de clientes. Para tanto, foram informados na criação deste tipo a classe de modelo (parâmetro "model"), o endereço para se obter os dados no formato JSON (parâmetro "url"), o número de registros a serem exibidos por página (parâmetro "pageSize"), além do local em que ocorrerá a paginação dos registros (parâmetro "mode"; o valor "client" indica que este processo acontecerá do lado cliente, ou seja, a partir do browser do usuário);
• As configurações das diferentes colunas que farão parte da grid estão vinculadas ao array de nome "columns". Para a geração dos objetos vinculados a este último, estão sendo preenchidos os parâmetros "name" (nome da propriedade/campo da instância serializada no formato JSON), "label" (texto que aparecerá no cabeçalho da grid), "cell" (tipo da coluna), "editable" (indica se a coluna será ou não editável; o default é o valor "true") e "sortable" (define se haverá ou não a possibilidade de ordenação para uma determinada coluna; o valor default para esta configuração também é "true");
• Uma instância da grid será então criada por meio da instrução Backgrid.Grid. Para isto, foram preenchidos os parâmetros "columns" (configurações das colunas visíveis na grid), collection (instância do tipo PageableClientes) e "footer" (controle de página que ficará no rodapé da grid);
• A invocação do método render a partir da instância da grid fará com que se produza o código HTML para este controle; já a chamada ao método fetch da coleção contendo informações de clientes preencherá a grid, além de levar em conta questões como as funcionalidades de paginação e ordenação de valores.

Executando a aplicação de testes

Iniciando a execução do site de testes, será exibida uma tela como a que consta na Figura 4; as informações sobre clientes já se encontram devidamente paginadas neste momento.

Figura 4: Aplicação em execução

Na Figura 5 é apresentado um exemplo em que os dados estão ordenados de maneira decrescente (neste caso, por nome de cliente).

Figura 5: Teste envolvendo a ordenação decrescente dos dados

Por fim, a Figura 6 demonstra o uso da funcionalidade de paginação. Importante salientar que o uso deste recurso e ainda, a execução do processo de ordenação, não forçam a execução de uma nova consulta à base (estas ações são realizadas sobre os dados no formato JSON obtidos uma única vez, com isso acontecendo durante o carregamento da página).

Figura 6: Testando a funcionalidade de paginação

Conclusão

Procurei com este artigo demonstrar como empregar o plugin Backgrid.js para a construção de grids em aplicações ASP.NET MVC. Para situações que contemplem um pequeno volume de informações, esta biblioteca de scripts pode se revelar como bastante útil na exibição/manipulação de dados num formato tabular.

Entretanto, alternativas diferentes precisarão ser buscadas em cenários que envolvam a utilização de grandes massas de dados. A seguir estão listadas outras opções de bibliotecas/suítes de componentes que permitem a utilização de grids em conjunto com o framework MVC :

• Ext.NET;
• Kendo UI;
• DevExpress MVC Extensions;
• WebGrid.

Com exceção do plugin WebGrid que é disponibilizado gratuitamente pela própria Microsoft, todas as demais opções citadas envolvem a aquisição de uma licença junto aos seus respectivos fornecedores

Espero que o conteúdo aqui apresentado possa lhe ser útil em algum momento. Até uma próxima oportunidade!