Conheça o Júlio Battisti

Julio Battisti - Autor de mais de 25 livros de informática Júlio Battisti tem mais de 50 livros publicados, centenas de e-books e é certificado Microsoft.

SAIBA MAIS...

Loja Virtual do Site

Curta Nossa Fanpage

« Lição anterior

Δ Página principal

¤ Capítulos

Próxima lição »

ASP.NET - CURSO COMPLETO
Autor: Júlio Battisti

Lição 097 - Capítulo 11 - Implementando paginação com o controle DataGrid

No Capítulo 10 descrevemos o conceito de paginação e vimos que para habilitar a paginação, devemos definir a propriedade AllowPaging como True. Neste tópico veremos como fazer com que a paginação funcione, ou seja, quando o usuário clica em no link Próxima Página ou no número da próxima página, faremos com que seja exibido o próximo conjunto de registros.

Ao tornarmos a propriedade AllowPaging igual a True, será criada mais uma linha, no final do DataGrid. Nesta linha podemos exibir um link para a próxima página e para a página anterior ou a numeração de página: 1 2 3 4 5 6 7 8 9 10 ...; onde cada número é um link para a página respectiva. Podemos personalizar o que é exibido nesta linha que chamaremos de Barra de Navegação. Por padrão os links de navegação são alinhados à esquerda, no DataGrid.

Cada vez que o usuário clica em um dos links da Barra de Navegação, é disparado o evento PageIndexChanged. Ao criarmos o DataGrid definimos a propriedade PageIndexChanged com o nome do procedimento que será executado em resposta ao evento. Neste procedimento colocaremos o código para navegar para a página relacionada ao link clicado pelo usuário.

Em resumo, para fazer paginação com o DataGrid, devemos fazer o seguinte:

Definir a propriedade AllowPaging como True.
Definir o nome do procedimento que será executado em resposta ao evento PageIndexChanged.
Criar o código do procedimento que executa em resposta ao evento OnIndexChanged.

Para definir as características da linha onde são exibidos os links de navegação, nos fazemos uso das propriedades PagerStyle-Definição, do controle DataGrid. Por exemplo, para alinhar os links de navegação à direita, nos definimos a seguinte propriedade:

PagerStyle-HorizontalAlign=”Right”

Na Tabela 11.4 temos a definição das principais características da Barra de Navegação, que podem ser configuradas com a propriedade PagerStyle.

Propriedade	Utilizada Para Definir...
PagerStyle-BackColor	A cor de segundo plano.
PagerStyle-BorderColor	A cor das bordas.
PagerStyle-BorderWidth	O tamanho das bordas.
PagerStyle-Font	Características da fonte (Negrito, Itálico, etc).
PagerStyle-ForeColor	A cor da fonte.
PagerStyle-Mode	Define se serão exibidos links “Próximo” e “Anterior”, ou se um link para o número de cada página. O valor padrão é NextPrev, o que faz com que sejam exibidos os botões “Próximo” e “Anterior”. Se definirmos o valor desta propriedade como NumericPages, serão exibidos links para o número de cada página.
PagerStyle-NextPageText	O texto para o link que navega para a próxima página.
PagerStyle-PrevPageText	O texto para o link que navega para a página anterior.
PagerStyle-Position	Define a posição da Barra de Navegação. Pode ser Bottom – barra no final do DataGrid, que é o valor padrão, Top – barra no início do DataGrid ou TopAndBottom – barra no início e no final do DataGrid.

Tabela 11.4 Configurações da propriedade PagerStyle.

Para definir o número de linhas por página, utilizamos a propriedade PageSize. Por exemplo, o seguinte comando define que sejam exibidos quinze registros por página:

PageSize=”15”

Vamos apresentar um exemplo.

Exemplo: Vamos criar um exemplo, onde retornamos o nome de todos os clientes da tabela Clientes, do banco de dados Northwind.mdb. Dividiremos os registros em páginas de dez registros. Utilizaremos o modo padrão, onde é exibido um link “Próxima Página ->>” (com exceção da última página, quando este link estará desabilitado) e um link “<<- Página Anterior” (com exceção da primeira página, quando este link estará desabilitado). Utilizaremos algumas propriedades da Tabela 11.4 para personalizar a aparência da Barra de Navegação.

Na Listagem 11.10 temos o código para o exemplo proposto.

Listagem 11.10 – Paginação com o controle DataGrid.

<%@ Import Namespace="System.Data"  %>

<%@ Import  Namespace="System.Data.OleDb" %>

<html>

<script language="C#"  runat="server">

void Page_Load(Object Src, EventArgs E )

     if  (!Page.IsPostBack)

               MinhaGrade.CurrentPageIndex = 0;

               BuscaDados();

   void BuscaDados()

      // Crio uma conexão com o banco de dados  do Microsoft Access.

      // C:\Meus documentos\NorthWind.mdb.

      String DefineConexão= "PROVIDER=MICROSOFT.JET.OLEDB.4.0;"  +

                                       "DATA SOURCE=c:\\meus  documentos\\NorthWind.mdb";

      OleDbConnection  MinhaConexão = new OleDbConnection(DefineConexão);

            // Utilizamos um objeto  DataAdapter para executar um comando SQL,

            // o qual retorna as cidades da  Alemanha.

      String aux1SQL;

       String aux2SQL;

      String ComandoSQL;

      aux1SQL= "SELECT  CódigoDoCliente,NomeDaEmpresa,Cidade,País,Telefone ";

      aux2SQL=   "FROM Clientes Order By CódigoDoCliente";

      ComandoSQL= aux1SQL + aux2SQL;

   OleDbDataAdapter MeuComando = new  OleDbDataAdapter(ComandoSQL, MinhaConexão);

// Criamos e preenchemos um objeto DataSet.

       DataSet ds = new DataSet();

            // Utilizo o método Fill do  objeto DataAdapter, para preencher

            // o objeto DataSet, com os dados  retornados pelo comando SQL.

            MeuComando.Fill(ds);

            // Criamos um objeto DataView ligado  com a primeira

            // tabela, da coleção de tabelas, do  objeto ds.

            DataView source = new DataView(ds.Tables[0]);

                  // Ligo o objeto DataView a um controle  do tipo

      //  DataGrid - MinhaGrade.

MinhaGrade.DataSource  = source;

            MinhaGrade.DataBind();

            //  Procedimento que faz a navegação para a próxima página

            //  ou para a página anterior, dependendo do link clicado

            //  pelo usuário.

   void TrocaPagina(Object sender,  DataGridPageChangedEventArgs e)

            MinhaGrade.CurrentPageIndex=e.NewPageIndex;

            BuscaDados();

</script>

<body>

<h3><font  face="Verdana">Paginação com ASP.NET!!!</font></h3>

<form runat=server>

 <HR>

                <ASP:DataGrid

                                    id="MinhaGrade"

                                    runat="server"

                                    CellPadding=3

                                    CellSpacing="0"

                                    Font-Name="CourierNew"

                                    Font-Size="10pt"

                                    HeaderStyle-BackColor="#aaaadd"

                                    MaintainState="false"

                                    AllowPaging="True"

                                    OnPageIndexChanged="TrocaPagina"

                                    PageSize="10"

                                    PagerStyle-Position="TopAndBottom"

                                    PagerStyle-NextPageText="Próxima  Página ->>"

                                     PagerStyle-PrevPageText="<<- Página Anterior"

                                    PagerStyle-Font-Bold="True"

                                    PagerStyle-Font-Size="12pt"

                                    PagerStyle-BackColor="#c0c0c0"

/>

 <HR>

</form>

</body>

</html>

Digite o código da Listagem 11.10 e salve o mesmo em um arquivo chamado chap11ex10aspx, na pasta chap11, dentro da pasta wwwroot, conforme descrito no item: “Check List para acompanhar os exemplos deste livro”, no Capítulo 6.

Para acessar esta página utilize o seguinte endereço:

http://localhost/chap10/chap11ex10aspx

Será exibida uma listagem com os 10 primeiros clientes. Observe que temos links para a próxima página e para a página anterior, no início e no final do DataGrid, conforme indicado na Figura 11.12.

Curso Completo de ASP.NET - Júlio Battisti
Figura 11.12 Listagem de Clientes dividida em páginas.

Clique no link “Próxima Página ->>” e observe que são exibidos os próximos dez clientes. Também observe que o link “<<- Página Anterior” foi habilitado., conforme indicado na Figura 11.13.

Curso Completo de ASP.NET - Júlio Battisti
Figura 11.13 Navegando com o controle DataGrid.

Comentários sobre o código do exemplo Chap11ex8.aspx:

Na definição do DataGrid utilizamos uma série de propriedades para a definição dos aspectos visuais da barra de navegação. Estas propriedades estão descritas na Tabela 11.4. Uma propriedade interessante é a propriedade Mode, que por padrão tem o valor NextPrev. Se alterarmos o seu valor para NumericPages, ao invés do link Próximo e do link Anterior, teremos diversos links, um para cada página do DataGrid. Vamos alterar a definição do DataGrid, para que a mesma fique da seguinte maneira:

<ASP:DataGrid

                                    id="MinhaGrade"

                                    runat="server"

                        CellPadding=3

                                    CellSpacing="0"

                                    Font-Name="CourierNew"

                                    Font-Size="10pt"

                                    HeaderStyle-BackColor="#aaaadd"

                                    MaintainState="false"

                                    AllowPaging="True"

                                    OnPageIndexChanged="TrocaPagina"

                                    PageSize="10"

                                    PagerStyle-Position="TopAndBottom"

                                    PagerStyle-Mode="NumericPages"

                                    PagerStyle-Font-Bold="True"

                                    PagerStyle-Font-Size="12pt"

                                    PagerStyle-BackColor="#c0c0c0"

/>

Se fizermos estas alterações e recarregarmos a página, obteremos o resultado indicado na Figura 11.14.

Curso Completo de ASP.NET - Júlio Battisti
Figura 11.14 PagerStyle-Mode=”NumericPages”.

No evento Page_Load detectamos se não é um PostBack (isto acontece quando a página está senda carregada pela primeira vez); caso não seja um PostBack, definimos a página atual como sendo a primeira página e executamos o procedimento BuscaDados:

MinhaGrade.CurrentPageIndex = 0;

      BuscaDados();

A definição da página atual é feita com o uso da propriedade CurrentPageIndex, do DataGrid. A primeira página é a página zero, a segunda é a página um e assim por diante.

O procedimento BuscaDados é idêntico ao utilizado em exemplos anteriores e, portanto, dispensa maiores comentários.
O procedimento TrocaPagina é definido na propriedade OnPageIndexChanged, do DataGrid:

OnPageIndexChanged="TrocaPagina"

O evento OnPageIndexChanged é disparado toda vez que o usuário clica em um dos links de navegação. O procedimento TrocaPagina recebe um argumento do tipo DataGridPageChangedEventArgs. Chamamos este argumento de e. Este argumento é uma instância da classe DataGridPageChangedEventArgs, do namespace System.Web.UI.WebControls. Quando clicamos em um dos links de navegação, o índice da página para a qual aponta o link pode ser acessado através da NewPageIndex deste argumento. Atribuímos o valor contido nesta propriedade para a propriedade CurrentPageIndex do DataGrid. O efeito prático é carregar a página do DataGrid, cujo índice é o mesmo definido na propriedade NewPageIndex .

Observe que, simplesmente, com a definição de uma propriedade e um procedimento de duas linhas, implementamos paginação no ASP.NET, o que com ASP 3.0 demandaria uma boa quantidade de código.