ASP.NET MVC + Flexigrid ( Parte 1 ) – Entendendo, Criando e Renderizando o Grid

Standard

Flexigrid?

Para que não conhece, o Flexigrid é uma biblioteca jQuery gratuita que possibilita de uma forma bem simples e fácil o trabalho com Grids. Sabemos que atualmente existem diversos plugins de grid que possibilitam a implementação com aplicações MVC, porém, gosto muito do Flexigrid, pois ele é bem leve, robusto, simples, fácil, extremamente eficiente e além disso tudo ele é Free.

O Download do Flexigrid pode ser feito aqui.

Criando e configurando o projeto

Vamos criar um novo projeto MVC e adicionar um novo arquivo EDMX para trabalharmos com Entity Framework. Para o exemplo irei estar utilizando uma tabela de Clientes chamada tbClientes que possui apenas duas colunas: codCliente e nome.

Em seguida vamos criar um diretório na raiz do projeto chamado Helpers e outro dentro do diretório Scripts chamado Flexigrid, até o momento seu projeto deve estar como a imagem abaixo:

Imagem 1

Após efetuar o download do Flexigrid extraia os diretórios js e css para dentro do diretório /Scripts/Flexigrid, como mostrado abaixo:

Imagem 2

Agora em nossa Master Page vamos arrastar os arquivos flexigrid.pack.css, flexigrid.pack.js e jquery-1.4.1.min.js para dentro da tag Head. Após criaremos um novo ContentPlaceHolder chamado HeadContent como abaixo:

Imagem 3

NOTA: Estou utilizando a versão 1.4.1 do jQuery, porém você pode utilizar a de sua preferência.

Configurando o Script/View

Em nossa view Index adicione o seguinte código HTML:

<div>
   <table id="flexigrid"></table>
</div>

Em seguinda adicione o seguinte script dentro do HeadContent criado anteriormente:

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">

    <script type="text/javascript">
        $(document).ready(function () {

            var grid = $("#flexigrid").flexigrid(
                {
                    url: '/Home/CarregaFlexgrid', //Caminho onde será ontido as informações para renderização do grid
                    dataType: 'json', //Tipo de retorno da requisição
                    colModel: //Cria as colunas
			            [
				            { display: 'Código', name: 'codCliente', width: $(document).width() * 0.10, sortable: false, align: 'center' },
				            { display: 'Nome', name: 'nome', width: $(document).width() * 0.50, sortable: false, align: 'left' }
				        ],
                    title: 'GRID DE CLIENTES' //Título do grid
                });

        });
    </script>

</asp:Content>

NOTA: Observe que a propriedade width das colunas está definido como $(document).width() * 0.10, isso deve-se ao fato de estar definindo uma largura por percentual, no caso 10%.

Configurando o método de preenchimento

Como definimos na propriedade url do flexigrid o valor ‘/Home/CarregaFlexgrid‘, devemos agora cria-lo para efetivamente realizar o preenchimento do grid, com suas devidas colunas e linhas.

Dentro do diretório Helpers vamos criar uma classe chamada Flexigrid.cs e adicionar o seguinte código:

namespace FlexigridComMVC.Helpers
{
    public class Flexigrid
    {
        public int page;
        public int total;
        public List<FlexigridLinha> rows = new List<FlexigridLinha>();
    }
    public class FlexigridLinha
    {
        public long id;
        public List<string> cell;
    }
}

NOTA: Observer que criamos duas classes, uma para a representação do Grid e outra para as linhas.

Agora vamos criar o método CarregaFlexgrid dentro do HomeController:

public ActionResult CarregaFlexgrid()
{
    //Parâmetros recebidos do Flexigrid
    int indicePaginaAtual = Convert.ToInt32(Request.Params["page"]);
    int itensPorPagina = Convert.ToInt32(Request.Params["rp"]);

    //IQueryable de Clientes
    var listaClientes = from c in _db.Cliente select c;

    //Realiza a ordenação e paginação
    var listaPaginada = listaClientes.OrderBy(c => c.nome)
                                        .Skip((indicePaginaAtual - 1) * itensPorPagina)
                                        .Take(itensPorPagina);

    //Cria instância do Flexgrid informando o número da página atual e a quantidade de clientes existentes
    Flexigrid flexigrid = new Flexigrid { page = indicePaginaAtual, total = listaClientes.Count() };

    //Para cada cliente cria uma linha no grid
    foreach (var item in listaPaginada)
    {
        flexigrid.rows.Add(new FlexigridLinha
        {
            //id da linha - opcional
            id = item.codCliente,

            //celulas da linha - cada string representa uma coluna em nosso grid
            //(deve estar na mesma ordem das colunas definidas em nosso script)
            cell = new List<string>
            {
                item.codCliente.ToString(),
                item.nome
            }
        });
    }

    //Retona a instância do Flexigrid em formato Json
    return Json(flexigrid);
}

NOTA: Resumidamente fiz um comentário para cada linha do código explicando cada parte do processo. Atente-se para a paginação (onde explico aqui como fazer) e como é criado os itens na lista de string dentro da classe FlexigridLinha, onde a mesma ordem que é colocada aqui deve ser colocada no script.

Pronto, se rodarmos nossa aplicação teremos o grid renderizado perfeitamente:

Imagem 4

 

Efetue o Download do projeto aqui.

5 thoughts on “ASP.NET MVC + Flexigrid ( Parte 1 ) – Entendendo, Criando e Renderizando o Grid

    • rafaelzaccanini

      Olá João,

      Primeiramente muito obrigado 🙂

      Já estou preparando os seguintes, serão na seguinte ordem:

      – ASP.NET MVC + Flexgrid – Habilitando e configurando a ordenação
      – ASP.NET MVC + Flexgrid – Abilitando e configurando a busca
      – ASP.NET MVC + Flexgrid – Criando botões (manipulação dos registros)
      – ASP.NET MVC + Flexgrid – Configurações adicionais

      Mais uma vez obrigado!

  1. Saulo

    Olá Rafael, legal suas dicas. Mas tenho um problema não sei se pode me ajudar. Eu desenvolvi um WebService (asmx) que retorna o xml e preenche o FlexiGrid. Funcionou normalmente quando rodo na minha máquina local, só que quando publico no cliente e chamo de uma máquina qualquer o WebService nem é chamado. Dá erro 500, peguei esse exemplo (http://www.codeproject.com/Articles/28615/How-To-Use-ASP-NET-Web-Service-with-FlexiGrid).
    Dá erro só quando publico e chamo de uma máquina externa, o mesmo aplicativo publicado chamado pelo browser do server que está a aplicação funciona.. Você tem alguma ideia do que possa ser?

    • rafaelzaccanini

      Olá Saulo,

      Cara, se você acessar pela URL do browser, o erro é o mesmo?

      Tente o seguinte, no seu Web.Config adicione o seguinte bloco:






      Isto pois, os protocolos GET e POST são desabilitados por padrão desde o
      Framework 1.1, onde apenas o HttpPostLocalhost vem habilitado por default para WebServices.
      Acredito que por isso você tenha conseguido acessar apenas localmente.

Leave a Reply

Your email address will not be published. Required fields are marked *