Tutoriais .NET

Existem controles que já vem com uma paginação basta apenas você habilita-la ou não, como o GridView por exemplo. Mas às vezes temos a necessidade de apenas exibir informações de um banco sem que isso afeta o layout. Por exemplo, existe um site de notícias, e esse site foi estruturado em css, o estruturador preparou a lista de notícias do site usando apenas “ul” e “li”, se você optar por usar um GridView para exibir essas notícias, ira gerar um serie de erros de layout pois o GridView gera uma tabela para exibir os dados. Para esse tipo de caso seria interessante usar o Repeater, pois o mesmo não gera nenhuma estrutura de HTML, ela apenas exibi as informações do banco e repete qualquer HTML que estiver dentro de seu “ItemTemplate”. Ou seja, você tem controle total sobre o Repeater, podendo modificar sua estrutura por completo, porém, ao contrário do GridView, ele não possui uma paginação “embutida” que podemos ou não habilitar, é preciso criar uma paginação “Não mão”.

Para isso, usa-se o “PagedDataSource”, vamos ver como ele funciona:

Obs: Esse tutorial funciona perfeitamente tanto no framework 2.0 quanto no 3.5, no caso criei a aplicação usando o framework 2.0.

1 – Abra o VS 2008, “File > New > Web Site…”.

2 – Crie um arquivo novo chamado “noticias.aspx”.

3 – Criei um banco de dados no Access para este tutorial, basta baixá-lo aqui ou baixe todo o projeto no final desse post. Assim que estiver com o banco, coloque-o dentro da pasta App_Data. Caso não tenha essa pasta em seu diretório, clique com o botão direito em cima da solução e “Add Asp.Net Folder > App_Data”, ou simplesmente adicione uma pasta com esse nome no diretório da solução.

4 – Vamos adicionar uma string de conexão para o banco, abra o web.config e adicione o código como na imagem abaixo:

5 – Na página Defaul.aspx, coloque um link para a página de notícias, e na url do link coloque um querystring como na imagem abaixo (usaremos uma querystring para armazenar o valor da página):



6 – Na página noticias.aspx, usaremos uma estrutura de lista (“ul”,”li”) para exibir as notícias. Vai funcionar assim: Cada “li” conterá uma notícia, então usaremos o Repeater para buscar a notícia do banco e colocá-la dentro da “li”, o Repeater então repetirá esse processo para todas as notícias que forem selecionadas do banco. A paginação acontecerá através dos controles HyperLink que serão adicionados no final da página abaixo da lista de notícias. Então, na tela de notícias, monte a seguinte estrutura (importante: Não é possível editar o ItemTemplate do Repeater no modo “Design” do Visual Studio, apenas no modo “Source”):



7 – Agora vamos para a página noticias.aspx.cs, dentro do método “Page_Load” vamos primeiro verificar se há alguma querystring, fazendo assim:



8 – Para manipular um banco do tipo “Access” precisamos adicionar a seguinte referencia: “using System.Data.OleDb;” , e para usarmos o DataSet, precisamos adicionar “using System.Data;”.

9 – Todos os códigos demonstrados abaixo devem estar dentro do comando “if” mostrado acima na parte 7. Agora vamos estabelecer a conexão com o banco e fazer o “select” das notícias:

O construtor OleDbConnection() espera como parâmetro a string de conexão do banco. Lembra que colocamos a string de conexão no web.config? O código que está como parâmetro dentro do construtora OleDbConnection() retorna a string de conexão que está no web.config. Para utilizarmos o “ConfigurationManager” é preciso adicionar a referencia: “Using System.Configuration;”.

10 – Agora digite o código abaixo:

IMPORTANTE: Os índice de páginas de um objeto “PagedDataSource” é semelhante a um índice de um array em C#, ou seja, a contagem começa do “0” (zero), porem na querystring desse exemplo tratamos como se a contagem começasse do “1”(um). Então para setarmos a página atual no “DataSouce” pegamos a querystring e subtraímos 1.

A variável “paginaAtual” pega a página atual que está em uma querystring. Logo abaixo, criamos o objeto “PagedDataSource” e configuramos o mesmo. Setamos o “AllowPaging” como true para que haja a paginação, “CurrentPageIndex” é onde pegamos e/ou setemos a página atual que é exibida, “PageSize” significa a quantidade de itens que serão exibidos por página, no banco de dados em anexo temos 6 notícias cadastradas, como optamos por exibir 2 por página, logo podemos supor que teremos três páginas cada uma exibindo duas notícias. Em seguida setamos o “DataSet” como sendo o “DataSource” do Repeater, em seguida fazemos um “DataBind” do Repeater para carregar as informações.

11 –Já temos nossa paginação pronta! Agora vamos criar uma pequena navegação com os dois HyperLinks que colocamos no final da página.

HyperLink: “linkAnterior” – Primeiro verificamos se já não estamos na primeira página, ou seja se a querystring “pagina” for menor ou igual a 1, significa que estamos na primeira página, então simplesmente desabilitamos o link, caso seja maior, setamos o “NavigateUrl” com: (valor atual – 1).

HyperLink: “linkProximo” – Usamos o método “IsLastPage” do objeto “Pgds” que retorna true caso a página exibido seja a ultima. Sendo assim basta setarmos o “NavigateUrl” do linkProximo com sendo o total de páginas (Pgds.PageCount) a serem exibidos pelo DataSource, caso contrario (paginaAtual + 1).

Baixe aqui o projeto.
Até o próximo artigo!