Paginação no Gridview

Neste artigo mostro como usar a paginação do Gridview do ASP.NET, o código-fonte estará disponível ao final do mesmo.

Para este exemplo (e para os futuros também) utilizarei o banco de dados de exemplo Northwind, do SQL Server 2000, disponível neste link.

Após ter criado seu projeto Web e adicionado o Gridview a sua página veja como ele deve ficar, no ASPX:

<asp:GridView ID="grdProdutos" runat="server" AutoGenerateColumns="false" AllowPaging="true" OnPageIndexChanging="grdProdutos_PageIndexChanging">
            <Columns>
                <asp:BoundField DataField="ProductID" HeaderText="Código" />
                <asp:BoundField DataField="ProductName" HeaderText="Produto" />
                <asp:BoundField DataField="UnitsInStock" HeaderText="Unidades no Estoque" />
            </Columns>
        </asp:GridView>

Criei o grid para trazer apenas as colunas ProductID, ProductName e UnitsInStock, da tabela Products, já que o foco é a paginação e não os dados retornados.

Note que usei a propriedade AllowPaging setado como True, isso é obrigatório para termos nossa paginação no Grid. Chamei também o evento PageIndexChanging, que será disparado toda vez que o usuário trocar a página do Grid.

Inicialmente faça sua lógica para trazer os dados do banco e popule o gridview com estes dados. Fiz a minha no método abaixo, confira:

private List<Produtos> CarregarProdutos()
        {
            List<Produtos> listaRetorno = new List<Produtos>();
            using (SqlConnection objConexao = new SqlConnection(conexaoSQL))
            {
                string instrucaoSql = "SELECT ProductID, ProductName, UnitsInStock FROM PRODUCTS";
                using (SqlCommand objCommand = new SqlCommand(instrucaoSql, objConexao))
                {
                    try
                    {
                        objConexao.Open();
                        SqlDataReader reader = objCommand.ExecuteReader();
                        if (reader.HasRows)
                        {
                            while (reader.Read())
                            {
                                Produtos modelo = new Produtos();
                                modelo.ProductID = Convert.ToInt32(reader["ProductID"].ToString());
                                modelo.ProductName = reader["ProductName"].ToString();
                                modelo.UnitsInStock = Convert.ToInt32(reader["UnitsInStock"].ToString());
                                listaRetorno.Add(modelo);
                            }

                        }
                    }
                    catch
                    {
                        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "Aviso", "alert('Erro no método!');", true);
                    }
                    finally
                    {
                        objConexao.Close();
                    }
                }
            }
            return listaRetorno;
        }

A classe Products:

private class Produtos
        {
            public int ProductID { get; set; }
            public string ProductName { get; set; }
            public int UnitsInStock { get; set; }
        }

Importante: inicialmente eu coloquei as propriedades acima com o modificador de acesso private mas o problema é que meu método não conseguia acessá-las, já que como private ele é “enxergado” apenas dentro da classe Produtos. Então pensei em alterá-lo para internal, dessa forma consegui usar as propriedades no método. O problema: o internal é enxergado apenas entre os códigos e não consegue ser atribuído para as colunas do Gridview. Tentei rodar a aplicação desta forma e olha o erro que estourou:

 ExceçãoPropriedades

Então a solução foi deixar as propriedades como public, dessa forma elas são enxergadas tanto nos códigos quanto no ASPX.

Continuando com a codificação, meu outro método é o PopularGrid que basicamente chama o método criado anteriormente e efetivamente popula o grid (separei em métodos para evitar confusão, assim cada método faz o que o seu nome aponta, isso na verdade é uma boa prática de programação):

private void PopularGrid()
        {
            var listaProdutos = this.CarregarProdutos();
            grdProdutos.DataSource = listaProdutos != null && listaProdutos.Count > 0 ? listaProdutos : null;
            grdProdutos.DataBind();
        }

Note que faço um ternário para verificar se a lista é diferente de nula (e assim evitar uma possível exceção), se ela for eu a atribuo para o datasource do Grid, não sendo atribuo null mesmo.

Agora o mais importante: codifique o evento criado no Gridview acima. Veja como é bem simples:

protected void grdProdutos_PageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            grdProdutos.PageIndex = e.NewPageIndex;
            this.PopularGrid();
        }

Veja como o ASP.NET é poderosíssimo, em apenas 2 linhas conseguimos criar a paginação.

Rodando a aplicação temos o resultado.

 PaginaçãoNoGrid

Um último detalhe: podemos definir quantos registros por linha iremos usar no Gridview (por padrão são 10), para isso basta alterarmos a propriedade PageSize, por exemplo, definindo o PageSize lá no ASPX para 15 veja o resultado:

 PaginaçãoNoGridCom15

É claro que temos muito mais recursos para utilizar deixando a paginação melhor ainda, mas aí vai da criatividade e necessidade de cada um.

O código-fonte para download está disponível neste link, caso queira baixar outros 58 projetos veja este artigo.

Obrigado, abraços e até o próximo post.

3 comentários em “Paginação no Gridview

    1. Olá, tem como sim. Realmente, não tem nenhum exemplo desse tipo aqui no blog, muito bem pensado!

      Assim que fizer, sendo em vídeo ou texto eu posto aqui, fique de olho.

      Se puder assine o feed RSS do blog, é grátis e te avisa toda vez que um post novo for feito por aqui.

      Abraço.

      Curtir

Expresse sua opinião!

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s