Pagina��o com DataList em ASP.NET

Nos �ltimos anos as tecnologias voltadas para a Internet experimentaram um grande avanço, incluindo a pr�pria, tornando-se mais r�pida e capaz de fornecer recursos antes n�o poss�veis atrav�s da rede. Al�m disso, a crescente descentralizaç�o dos serviços de computaç�o e o desenvolvimento de sistemas de gest�o e outras aplicaç�es empresariais capazes de serem executadas atrav�s da rede mundial de computadores cresceram. Da� surgiu tamb�m um problema: como fazer com que estas aplicaç�es forneçam a seus usu�rios tanta facilidade, desempenho e usabilidade quanto as aplicaç�es desktop? A soluç�o surgiu t�o r�pido quanto a pr�pria necessidade.

Permitir que os usu�rios de sistemas web tenham as mesmas facilidades encontradas em sistemas desktop, principalmente no que se refere � navegaç�o, � garantir que suas aplicaç�es alcancem patamares mais elevados de qualidade e aceitaç�o. Um dos principais gargalos do desenvolvimento de aplicaç�es web � justamente a performance, o que ser� melhorado aplicando-se as t�cnicas descritas neste artigo.

Neste artigo discutiremos uma dessas soluç�es, que � a capacidade de paginaç�o atrav�s do componente DataList. Basicamente, busca-se atrav�s deste componente apresentar ao usu�rio de um sistema web somente uma quantidade limitada de informaç�es por p�gina, permitindo a construç�o autom�tica de uma sequ�ncia num�rica que o permita acessar os demais dados, de acordo com algumas restriç�es definidas pelo desenvolvedor. Assim, garantimos que uma quantidade vi�vel de dados ser� apresentada ao usu�rio, otimizando o tr�fego de dados e melhorando a navegabilidade pelos dados requisitados atrav�s da aplicaç�o web.

Paginaç�o com DataList

Um Datalist � um componente de software (n�o exclusivo das tecnologias Microsoft), que exibe uma s�rie de dados em um formato no qual o desenvolvedor pode definir como ser� seu uso, modelos e estilos. Os dados desse componente n�o obrigatoriamente devem advir de uma base de dados, podendo ser originados de qualquer tipo de arquivo ou inseridos de forma �manual�. Este componente oferece uma s�rie de recursos �s aplicaç�es que dele fazem uso como, por exemplo, diferentes layouts para apresentaç�o dos dados nele contidos atrav�s da apresentaç�o em linhas, ordenaç�o por linhas ou colunas.

Quando utilizamos um Datalist organizamos os dados de forma que, ao serem requisitados, somente parte destes dados sejam efetivamente apresentados ao usu�rio em uma �nica p�gina, sendo que, havendo necessidade de acessar os demais dados, este usu�rio contar� com um �ndice (geralmente num�rico), que permite acesso aos demais dados de forma gradativa, sempre respeitando um limite m�ximo por apresentaç�o. A Figura 1 apresenta um esquema que permite melhor entendimento sobre o que foi dito.

Figura 1. Exemplo de Paginaç�o com Datalist

Como o componente Datalist n�o possui suporte nativo ao recurso de paginaç�o, logo se torna necess�rio escrever os procedimentos de armazenamento de dados, bem como desenvolver um controle personalizado de paginaç�o.

Mas como implementar uma paginaç�o em ASP.NET utilizando o Datalist, uma vez que este componente n�o apresenta recurso nativo � paginaç�o e tamb�m n�o herda a interface IPageableItemContainer, como o ListView, com o qual pode-se utilizar o controle DataPager?

Uma das opç�es � personalizando o banco de dados, armazenando no mesmo uma stored procedure que, a partir dos registros dispon�veis, retorna para a aplicaç�o somente uma quantidade espec�fica de dados. Assim sendo, caso a tabela em quest�o tenha um total de 1000 registros, e para apresentaç�o o desenvolvedor queira apresentar somente 50 registros por p�gina, logo ser� necess�rio buscar esses tendo como base o �ndice da p�gina, aumentando o desempenho da aplicaç�o.

Recursos

Para os exemplos deste artigo foram utilizados os seguintes recursos: Microsoft Visual Studio Express, Microsoft SQL Server Express e uma base de dados exemplo fornecida pela pr�pria Microsoft (Northwind), que est� presente no c�digo fonte desse artigo.

Criando a Stored Procedure de Paginaç�o

Antes de aplicar a paginaç�o �s aplicaç�es WEB, recomenda-se a adaptaç�o da base de dados. � importante ressaltar que, a partir de sua vers�o 2005, o SQL Server tr�s consigo a palavra-chave ROW_NUMBER(), um recurso que permite recuperar o n�mero da linha do registro selecionado, facilitando a implementaç�o da l�gica de paginaç�o personalizada atrav�s da utilizaç�o de Stored Procedures no SQL Server.

No banco de dados que estamos utilizando existe uma tabela custumers (ou clientes). Nela vamos criar a nossa stored procedure usando o c�digo da Listagem 1.


CREATE PROCEDURE [dbo].[RecuperaClientes]
@PageIndex INT = 1,
@PageSize INT = 10,
@RecordCount INT OUTPUT
AS
BEGIN
SET NOCOUNT ON;
SELECT ROW_NUMBER() OVER 
(
ORDER BY [CustumerID] ASC
AS RowNumber,
[CustumerID],
[CompanyName],
[ContactName],
[City],
[Country],
[Phone],
[Fax],
[PostalCode]
INTO # Resultados
FROM [Custumers]
SELECT @RecordCount = COUNT(*)
FROM # Resultados

SELECT * FROM # Resultados
WHERE RowNumber BETWEEN(@PageIndex � 1) * @PageSize 
AND (((@PageIndex � 1 * @PageSize) + @PageSize) � 1
DROP TABLE # Resultados
END

Listagem 1. C�digo da Stored Procedure da Paginaç�o

Começamos o c�digo com a assinatura da Stored Procedure usando o nome RecuperaClientes e nela criamos os par�metros de entrada. Por padr�o, caso n�o sejam informados, os valores dos par�metros PageIndex e PageSize s�o 1 e 10, respectivamente. Na linha 4 tem-se o par�metro de sa�da que indica a quantidade de registros que ser�o apresentados na p�gina.

J� na linha 7 temos o comando set nocount on, que desativa a contagem de registros feita sempre que � executada uma instruç�o SQL dentro de uma Stored Procedure, desta forma evita-se o excesso de tr�fego durante a sua execuç�o. Em seguida retornamos o total de linhas do select realizado sobre a tabela Custumers. Repare que na linha 20 indicamos que o resultado desta seleç�o ser� armazenado na tabela tempor�ria Resultados.

A linha 22 realiza uma nova seleç�o procurando recupera o n�mero de registros da tabela Resultados e em seguida armazena no par�metro de sa�da RecordCount. Na linha 25 realizamos outra seleç�o na tabela Resultados, s� que dessa com uma restriç�o do retorno. E ao final exclu�mos a tabela Resultados.

Figura 2. Esquema de funcionamento da Listagem 1

Preparando a p�gina do cliente

Uma iniciativa da Microsoft que deve-se ressaltar � sua vis�o democr�tica quanto ao desenvolvimento, o que significa que, para desenvolver aplicaç�es web utilizando seus recursos mais modernos pode-se escolher entre as linguagens C# e VB.Net: todas s�o aceitas para o desenvolvimento de aplicaç�es ASP.NET. Por este motivo, neste artigo apresentaremos as duas formas de implementaç�o.

Para iniciar devemos importar algumas bibliotecas ou namespaces na p�gina onde ser�o apresentados os dados. As Listagens 2 e 3 apresentam o c�digo necess�rio nas linguagens C# e VB.net, respectivamente.


using System.Data;
using System.Data.SqlClient;
using System.Configuration;

Listagem 2. Namespaces no C#


imports System.Data;
imports System.Data.SqlClient;
imports System.Configuration;

Listagem 3. Namespaces no VB.Net

Em ambas as listagens importamos as bibliotecas necess�rias para conex�o, manipulaç�o e configuraç�o de dados.

Seguindo o prop�sito deste artigo, � necess�rio algum c�digo HTML simples usando um DataList para preenchimento dos registros de clientes e um controle Repeater, como mostra a Listagem 4.


<asp:DataList ID="dlCustomers" runat="server" 
RepeatDirection="Horizontal" RepeatColumns="3">
<ItemTemplate>
<table cellpadding="2" cellspacing="0" class="Item">
  <tr>
      <td class="header">
          <b><u>
              <%# Eval("ContactName") %></u></b>
      </td>
  </tr>
  <tr>
     <td class="body">
          <b>City: </b>
          <%# Eval("City") %><br />
          <b>Postal Code: </b>
          <%# Eval("PostalCode") %><br />
          <b>Country: </b>
          <%# Eval("Country") %><br />
          <b>Phone: </b>
          <%# Eval("Phone") %><br />
          <b>Fax: </b>
          <%# Eval("Fax") %>
      </td>
  </tr>
</table>
</ItemTemplate>
</asp:DataList>

Listagem 4. HTML para apresentaç�o dos dados

Começamos com alguns comandos b�sicos para implementaç�o e integraç�o dos recursos ASP.NET em um c�digo HTML, no caso os componentes asp (com o comando asp) seguido da definiç�o de um objeto DataList. Lembrando que todo script referente ao .NET Framework ser� executado no servidor, por isso definimos o modo de repetiç�o como horizontal e limitado a um m�ximo de tr�s colunas por linha.

Na linha 7 inserimos o comando que retorna o valor do campo ContactName, que � recuperado diretamente do objeto DataList. Nas demais linhas temos os c�digos HTML que regem o formato de apresentaç�o dos dados.

Devido as diferenças entre as sintaxes da linguagem C# e VB.Net, a segunda parte do c�digo foi dividida em duas listagens, respectivamente as Listagens 5 e 6.


<asp:Repeater ID="rptPager" runat="server">
  <ItemTemplate>
      <asp:LinkButton ID="lnkPage" runat="server" 
      Text='<%#Eval("Text") %>� CommandArgument='<%# 
      Eval("Value") %>'
          CssClass=�<%# Convert.ToBoolean(Eval("Enabled")) ? 
          "page_enabled" : "page_disabled" %>'
          OnClick="Page_Changed" OnClientClick='<%# 
          !Convert.ToBoolean(Eval("Enabled")) ? "return false;" : 
          "" %>'></asp:LinkButton>
 </ItemTemplate>
</asp:Repeater>

Listagem 5. Repeater em C#


<asp:Repeater ID="rptPager" runat="server">
  <ItemTemplate>
      <asp:LinkButton ID="lnkPage" runat="server" 
      Text='<%#Eval("Text") %>' 
      CommandArgument='<%# Eval("Value") %>'
          CssClass='<%# If(Convert.ToBoolean(Eval("Enabled")), 
          "page_enabled", "page_disabled")%>'
          OnClick="Page_Changed" OnClientClick='<%# 
          If(Not Convert.ToBoolean(Eval("Enabled")), 
          "return false;", "") %>'></asp:LinkButton>
  </ItemTemplate>
</asp:Repeater>

Listagem 6. Repeater em VB.Net

Apesar de sintaxes diferentes, ambas executam a mesma operaç�o com a mesma quantidade de linhas de c�digo escritas. Sendo assim, na linha 1 � criado o objeto Repeater a ser executado no servidor e na linha 3 criamos um bot�o de link, onde o texto do bot�o e seu valor ser�o recuperados do c�digo armazenado no servidor.

A linha 4 indica qual ser� a classe CSS utilizada, sendo o seu valor tamb�m recuperado do c�digo armazenado no servidor. Para definir se a classe ser� �page_enabled� ou �page_disabled� aplica-se um operador tern�rio que verifica se o valor da vari�vel Enabled � verdadeiro.

Por fim, na linha 5 adicionamos uma aç�o ao evento click realizado no lado do cliente.

Preparando o lado do servidor

Realizadas as operaç�es de preparaç�o da p�gina do cliente, seguimos ent�o para a preparaç�o do servidor. Neste ponto uma atividade muito importante � realizar a vinculaç�o do DataList com a p�gina de dados personalizada. Como a carga de dados � realizada p�gina a p�gina, ser�o realizadas chamadas � Stored Procedure RecuperaClientes, sendo informado a esta os devidos par�metros para que sua execuç�o ocorra de forma correta. Os registros retornados pela Stored Procedure ser�o armazenados no DataList.

Novamente foram realizadas implementaç�es em C# e VB.Net, respectivamente nas Listagens 7 e 8.


private int PageSize = 6;
protected void Page_Load(object sender, EventArgs e) {
 if (!IsPostBack){
    this.GetCustomersPageWise(1);
 }
}

private void GetCustomersPageWise(int pageIndex) {
 string constring = ConfigurationManager.ConnectionStrings["constring"]
 .ConnectionString;
 using (SqlConnection con = new SqlConnection(constring)){
   using (SqlCommand cmd = new SqlCommand("GetCustomersPageWise", con)){
     cmd.CommandType = CommandType.StoredProcedure;
     cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
     cmd.Parameters.AddWithValue("@PageSize", PageSize);
     cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4);
     cmd.Parameters["@RecordCount"].Direction = ParameterDirection.Output;
     con.Open();
     IDataReader idr = cmd.ExecuteReader();
     rptCustomers.DataSource = idr;
     rptCustomers.DataBind();
     idr.Close();
     con.Close();
     int recordCount = Convert.ToInt32(cmd.Parameters["@RecordCount"].Value);
     this.PopulatePager(recordCount, pageIndex);
   }
 }
}

Listagem 7. Recuperando dados com C#


Private PageSize As Integer = 6
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
   If Not IsPostBack Then
       Me.GetCustomersPageWise(1)
   End If
End Sub

Private Sub GetCustomersPageWise(pageIndex As Integer)
   Dim constring As String = ConfigurationManager.ConnectionStrings("constring").ConnectionString
 Using con As New SqlConnection(constring)
     Using cmd As New SqlCommand("GetCustomersPageWise", con)
          cmd.CommandType = CommandType.StoredProcedure
          cmd.Parameters.AddWithValue("@PageIndex", pageIndex)
          cmd.Parameters.AddWithValue("@PageSize", PageSize)
          cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4)
          cmd.Parameters("@RecordCount").Direction = ParameterDirection.Output
          con.Open()
          Dim idr As IDataReader = cmd.ExecuteReader()
          rptCustomers.DataSource = idr
          rptCustomers.DataBind()
          idr.Close()
          con.Close()
          Dim recordCount As Integer = Convert.ToInt32(cmd.Parameters("@RecordCount").Value)
          Me.PopulatePager(recordCount, pageIndex)
      End Using
  End Using
End Sub

Listagem 8. Recuperando dados com VB.Net

Começamos os c�digos criando uma vari�vel PageSize, onde o valor padr�o definido foi 6, mas podemos alter�-lo sem qualquer preju�zo ao c�digo.

Na linha 2 � criado um evento Page_Load, que ser� disparado no momento em que a p�gina do cliente for carregada. Em seguida verifica-se se a p�gina est� sendo carregada pela primeira vez ou n�o (IsPosBack): caso esteja, ent�o o m�todo GetCustomersPageWise descrito a partir da linha 8 � chamado com par�metro de entrada configurado como 1, indicando que a contagem deve iniciar do primeiro registro. Nas linhas 9 e 10 � criada uma string de conex�o com o banco de dados e um objeto de conex�o e a seguir indica-se que a conex�o ser� para uma Stored Procedure.

As linhas 13 a 15 enviam os valores para os par�metros de entrada da StoredProcedure e na linha 16 indicamos o par�metro de sa�da.

Ap�s abrir a conex�o com o banco de dados na linha 17 cria-se um objeto IDataReader para percorrer pelos dados retornados pela conex�o.

Na linha 24 fazemos uma chamada a um m�todo muito importante, pois este recebe o total de registros presente na tabela do banco de dados e o �ndice da p�gina atual, sendo ent�o realizados alguns c�lculos para que o sistema identifique a primeira e �ltima p�gina da listagem.

Ao final temos a vinculaç�o com o controlador Repeater, de acordo com as Listagens 9 e 10.


private void PopulatePager(int recordCount, int currentPage) {
  List<ListItem> pages = new List<ListItem>();
  int startIndex, endIndex;
  int pagerSpan = 5;
   //C�lculo do in�cio e fim da contagem de p�ginas
  double dblPageCount = (double)((decimal)recordCount / 
  Convert.ToDecimal(PageSize));
  int pageCount = (int)Math.Ceiling(dblPageCount);
  startIndex = currentPage > 1 && currentPage 
  + pagerSpan - 1 < pagerSpan ? currentPage : 1;
  endIndex = pageCount > pagerSpan ? pagerSpan : pageCount;
  if (currentPage > pagerSpan % 2) {
      if (currentPage == 2){
          endIndex = 5;
      }else{
          endIndex = currentPage + 2;
      }
  }else{
      endIndex = (pagerSpan - currentPage) + 1;
 }
  if (endIndex - (pagerSpan - 1) > startIndex){
     startIndex = endIndex - (pagerSpan - 1);
 }
 if (endIndex > pageCount){
   endIndex = pageCount;
     startIndex = ((endIndex - pagerSpan) + 1) > 0 ? 
     (endIndex - pagerSpan) + 1 : 1;
  }
  //Adiciona bot�o da primeira p�gina.
  if (currentPage > 1){
      pages.Add(new ListItem("First", "1"));
  }
  //Adiciona bot�o anterior.
  if (currentPage > 1){
     pages.Add(new ListItem("<<", (currentPage - 1)
     .ToString()));
  }
  for (int i = startIndex; i <= endIndex; i++){
      pages.Add(new ListItem(i.ToString(), i.ToString(), 
      i != currentPage));
  }
  //Adiciona bot�o pr�ximo.
  if (currentPage < pageCount){
      pages.Add(new ListItem(">>", (currentPage + 1)
      .ToString()));
 }
  //Adiciona bot�o para �ltima p�gina.
  if (currentPage != pageCount){
      pages.Add(new ListItem("Last", pageCount.ToString()));
  }
  rptPager.DataSource = pages;
 rptPager.DataBind();
}

Listagem 9. Preenchendo o controle pager com C#


Private Sub PopulatePager(recordCount As Integer, 
currentPage As Integer)
  Dim pages As New List(Of ListItem)()
  Dim startIndex As Integer, endIndex As Integer
  Dim pagerSpan As Integer = 5
  �C�lculo do in�cio e fim da contagem de p�ginas
  Dim dblPageCount As Double = CDbl(CDec(recordCount) 
  / Convert.ToDecimal(PageSize))
  Dim pageCount As Integer = CInt(Math.Ceiling(dblPageCount))
  startIndex = If(currentPage > 1 AndAlso currentPage 
  + pagerSpan - 1 < pagerSpan, currentPage, 1)
    endIndex = If(pageCount > pagerSpan, pagerSpan, pageCount)
    If currentPage > pagerSpan Mod 2 Then
        If currentPage = 2 Then
            endIndex = 5
        Else
            endIndex = currentPage + 2
        End If
    Else
      endIndex = (pagerSpan - currentPage) + 1
End If
  If endIndex - (pagerSpan - 1) > startIndex Then
      startIndex = endIndex - (pagerSpan - 1)
  End If
  If endIndex > pageCount Then
      endIndex = pageCount
      startIndex = If(((endIndex - pagerSpan) + 1) > 0, 
      (endIndex - pagerSpan) + 1, 1)
  End If
  �Bot�o para primeira p�gina
  If currentPage > 1 Then
      pages.Add(New ListItem("First", "1"))
  End If
  �Bot�o para p�gina anterior
  If currentPage > 1 Then
      pages.Add(New ListItem("<<", 
      (currentPage - 1).ToString()))
  End If
  For i As Integer = startIndex To endIndex
      pages.Add(New ListItem(i.ToString(), i.ToString(), 
      i <> currentPage))
  Next
  �Bot�o para a pr�xima p�gina.
  If currentPage < pageCount Then
      pages.Add(New ListItem(">>", 
      (currentPage + 1).ToString()))
  End If
  �Bot�o para a �ltima p�gina
  If currentPage <> pageCount Then
      pages.Add(New ListItem("Last", pageCount.ToString()))
  End If
  rptPager.DataSource = pages
  rptPager.DataBind()
End Sub

Listagem 10. Preenchendo o controle pager com VB.Net

O c�digo que realiza o c�lculo da quantidade de p�ginas a serem exibidas começa na linha 6, dividindo o total de p�ginas pela quantidade de registro por p�ginas e garante-se que o resultado ser� um valor inteiro. A linha 8 e 9 utilizam operadores tern�rios para definir a p�gina de in�cio e fim: verifica-se se a p�gina aberta � maior do que 1, e se esta, somada ao valor (PageSpan = 5) menos 1 � menor do que o valor de PageSpan. Caso verdadeiro, ent�o a p�gina inicial ser� a currentPage, caso contr�rio a p�gina inicial ser� 1. Na linha 9 verifica-se somente se o n�mero de p�ginas � maior do que o valor de PageSpan: se for, ent�o a �ltima p�gina ser� o PageSpan, sen�o a �ltima p�gina ser� o PageCount.

Finalmente cria-se um m�todo que ser� executado quando o LinkButton de uma p�gina for clicado. Este evento realiza um comando que indica ao banco de dados que este deve obter um novo conjunto de registros com base nos argumentos repassados a ele. O c�digo pode ser observado nas Listagens 11 e 12.


protected void Page_Changed(object sender, EventArgs e)
{
   int pageIndex = int.Parse((sender as LinkButton).CommandArgument);
  this.GetCustomersPageWise(pageIndex);
}

Listagem 11. M�todo Page_Chanced em C#


Protected Sub Page_Changed(sender As Object, e As EventArgs)
  Dim pageIndex As Integer = Integer.Parse(TryCast(sender, LinkButton).CommandArgument)
  Me.GetCustomersPageWise(pageIndex)
End Sub

Listagem 12. M�todo Page_Chanced em VB.Net

Este evento, depois de inserido nos bot�es da p�gina, garantir�o a chamada do m�todo GetCustumersPageWise, que disparar� o processo para cada clique realizado.

Veja que com pouco c�digo podemos criar uma p�gina web capaz de realizar paginaç�o de dados, evitando assim o envio de uma quantidade exagerada de informaç�es para o usu�rio, informaç�es que em muitos casos s�o desnecess�rias at�, levando a uma sobrecarga no processamento, desestimulando a perman�ncia do usu�rio na mesma.

Utilizar recursos como o DataList, dispon�vel n�o somente na plataforma .NET, mas tamb�m em muitas outras plataformas de desenvolvimento, traz ao desenvolvedor a facilidade de interagir com seus registros armazenados em banco de dados atrav�s de um componente robusto e seguro, capaz de oferecer ao mesmo uma s�rie de recursos e templates que reduzem a complexidade do trabalho, diminuindo o tempo gasto na preparaç�o dos dados para exibiç�o.

Sempre que pretendemos apresentar uma coleç�o de dados para os usu�rios, o uso do DataList � indicado, mas existem outras formas de se realizar o processo, por�m as facilidades, a robustez, a agilidade e performance oferecidas pelo componente n�o devem ser ignoradas.

Espero que tenham gostado do artigo e at� a pr�xima.