Exibir vários registros por linha com o controle DataList (C#)

Artigo
07/13/2023

Neste breve tutorial, exploraremos como personalizar o layout do DataList por meio das propriedades RepeatColumns e RepeatDirection.

Introdução

Os exemplos de DataList que vimos nos últimos dois tutoriais renderizaram cada registro de sua fonte de dados como uma linha em um HTML <table>de coluna única. Embora esse seja o comportamento padrão de DataList, é muito fácil personalizar a exibição DataList de modo que os itens da fonte de dados sejam distribuídos em uma tabela de várias colunas e várias linhas. Além disso, é possível ter todos os itens da fonte de dados exibidos em uma Lista de Dados de várias linhas e várias colunas.

Podemos personalizar o layout de DataList por meio de suas RepeatColumns propriedades e RepeatDirection , que, respectivamente, indicam quantas colunas são renderizadas e se esses itens são dispostos vertical ou horizontalmente. A Figura 1, por exemplo, mostra um DataList que exibe informações do produto em uma tabela com três colunas.

Figura 1: A Lista de Dados mostra três produtos por linha (clique para exibir a imagem em tamanho real)

Ao mostrar vários itens de fonte de dados por linha, o DataList pode utilizar mais efetivamente o espaço horizontal da tela. Neste breve tutorial, exploraremos essas duas propriedades DataList.

Etapa 1: exibindo informações do produto em uma DataList

Antes de examinarmos as RepeatColumns propriedades e RepeatDirection , vamos primeiro criar uma DataList em nossa página que lista as informações do produto usando o layout padrão de tabela de várias linhas de coluna única. Para este exemplo, vamos exibir o nome, a categoria e o preço do produto usando a seguinte marcação:

<h4>Product Name</h4>
Available in the Category Name store for Price

Vimos como associar dados a um DataList em exemplos anteriores, portanto, percorrerei essas etapas rapidamente. Comece abrindo a RepeatColumnAndDirection.aspx página na DataListRepeaterBasics pasta e arraste um DataList da Caixa de Ferramentas para o Designer. Na marca inteligente DataList, opte por criar um novo ObjectDataSource e configurá-lo para extrair seus dados do ProductsBLL método da classe s GetProducts , escolhendo a opção (None) nas guias INSERT, UPDATE e DELETE do assistente.

Depois de criar e associar o novo ObjectDataSource à DataList, o Visual Studio criará automaticamente um ItemTemplate que exibe o nome e o valor de cada um dos campos de dados do produto. Ajuste o ItemTemplate diretamente por meio da marcação declarativa ou da opção Editar Modelos na marca inteligente DataList para que ele use a marcação mostrada acima, substituindo o texto Nome do Produto, Nome da Categoria e Preço por controles label que usam a sintaxe de associação de dados apropriada para atribuir valores às suas Text propriedades. Depois de atualizar o , a ItemTemplatemarcação declarativa da página deve ser semelhante à seguinte:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>'></asp:Label>
        </h4>
        Available in the
            <asp:Label runat="server" ID="CategoryNameLabel"
                Text='<%# Eval("CategoryName") %>' />
        store for
            <asp:Label runat="server" ID="UnitPriceLabel"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Observe que incluí um especificador de formato na Eval sintaxe de associação de dados para o UnitPrice, formatando o valor retornado como uma moeda – Eval("UnitPrice", "{0:C}").

Reserve um momento para visitar sua página em um navegador. Como mostra a Figura 2, a DataList é renderizada como uma tabela de produtos de várias linhas de coluna única.

Figura 2: por padrão, o DataList é renderizado como uma tabela de coluna única e várias linhas (clique para exibir a imagem em tamanho real)

Etapa 2: Alterando a direção do layout de DataList

Embora o comportamento padrão do DataList seja definir seus itens verticalmente em uma tabela de várias linhas de coluna única, esse comportamento pode ser facilmente alterado por meio da propriedade DataList.RepeatDirection A RepeatDirection propriedade pode aceitar um dos dois valores possíveis: Horizontal ou Vertical (o padrão).

Ao alterar a RepeatDirection propriedade de Vertical para Horizontal, o DataList renderiza seus registros em uma única linha, criando uma coluna por item de fonte de dados. Para ilustrar esse efeito, clique em DataList no Designer e, no janela Propriedades, altere a RepeatDirection propriedade de Vertical para Horizontal. Imediatamente após fazer isso, o Designer ajusta o layout de DataList, criando uma interface de linha única e várias colunas (consulte a Figura 3).

Figura 3: a RepeatDirection propriedade dita como a direção em que os itens de DataList são dispostos (clique para exibir a imagem em tamanho real)

Ao exibir pequenas quantidades de dados, uma tabela de várias colunas de linha única pode ser uma maneira ideal de maximizar o espaço real da tela. No entanto, para volumes maiores de dados, uma única linha exigirá várias colunas, o que envia por push os itens que não cabem na tela para a direita. A Figura 4 mostra os produtos quando renderizados em uma DataList de linha única. Como há muitos produtos (mais de 80), o usuário terá que rolar para a direita para exibir informações sobre cada um dos produtos.

Figura 4: para fontes de dados suficientemente grandes, uma lista de dados de coluna única exigirá rolagem horizontal (clique para exibir a imagem em tamanho real)

Etapa 3: Exibindo dados em uma tabela de várias colunas e várias linhas

Para criar um DataList de várias colunas e várias linhas, precisamos definir a RepeatColumns propriedade como o número de colunas a serem exibidas. Por padrão, a RepeatColumns propriedade é definida como 0, o que fará com que DataList exiba todos os seus itens em uma única linha ou coluna (dependendo do valor da RepeatDirection propriedade).

Para nosso exemplo, vamos exibir três produtos por linha de tabela. Portanto, defina a RepeatColumns propriedade como 3. Depois de fazer essa alteração, reserve um momento para exibir os resultados em um navegador. Como mostra a Figura 5, os produtos agora estão listados em uma tabela de três colunas e várias linhas.

Figura 5: Três produtos são exibidos por linha (clique para exibir a imagem em tamanho real)

A RepeatDirection propriedade afeta como os itens na DataList são dispostos. A Figura 5 mostra os resultados com a RepeatDirection propriedade definida Horizontalcomo . Observe que os três primeiros produtos Chai, Chang e Aniseed Syrup são dispostos da esquerda para a direita, de cima para baixo. Os próximos três produtos (começando com o Tempero Cajun do Chef Anton) aparecem em uma linha abaixo dos três primeiros. A alteração da RepeatDirection propriedade de volta para Vertical, no entanto, dispõe esses produtos de cima para baixo, da esquerda para a direita, como ilustra a Figura 6.

Figura 6: Aqui, os produtos são dispostos verticalmente (clique para exibir a imagem em tamanho real)

O número de linhas exibidas na tabela resultante depende do número de registros totais associados à DataList. Precisamente, é o teto do número total de itens da fonte de dados divididos pelo valor da RepeatColumns propriedade. Como a Products tabela atualmente tem 84 produtos, que é divisível por 3, há 28 linhas. Se o número de itens na fonte de dados e o valor da RepeatColumns propriedade não forem divisível, a última linha ou coluna terá células em branco. Se o RepeatDirection for definido Verticalcomo , a última coluna terá células vazias; se RepeatDirection for Horizontal, a última linha terá as células vazias.

Resumo

O DataList, por padrão, lista seus itens em uma tabela de várias linhas de coluna única, que imita o layout de um GridView com um único TemplateField. Embora esse layout padrão seja aceitável, podemos maximizar o espaço real da tela exibindo vários itens de fonte de dados por linha. Fazer isso é simplesmente uma questão de definir a propriedade DataList como RepeatColumns o número de colunas a serem exibidas por linha. Além disso, a propriedade DataList pode RepeatDirection ser usada para indicar se o conteúdo da tabela de várias colunas e várias linhas deve ser disposto horizontalmente da esquerda para a direita, de cima para baixo ou verticalmente de cima para baixo, da esquerda para a direita.

Sobre o autor

Scott Mitchell, autor de sete livros do ASP/ASP.NET e fundador da 4GuysFromRolla.com, trabalha com tecnologias da Microsoft Web desde 1998. Scott trabalha como consultor independente, treinador e escritor. Seu último livro é Sams Teach Yourself ASP.NET 2.0 em 24 Horas. Ele pode ser contatado em mitchell@4GuysFromRolla.com. ou através de seu blog, que pode ser encontrado em http://ScottOnWriting.NET.

Agradecimentos Especiais

Esta série de tutoriais foi revisada por muitos revisores úteis. O revisor principal deste tutorial foi John Suru. Interessado em revisar meus próximos artigos do MSDN? Nesse caso, deixe-me uma linha em mitchell@4GuysFromRolla.com.

Anterior Avançar

Partilhar via