Exibindo dados com os controles DataList e Repeater (VB)

por Scott Mitchell

Descarregar PDF

Nos tutoriais anteriores, usamos o controle GridView para exibir dados. Começando com este tutorial, examinamos a criação de padrões de relatório comuns com os controles DataList e Repeater, começando com as noções básicas de exibição de dados com esses controles.

Introdução

Em todos os exemplos dos últimos 28 tutoriais, se precisássemos exibir vários registros de uma fonte de dados, recorremos ao controle GridView. O GridView renderiza uma linha para cada registro na fonte de dados, exibindo os campos de dados do registro em colunas. Embora o GridView torne fácil mostrar, navegar pelas páginas, classificar, editar e excluir dados, a sua aparência é um pouco quadrada. Além disso, a marcação responsável pela estrutura do GridView é fixa, pois inclui um HTML <table> com uma linha de tabela (<tr>) para cada registro e uma célula de tabela (<td>) para cada campo.

Para fornecer um maior grau de personalização na aparência e marcação renderizada ao exibir vários registros, o ASP.NET 2.0 oferece os controles DataList e Repeater (ambos também estavam disponíveis na versão 1.x ASP.NET). Os controles DataList e Repeater processam seu conteúdo usando modelos em vez de BoundFields, CheckBoxFields, ButtonFields e assim por diante. Como o GridView, o DataList é renderizado como um HTML <table>, mas permite que vários registros de fonte de dados sejam exibidos por linha da tabela. O Repetidor, por outro lado, não gera mais marcação do que aquela que você especifica claramente, sendo assim um candidato ideal quando precisa de controle preciso sobre a marcação gerada.

Ao longo da próxima dúzia de tutoriais, veremos a criação de padrões de relatório comuns com os controles DataList e Repeater, começando com os conceitos básicos de exibição de dados com esses modelos de controles. Veremos como formatar esses controles, como alterar o layout de registros da fonte de dados na DataList, cenários comuns de mestre/detalhe, maneiras de editar e excluir dados, como navegar pelos registros e assim por diante.

Etapa 1: Adicionando as páginas da Web DataList e Repeater Tutorial

Antes de começarmos este tutorial, vamos primeiro reservar um momento para adicionar as ASP.NET páginas que precisaremos para este tutorial e os próximos tutoriais que lidam com a exibição de dados usando o DataList e o Repeater. Comece criando uma nova pasta no projeto chamado DataListRepeaterBasics. Em seguida, adicione as seguintes cinco páginas ASP.NET a esta pasta, tendo todas elas configuradas para usar a página Site.mastermestra :

• Default.aspx
• Basics.aspx
• Formatting.aspx
• RepeatColumnAndDirection.aspx
• NestedControls.aspx

Figura 1: Criar um DataListRepeaterBasics diretório e adicionar as páginas do tutorial ASP.NET

Abra a página Default.aspx e arraste o Controlo de Utilizador SectionLevelTutorialListing.ascx da pasta UserControls para a superfície de Design. Esse Controle de Usuário, que criamos no tutorial Páginas Mestras e Navegação do Site , enumera o mapa do site e exibe os tutoriais da seção atual em uma lista com marcadores.

Figura 2: Adicionar o controle de usuário a SectionLevelTutorialListing.ascx (Default.aspx imagem em tamanho real)

Para que a lista com marcadores exiba os tutoriais DataList e Repeater que iremos criar, precisamos adicioná-los ao mapa do site. Abra o arquivo Web.sitemap e adicione a seguinte marcação após a marcação no nó do mapa do site de Adicionar Botões Personalizados:

<siteMapNode
    title="Displaying Data with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterBasics/Default.aspx" >
    <siteMapNode
        title="Basic Examples"
        description="Examines the basics for displaying data using the
                      DataList and Repeater controls."
        url="~/DataListRepeaterBasics/Basics.aspx"  />
    <siteMapNode
        title="Formatting"
        description="Learn how to format the DataList and the Web controls within
                      the DataList and Repeater's templates."
        url="~/DataListRepeaterBasics/Formatting.aspx" />
    <siteMapNode
        title="Adjusting the DataList s Layout"
        description="Illustrates how to alter the DataList's layout, showing
                      multiple data source records per table row."
        url="~/DataListRepeaterBasics/RepeatColumnAndDirection.aspx" />
    <siteMapNode
        title="Nesting a Repeater within a DataList"
        description="Learn how to nest a Repeater within the template of a DataList."
        url="~/DataListRepeaterBasics/NestedControls.aspx" />
</siteMapNode>

Figura 3: Atualizar o mapa do site para incluir as novas páginas ASP.NET

Etapa 2: Exibindo informações do produto com a DataList

Semelhante ao FormView, a saída renderizada do controle DataList depende de modelos em vez de BoundFields, CheckBoxFields e assim por diante. Ao contrário do FormView, o DataList é projetado para exibir um conjunto de registros em vez de um solitário. Vamos começar este tutorial com uma olhada na vinculação de informações do produto a uma DataList. Comece por abrir a página Basics.aspx na pasta DataListRepeaterBasics. Em seguida, arraste uma DataList da Caixa de Ferramentas para o Designer. Como ilustra a Figura 4, antes de especificar os modelos de DataList, o Designer o exibe como uma caixa cinza.

Figura 4: Arraste a DataList da caixa de ferramentas para o designer (Clique para visualizar a imagem em tamanho real)

A partir da marca inteligente do DataList, adicione um novo ObjectDataSource e configure-o para utilizar o método ProductsBLL da classe GetProducts. Como estamos criando uma DataList somente leitura neste tutorial, defina a lista de opções como (Nenhum) nas guias INSERT, UPDATE e DELETE do assistente.

Figura 5: Optar por criar um novo ObjectDataSource (Clique para visualizar a imagem em tamanho real)

Figura 6: Configurar o ObjectDataSource para usar a classe (ProductsBLL imagem em tamanho real)

Figura 7: Recuperar informações sobre todos os produtos usando o método (GetProducts imagem em tamanho real)

Depois de configurar o ObjectDataSource e associá-lo à DataList por meio de sua marca inteligente, o Visual Studio criará automaticamente um ItemTemplate na DataList que exibe o nome e o valor de cada campo de dados retornado pela fonte de dados (consulte a marcação abaixo). Essa aparência padrão ItemTemplate é idêntica à dos modelos criados automaticamente ao vincular uma fonte de dados ao FormView por meio do Designer.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        ProductID:       <asp:Label ID="ProductIDLabel" runat="server"
                            Text='<%# Eval("ProductID") %>' /><br />
        ProductName:     <asp:Label ID="ProductNameLabel" runat="server"
                            Text='<%# Eval("ProductName") %>' /><br />
        SupplierID:      <asp:Label ID="SupplierIDLabel" runat="server"
                            Text='<%# Eval("SupplierID") %>' /><br />
        CategoryID:      <asp:Label ID="CategoryIDLabel" runat="server"
                            Text='<%# Eval("CategoryID") %>'/><br />
        QuantityPerUnit: <asp:Label ID="QuantityPerUnitLabel" runat="server"
                            Text='<%# Eval("QuantityPerUnit") %>' /><br />
        UnitPrice:       <asp:Label ID="UnitPriceLabel" runat="server"
                            Text='<%# Eval("UnitPrice") %>' /><br />
        UnitsInStock:    <asp:Label ID="UnitsInStockLabel" runat="server"
                            Text='<%# Eval("UnitsInStock") %>' /><br />
        UnitsOnOrder:    <asp:Label ID="UnitsOnOrderLabel" runat="server"
                            Text='<%# Eval("UnitsOnOrder") %>' /><br />
        ReorderLevel:    <asp:Label ID="ReorderLevelLabel" runat="server"
                            Text='<%# Eval("ReorderLevel") %>' /><br />
        Discontinued:    <asp:Label ID="DiscontinuedLabel" runat="server"
                            Text='<%# Eval("Discontinued") %>' /><br />
        CategoryName:    <asp:Label ID="CategoryNameLabel" runat="server"
                            Text='<%# Eval("CategoryName") %>' /><br />
        SupplierName:    <asp:Label ID="SupplierNameLabel" runat="server"
                            Text='<%# Eval("SupplierName") %>' /><br />
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Observação

Lembre-se de que, ao vincular uma fonte de dados a um controle FormView por meio da marca inteligente do FormView, o Visual Studio criou um ItemTemplate, InsertItemTemplatee EditItemTemplate. Com o DataList, no entanto, apenas um ItemTemplate é criado. Isso ocorre porque o DataList não tem o mesmo suporte interno de edição e inserção oferecido pelo FormView. O DataList contém eventos relacionados a edição e exclusão, e o suporte à edição e exclusão pode ser adicionado com um pouco de código, mas não há suporte simples pronto para uso como no FormView. Veremos como incluir o suporte de edição e exclusão com a DataList em um tutorial futuro.

Vamos tirar um momento para melhorar a aparência deste modelo. Em vez de exibir todos os campos de dados, deixe exibir apenas o nome, o fornecedor, a categoria, a quantidade por unidade e o preço unitário do produto. Além disso, deixe s exibir o nome em um <h4> título e dispor os campos restantes usando um <table> abaixo do título.

Para fazer essas alterações, você pode usar os recursos de edição de modelo no Designer a partir da marca inteligente DataList, clicar no link Editar modelos ou modificar o modelo manualmente por meio da sintaxe declarativa da página. Se você usar a opção Editar modelos no Designer, a marcação resultante pode não corresponder exatamente à marcação a seguir, mas quando visualizada por meio de um navegador deve ser muito semelhante à captura de tela mostrada na Figura 8.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' /></h4>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td><asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' /></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td><asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' /></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit:</td>
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
                    Text='<%# Eval("QuantityPerUnit") %>' /></td>
                <td class="ProductPropertyLabel">Price:</td>
                <td><asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>

Observação

O exemplo acima usa controles Label Web cuja Text propriedade é atribuída ao valor da sintaxe de vinculação de dados. Alternativamente, poderíamos ter omitido os Labels completamente, digitando apenas a sintaxe de vinculação de dados. Ou seja, em vez de usar <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> , poderíamos ter usado a sintaxe <%# Eval("CategoryName") %>declarativa.

Deixar nos controles Label Web, no entanto, oferece duas vantagens. Primeiro, ele fornece um meio mais fácil para formatar os dados com base nos dados, como veremos no próximo tutorial. Em segundo lugar, a opção Editar modelos no Designer não exibe sintaxe declarativa de vinculação de dados que aparece fora de algum controle da Web. Em vez disso, a interface Edit Templates foi projetada para facilitar o trabalho com marcação estática e controles da Web e pressupõe que qualquer vinculação de dados será feita por meio da caixa de diálogo Edit DataBindings, que pode ser acessada a partir das marcas inteligentes de controles da Web.

Portanto, ao trabalhar com o DataList, que fornece a opção de editar os modelos através do Designer, prefiro usar controles Label Web para que o conteúdo seja acessível através da interface Edit Templates. Como veremos em breve, o Repetidor requer que o conteúdo do modelo seja editado a partir da vista de código-fonte. Consequentemente, ao criar os modelos do Repeater, muitas vezes omito os controles Label Web, a menos que saiba que precisarei formatar a aparência do texto vinculado a dados com base na lógica programática.

Figura 8: A saída de cada produto é renderizada usando o DataList s ItemTemplate (Clique para visualizar a imagem em tamanho real)

Etapa 3: Melhorando a aparência da DataList

Como o GridView, o DataList oferece várias propriedades relacionadas ao estilo, como Font, ForeColor, , BackColor, CssClass, ItemStyleAlternatingItemStyle, , SelectedItemStylee assim por diante. Ao trabalhar com os controles GridView e DetailsView, criamos arquivos Skin no DataWebControls Theme que predefiniram as CssClass propriedades para esses dois controles e a CssClass propriedade para várias de suas subpropriedades (RowStyle, HeaderStyle, e assim por diante). Vamos fazer o mesmo para o DataList.

Conforme discutido no tutorial Exibindo dados com o ObjectDataSource , um arquivo Skin especifica as propriedades padrão relacionadas à aparência para um controle da Web; um Tema é uma coleção de arquivos de Skin, CSS, imagem e JavaScript que definem uma aparência específica para um site. No tutorial Exibindo dados com o ObjectDataSource , criamos um DataWebControls tema (que é implementado como uma pasta dentro da App_Themes pasta) que tem, atualmente, dois arquivos de capa - GridView.skin e DetailsView.skin. Vamos adicionar um terceiro arquivo Skin para especificar as configurações de estilo predefinidas para a DataList.

Para adicionar um arquivo de capa, clique com o botão direito do App_Themes/DataWebControls mouse na pasta, escolha Adicionar um novo item e selecione a opção Arquivo de capa na lista. Dê o nome DataList.skin ao ficheiro.

Figura 9: Criar um novo arquivo de capa chamado DataList.skin (Clique para visualizar a imagem em tamanho real)

Use a seguinte marcação para o DataList.skin arquivo:

<asp:DataList runat="server" CssClass="DataWebControlStyle">
   <AlternatingItemStyle CssClass="AlternatingRowStyle" />
   <ItemStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedItemStyle CssClass="SelectedRowStyle" />
</asp:DataList>

Essas configurações atribuem as mesmas classes CSS às propriedades DataList apropriadas que foram usadas com os controles GridView e DetailsView. As classes CSS usadas aqui DataWebControlStyle, AlternatingRowStyle, RowStyle, e assim por diante são definidas no Styles.css arquivo e foram adicionadas em tutoriais anteriores.

Com a adição desse arquivo Skin, a aparência da DataList é atualizada no Designer (talvez seja necessário atualizar a visualização Designer para ver os efeitos do novo arquivo Skin; no menu Exibir, escolha Atualizar). Como mostra a Figura 10, cada produto alternado tem uma cor de fundo rosa claro.

Figura 10: Criar um novo arquivo de capa chamado DataList.skin (Clique para visualizar a imagem em tamanho real)

Etapa 4: Explorando os outros modelos da DataList

Além do ItemTemplate, o DataList suporta seis outros modelos opcionais:

• HeaderTemplate Se fornecido, adiciona uma linha de cabeçalho à saída e é usado para renderizar essa linha
• AlternatingItemTemplate usado para renderizar itens alternados
• SelectedItemTemplateusado para renderizar o item selecionado; o item selecionado é o item cujo índice corresponde à propriedade de DataList s SelectedIndex
• EditItemTemplate usado para renderizar o item que está sendo editado
• SeparatorTemplate se fornecido, adiciona um separador entre cada item e é usado para renderizar esse separador
• FooterTemplate - se fornecido, adiciona uma linha de rodapé à saída e é usado para renderizar essa linha

Ao especificar o HeaderTemplate ou FooterTemplate, o DataList adiciona uma linha de cabeçalho ou rodapé adicional à saída renderizada. Como acontece com as linhas de cabeçalho e rodapé do GridView, o cabeçalho e o rodapé em uma DataList não estão vinculados a dados. Portanto, qualquer sintaxe de vinculação de dados no HeaderTemplate ou FooterTemplate que tente acessar dados vinculados retornará uma cadeia de caracteres em branco.

Observação

Como vimos no tutorial Exibindo Resumo de Informações no Rodapé do GridView, embora as linhas de cabeçalho e rodapé não ofereçam suporte à sintaxe de ligação de dados, informações específicas de dados podem ser injetadas diretamente nessas linhas a partir do manipulador de eventos do GridView RowDataBound. Essa técnica pode ser usada para calcular totais em execução ou outras informações dos dados vinculados ao controle, bem como atribuir essas informações ao rodapé. Este mesmo conceito pode ser aplicado aos controles DataList e Repeater; a única diferença é que, para DataList e Repeater, crie um manipulador de eventos para o ItemDataBound evento (em vez de para o RowDataBound evento).

Para o nosso exemplo, deixe que s tenha o título Informações do Produto exibido na parte superior dos resultados da DataList em um <h3> cabeçalho. Para fazer isso, adicione um HeaderTemplate com a marcação apropriada. No Designer, isso pode ser feito clicando no link Edit Templates na marca inteligente DataList, escolhendo o Header Template na lista suspensa e digitando o texto depois de escolher a opção Heading 3 na lista suspensa de estilo (veja a Figura 11).

Figura 11: Adicionar um HeaderTemplate com as informações do produto de texto (Clique para visualizar a imagem em tamanho real)

Como alternativa, isso pode ser adicionado declarativamente inserindo a seguinte marcação dentro das <asp:DataList> tags :

<HeaderTemplate>
   <h3>Product Information</h3>
</HeaderTemplate>

Para adicionar um pouco de espaço entre cada listagem de produtos, deixe s adicionar um SeparatorTemplate que inclua uma linha entre cada seção. A tag de regra horizontal (<hr>), adiciona esse divisor. Crie o SeparatorTemplate para que ele tenha a seguinte marcação:

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

Observação

Como o HeaderTemplate e FooterTemplates, o SeparatorTemplate não está vinculado a nenhum registro da fonte de dados e, portanto, não pode acessar diretamente os registros da fonte de dados vinculados à DataList.

Depois de fazer essa adição, ao visualizar a página através de um navegador, ela deve ser semelhante à Figura 12. Observe a linha de cabeçalho e a linha entre cada listagem de produtos.

Figura 12: A DataList inclui uma linha de cabeçalho e uma regra horizontal entre cada listagem de produtos (Clique para ver a imagem em tamanho real)

Etapa 5: Renderização de marcação específica utilizando o controlo repetidor

Se você fizer um View/Source a partir do seu navegador ao visitar o exemplo DataList da Figura 12, verá que o DataList emite um HTML <table> que contém uma linha de tabela (<tr>) com uma única célula de tabela (<td>) para cada item vinculado à DataList. Essa saída, na verdade, é idêntica ao que seria emitido de um GridView com um único TemplateField. Como veremos em um tutorial futuro, o DataList permite uma maior personalização da saída, permitindo-nos exibir vários registros de fonte de dados por linha da tabela.

E se você não quiser emitir um HTML <table>? Para controle total e completo sobre a marcação gerada por um controle Web de dados, devemos usar o controle Repeater. Como o DataList, o repetidor é construído com base em modelos. O Repetidor, no entanto, oferece apenas os seguintes cinco modelos:

• HeaderTemplate se fornecido, adiciona a marcação especificada antes dos itens
• ItemTemplate usado para renderizar itens
• AlternatingItemTemplate se fornecido, usado para exibir itens em alternância
• SeparatorTemplate se fornecido, adiciona a marcação especificada entre cada item
• FooterTemplate - se fornecido, adiciona a marcação especificada após os itens

No ASP.NET 1.x, o controle Repeater era comumente usado para exibir uma lista com marcadores cujos dados vinham de alguma fonte de dados. Nesse caso, o HeaderTemplate e FooterTemplates conteria as tags de abertura e fechamento <ul> , respectivamente, enquanto o ItemTemplate conteria <li> elementos com sintaxe de vinculação de dados. Essa abordagem ainda pode ser usada no ASP.NET 2.0, como vimos em dois exemplos no tutorial Páginas mestras e navegação no site :

• Site.master Na página mestra, um Repetidor foi usado para exibir uma lista com marcadores do conteúdo do mapa do site de nível superior (Relatórios Básicos, Relatórios de Filtragem, Formatação Personalizada e assim por diante), outro Repetidor aninhado foi usado para exibir as seções filhas das seções de nível superior
• No SectionLevelTutorialListing.ascx, um repetidor foi usado para apresentar uma lista com marcadores das subseções da seção atual do mapa do site

Observação

ASP.NET 2.0 apresenta o novo controle BulletedList, que pode ser vinculado a um controle de fonte de dados para exibir uma lista com marcadores simples. Com o controle BulletedList, não precisamos especificar nenhum HTML relacionado à lista; em vez disso, simplesmente indicamos o campo de dados a ser exibido como o texto para cada item da lista.

O repetidor serve como um controle de captura de todos os dados da Web. Se não houver um controle existente que gera a marcação necessária, o controle Repeater pode ser usado. Para ilustrar o uso do Repeater, vamos ter a lista de categorias exibida acima do DataList de Informações do Produto criada na Etapa 2. Em particular, vamos ter as categorias exibidas em uma única linha de HTML onde cada categoria está exibida como uma coluna em uma tabela.

Para fazer isso, comece arrastando um controle Repeater da Toolbox para o Designer, acima da Product Information DataList. Tal como acontece com o DataList, o repetidor inicialmente é exibido como uma caixa cinza até que seus modelos tenham sido definidos.

Figura 13: Adicionar um repetidor ao designer (Clique para visualizar a imagem em tamanho real)

Há apenas uma opção na marca inteligente do Repetidor: Escolher Fonte de Dados. Opte por criar um novo ObjectDataSource e configurá-lo para usar o método CategoriesBLL da classe GetCategories.

Figura 14: Criar um novo ObjectDataSource (Clique para visualizar a imagem em tamanho real)

Figura 15: Configurar o ObjectDataSource para usar a classe (CategoriesBLL imagem em tamanho real)

Figura 16: Recuperar informações sobre todas as categorias usando o método (GetCategories imagem em tamanho real)

Ao contrário do DataList, o Visual Studio não cria automaticamente um ItemTemplate para o repetidor depois de vinculá-lo a uma fonte de dados. Além disso, os modelos do repetidor não podem ser configurados através do Designer e devem ser especificados declarativamente.

Para exibir as categorias como uma única linha <table> com uma coluna para cada categoria, precisamos que o Repetidor emita uma marcação semelhante à seguinte:

<table>
   <tr>
      <td>Category 1</td>
      <td>Category 2</td>
      ...
      <td>Category N</td>
   </tr>
</table>

Como o <td>Category X</td> texto é a parte que se repete, isso aparecerá no ItemTemplate do repetidor. A marcação que aparece antes dela - <table><tr> - será colocada no HeaderTemplate enquanto a marcação final - </tr></table> - será colocada no FooterTemplate. Para inserir essas configurações de modelo, vá para a parte declarativa da página ASP.NET clicando no botão Fonte no canto inferior esquerdo e digite a seguinte sintaxe:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table>
            <tr>
    </HeaderTemplate>
    <ItemTemplate>
                <td><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <FooterTemplate>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

O repetidor emite a marcação precisa conforme especificado pelos seus modelos, nada mais, nada menos. A Figura 17 mostra a saída do repetidor quando visualizada através de um navegador.

Figura 17: Um HTML <table> Single-Row lista cada categoria em uma coluna separada (Clique para visualizar a imagem em tamanho real)

Passo 6: Melhorar a aparência do repetidor

Como o Repeater emite precisamente a marcação especificada por seus modelos, não deve ser surpresa que não haja propriedades relacionadas ao estilo para o Repeater. Para alterar a aparência do conteúdo gerado pelo Repetidor, devemos adicionar manualmente o conteúdo HTML ou CSS necessário diretamente aos modelos do Repetidor.

Por exemplo, vamos fazer com que as colunas de categoria alternem as cores de fundo, tal como as linhas alternadas na lista de dados (DataList). Para realizar isso, precisamos atribuir a classe CSS RowStyle a cada item do Repeater e a classe CSS AlternatingRowStyle a cada item alternado do Repeater, utilizando os modelos ItemTemplate e AlternatingItemTemplate da seguinte forma:

<ItemTemplate>
    <td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
    <td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>

Vamos também adicionar uma linha de cabeçalho à saída com o texto Categorias de produtos. Como não sabemos em quantas colunas nosso resultado <table> será composto, a maneira mais simples de gerar uma linha de cabeçalho que é garantida para abranger todas as colunas é usar dois<table> s. A primeira <table> conterá duas linhas, a linha de cabeçalho e uma linha que conterá a segunda, uma única linha <table> , que tem uma coluna para cada categoria no sistema. Ou seja, queremos emitir a seguinte marcação:

<table>
   <tr>
      <th>Product Categories</th>
   </tr>
   <tr>
      <td>
         <table>
            <tr>
               <td>Category 1</td>
               <td>Category 2</td>
               ...
               <td>Category N</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Os seguintes HeaderTemplate e FooterTemplate resultam na marcação desejada.

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th class="HeaderStyle">Product Categories</th>
            </tr>
            <tr>
                <td>
                    <table cellpadding="4" cellspacing="0">
                        <tr>
    </HeaderTemplate>
    <ItemTemplate>
                            <td class="RowStyle"><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <AlternatingItemTemplate>
                            <td class="AlternatingRowStyle">
                                <%# Eval("CategoryName") %></td>
    </AlternatingItemTemplate>
    <FooterTemplate>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

A Figura 18 mostra o repetidor após essas alterações terem sido feitas.

Figura 18: As colunas de categoria alternam na cor de plano de fundo e incluem uma linha de cabeçalho (Clique para visualizar a imagem em tamanho real)

Resumo

Embora o controlo GridView facilite a exibição, edição, exclusão, classificação e navegação através de dados, a aparência é muito quadrada e semelhante a uma grelha. Para obter mais controle sobre a aparência, precisamos recorrer aos controles DataList ou Repeater. Ambos os controles exibem um conjunto de registros usando modelos em vez de BoundFields, CheckBoxFields e assim por diante.

O DataList é renderizado como um HTML <table> que, por padrão, exibe cada registro de fonte de dados em uma única linha de tabela, assim como um GridView com um único TemplateField. Como veremos em um tutorial futuro, no entanto, o DataList permite que vários registros sejam exibidos por linha da tabela. O Repetidor, por outro lado, emite estritamente a marcação especificada em seus modelos; ele não adiciona nenhuma marcação adicional e, portanto, é comumente usado para exibir dados em elementos HTML diferentes de um <table> (como em uma lista com marcadores).

Embora o DataList e o Repeater ofereçam mais flexibilidade em sua saída renderizada, eles não têm muitos dos recursos internos encontrados no GridView. Como examinaremos nos próximos tutoriais, alguns desses recursos podem ser conectados novamente sem muito esforço, mas lembre-se de que usar o DataList ou o Repeater no lugar do GridView limita os recursos que você pode usar sem ter que implementar esses recursos por conta própria.

Feliz Programação!

Sobre o Autor

Scott Mitchell, autor de sete livros sobre ASP/ASP.NET e fundador da 4GuysFromRolla.com, trabalha com tecnologias Web da Microsoft desde 1998. Scott trabalha como consultor, formador e escritor independente. Seu último livro é Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Ele pode ser contatado em mitchell@4GuysFromRolla.com.

Um agradecimento especial a

Esta série de tutoriais foi revisada por muitos revisores úteis. Os principais revisores para este tutorial foram Yaakov Ellis, Liz Shulok, Randy Schmidt e Stacy Park. Interessado em rever meus próximos artigos do MSDN? Se for o caso, envie-me uma mensagem para mitchell@4GuysFromRolla.com.

AnteriorPróximo