Controle Repeater revisitado

ASP.NET 2.0 - O controle Repeater revisitado

Podemos dizer que o controle Repeater já é um velho conhecido nosso visto que já foi abordado nos seguintes artigos do site:

Embora este controle tenha tido a grande parte de suas funcionalidades absorvidas pelos novos controles GridView, DetailsView, e FormView na ASP.NET 2.0 vou apresentar o controle presente na nova versão por questões de compatibilidade.

O controle Repeater identificado pela tag <asp:Repeater></asp:Repeater>, exibe uma lista repetidas de itens a ele vinculados e pode ser usado para exibir registros de fonte de dados diversas. O controle esta baseado na utilização de templates que são modelos para exibição de saída usando expressões de vinculação , controles de servidor e tags XHTML que estruturam a exibição dos dados. A sub tag <ItemTemplate> é usada no interior da tag do controle com o bloco de código para renderizar os itens de dados que serão exibidos no controle.

O formato geral para o controle Repeater é dado abaixo:

<asp:Repeater id="id" Runat="Server"
  DataSourceID="id">
		
  <HeaderTemplate>
    XHTML and binding expressions
  </HeaderTemplate>
	 
  <ItemTemplate>
    XHTML and binding expressions
  </ItemTemplate>
	  
    <AlternatingItemTemplate>
      XHTML and binding expressions
    </AlternatingItemTemplate>
	 
    <SeparatorTemplate>
      XHTML and binding expressions
    </SeparatorTemplate>
			
  <FooterTemplate>
    XHTML and binding expressions
  </FooterTemplate>



</asp:Repeater>

Para mostrar como podemos usar o controle abra o Visual Web Developer 2005 Express Edition ou o Visual Studio 2005 e crie um novo web site na opção File->New web site do menu com o nome de repeater1.

A seguir a partir da ToolBox, arraste e solte o controle Repeater, a partir da guia Data para o formulário Default.aspx estando no modo Design. Você verá o controle Repeater exibido conforme figura abaixo;

No modo Source vamos incluir o seguinte código no interior da tag <asp:Repeater>:

Este código irá exibir os itens alunoID, alunoNome, alunoNome e alunoEmail de uma fonte de dados mas para que tal ocorra devemos definir qual a fonte de dados estamos usando.

Retornando ao modo Design selecione, na guia Repeater Tasks , a opção <New data source...> em Choose Data Source;

Marque a opção DataBase e aceite o nome padrão SqlDataSource1 e clique OK;

Selecione a string de conexão da sua fonte de dados ou crie uma nova conexão. No exemplo estou usando uma conexão com o banco de dados Escola.mdf.

Finalmente escolha todos os campos da tabela que deseja usar como fonte de dados;

Ao final teremos o seguinte resultado olhando o modo Design:

O código gerado pode ser visto no modo Source conforme abaixo:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Repeater</title>

</head>

<body>

<div>

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">

<%#Eval("alunoID")%>

<%#Eval("alunoNome")%>

<%#Eval("alunoEndereco")%>

<%#Eval("alunoEmail")%>

</ItemTemplate>

</asp:Repeater>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EscolaConnectionString %>"

SelectCommand="SELECT [alunoID], [alunoNome], [alunoEndereco], [AlunoEmail] FROM [Alunos]">

</asp:SqlDataSource>

</div>

</form>

</body>

</html>

E o resultado da execução da página será o seguinte:

Vamos dar uma arrumada nesta apresentação !!!!

Para isso basta incluir uma tabela e inserir cada item em uma célula da tabela. Para isto vou usar as tags:

<HeaderTemplate>
<FooterTemplate>

Nota: A tag <AlternatingTemplate> pode ser usada para aplicar efeitos especiais no controle e a tag <SeparatorTemplate> pode ser usada para efetuar marcações nos itens exibidos.

Veja abaixo o código usando as novas tags com a inclusão do objeto Table HTML:

<body>

<div>

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">

<HeaderTemplate>

<tr>

<th>Codigo</th>

<th>Endereco</th>

<th>Email></th>

</tr>

</HeaderTemplate>

<tr>

</tr>

</ItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EscolaConnectionString %>"

SelectCommand="SELECT [alunoID], [alunoNome], [alunoEndereco], [AlunoEmail] FROM [Alunos]">

</asp:SqlDataSource>

</div>

</form>

</body>

O resultado da exibição da página agora é o seguinte :

No código Eval é usado para retornar os valores da fonte de dados. Poderíamos ter usado também a seguinte sintaxe: Container.DataItem

<tr>

</tr>

</ItemTemplate>

Podemos também vincular a saída a controles de servidor e assim poder usar as propriedades de estilos destes controles. Desta forma poderíamos usar o controle Label para exibir os itens usando algumas propriedades do controle como cor de fundo e fonte:

<tr>

<td><asp:Label Text='<%#Container.DataItem("alunoID")%>' BackColor="Aqua" Font-Bold Runat="Server"/></td>

<td><asp:Label Text='<%#Container.DataItem("alunoNome")%>' BackColor="Beige" Runat="Server"/></td>

<td><asp:Label Text='<%#Container.DataItem("alunoEndereco")%>' BackColor="Beige" Runat="Server"/></td>

<td><asp:Label Text='<%#Container.DataItem("alunoEmail")%>' BackColor="Beige" Runat="Server"/></td>

</tr>

</ItemTemplate>

A formatação também poderia ser aplicada. Supondo que tivéssemos um item chamado valor poderíamos usar a seguinte sintaxe:

<asp:Label Text='<%# String.Format("{0:C}", Eval("Valor")) %>'

Para aplicarmos um efeito zebrado na tabela usando a tag <AlternatingtItemTemplate> incluiríamos o seguinte trecho de código após a tag <ItemTemplate>:

<td><asp:Label ID="Label1" Text='<%# Eval("alunoID") %>' Runat="Server"/></td>

<td><asp:Label ID="Label2" Text='<%# Eval("alunoNome") %>' Runat="Server"/></td>

<td><asp:Label ID="Label6" Text='<%# Eval("alunoEndereco") %>' Runat="Server"/></td>

<td><asp:Label ID="Label7" Text='<%# Eval("alunoEmail") %>' Runat="Server"/></td>

</tr>

</AlternatingItemTemplate>

O resultado obtido seria o seguinte:

Pegue o código completo usado neste artigo aqui: repeater1.zip

Se você percebeu pouca coisa , ou quase nada , mudou para o controle Repeater na ASP.NET 2.0.

Aguardo você no próximo artigo ASP.NET ...

José Carlos Macoratti