Filtragem mestre/detalhada com um DropDownList e DataList (C#)
por Scott Mitchell
Neste tutorial, vemos como exibir relatórios mestres/detalhados em uma única página da Web usando DropDownLists para exibir os registros "mestres" e uma DataList para exibir os "detalhes".
Introdução
O relatório mestre/detalhe, que criamos pela primeira vez usando um GridView no tutorial anterior Filtragem Mestre/Detalhe com um DropDownList , começa mostrando algum conjunto de registros "mestre". O usuário pode, então, detalhar um dos registros mestre, visualizando assim os "detalhes" desse registro mestre. Os relatórios mestre/detalhados são a opção ideal para visualizar relações um-para-muitos e para exibir informações detalhadas de tabelas particularmente "largas" (aquelas que têm muitas colunas). Exploramos como implementar relatórios mestres/detalhados usando os controles GridView e DetailsView em tutoriais anteriores. Neste tutorial e nos próximos dois, reexaminaremos esses conceitos, mas nos concentraremos no uso dos controles DataList e Repeater.
Neste tutorial, veremos como usar um DropDownList para conter os registros "mestres", com os registros "detalhes" exibidos em um DataList.
Etapa 1: Adicionando as páginas da Web do tutorial mestre/detalhado
Antes de começarmos este tutorial, vamos primeiro adicionar a pasta e ASP.NET páginas necessárias para este tutorial e as próximas duas que lidam com relatórios mestres/detalhados usando os controles DataList e Repeater. Comece criando uma nova pasta no projeto chamada DataListRepeaterFiltering. Em seguida, adicione as cinco páginas ASP.NET a seguir a essa pasta, tendo todas elas configuradas para usar a página Site.mastermestra:
Default.aspxFilterByDropDownList.aspxCategoryListMaster.aspxProductsForCategoryDetails.aspxCategoriesAndProducts.aspx
Figura 1: Criar uma DataListRepeaterFiltering pasta e adicionar as páginas do ASP.NET tutorial
Em seguida, abra a Default.aspx página e arraste o SectionLevelTutorialListing.ascx Controle de Usuário da UserControls pasta para a superfície Design. Esse Controle de Usuário, que criamos no tutorial Páginas Mestras e Navegação no 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 Default.aspx (clique para exibir a SectionLevelTutorialListing.ascx imagem em tamanho real)
Para que a lista com marcadores exiba os tutoriais mestres/detalhados que criaremos, precisamos adicioná-los ao mapa do site. Abra o Web.sitemap arquivo e adicione a seguinte marcação após a marcação do nó do mapa do site "Exibindo dados com a lista de dados e o repetidor":
<siteMapNode
title="Master/Detail Reports with the DataList and Repeater"
description="Samples of Reports that Use the DataList and Repeater Controls"
url="~/DataListRepeaterFiltering/Default.aspx">
<siteMapNode
title="Filter by Drop-Down List"
description="Filter results using a drop-down list."
url="~/DataListRepeaterFiltering/FilterByDropDownList.aspx" />
<siteMapNode
title="Master/Detail Across Two Pages"
description="Master records on one page, detail records on another."
url="~/DataListRepeaterFiltering/CategoryListMaster.aspx" />
<siteMapNode
title="Maser/Detail on One Page"
description="Master records in the left column, details on the right,
both on the same page."
url="~/DataListRepeaterFiltering/CategoriesAndProducts.aspx" />
</siteMapNode>
Figura 3: Atualizar o mapa do site para incluir as novas páginas ASP.NET
Etapa 2: Exibindo as categorias em um DropDownList
Nosso relatório mestre/detalhado listará as categorias em uma DropDownList, com os produtos do item de lista selecionado exibidos mais abaixo na página em uma DataList. A primeira tarefa à nossa frente, então, é ter as categorias exibidas em um DropDownList. Comece abrindo a FilterByDropDownList.aspx DataListRepeaterFiltering página na pasta e arraste um DropDownList da Caixa de Ferramentas para o designer da página. Em seguida, defina a propriedade do DropDownList ID como Categories. Clique no link Escolher Fonte de Dados na marca inteligente do DropDownList e crie um novo ObjectDataSource chamado CategoriesDataSource.
Figura 4: Adicionar um novo ObjectDataSource chamado CategoriesDataSource (clique para exibir a imagem em tamanho real)
Configure o novo ObjectDataSource de modo que ele invoque o CategoriesBLL método da GetCategories() classe. Depois de configurar o ObjectDataSource, ainda precisamos especificar qual campo de fonte de dados deve ser exibido no DropDownList e qual deve ser associado como o valor de cada item da lista. Tenha o CategoryName campo como exibição e CategoryID como valor para cada item da lista.
Figura 5: Faça com que o DropDownList exiba o CategoryName campo e use CategoryID como o valor (clique para exibir a imagem em tamanho real)
Neste ponto, temos um controle DropDownList que é preenchido com os registros da tabela (tudo realizado em cerca de Categories seis segundos). A Figura 6 mostra nosso progresso até agora quando visualizado por meio de um navegador.
Figura 6: Uma lista suspensa das categorias atuais (clique para exibir a imagem em tamanho real)
Etapa 2: Adicionando a lista de dados de produtos
A última etapa em nosso relatório mestre/detalhado é listar os produtos associados à categoria selecionada. Para fazer isso, adicione um DataList à página e crie um novo ObjectDataSource chamado ProductsByCategoryDataSource. Faça com que o ProductsByCategoryDataSource controle recupere seus dados do ProductsBLL método da GetProductsByCategoryID(categoryID) classe. Como esse relatório mestre/detalhado é somente leitura, escolha a opção (Nenhum) nas guias INSERT, UPDATE e DELETE.
Figura 7: Selecione o método (clique para exibir a GetProductsByCategoryID(categoryID) imagem em tamanho real)
Depois de clicar em Avançar, o assistente ObjectDataSource nos solicita a origem do valor do GetProductsByCategoryID(categoryID) parâmetro do categoryID método. Para usar o valor do item DropDownList selecionado categories , defina a fonte do parâmetro como Control e o ControlID como Categories.
Figura 8: Definir o categoryID parâmetro como o valor do DropDownList (clique para exibir a Categories imagem em tamanho real)
Ao concluir o assistente Configurar Fonte de Dados, o Visual Studio gerará automaticamente um ItemTemplate para o DataList que exibe o nome e o valor de cada campo de dados. Vamos aprimorar a DataList para usar um ItemTemplate que exiba apenas o nome, a categoria, o fornecedor, a quantidade por unidade e o preço do produto, juntamente com um SeparatorTemplate que injete um <hr> elemento entre cada item. Vou usar o ItemTemplate exemplo de um exemplo no tutorial Exibindo dados com a lista de dados e os controles do repetidor, mas sinta-se à vontade para usar qualquer marcação de modelo que achar mais atraente visualmente.
Depois de fazer essas alterações, sua DataList e sua marcação de ObjectDataSource devem ser semelhantes às seguintes:
<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
DataSourceID="ProductsByCategoryDataSource" 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>
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ProductsByCategoryDataSource" runat="server"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetProductsByCategoryID" TypeName="ProductsBLL">
<SelectParameters>
<asp:ControlParameter ControlID="Categories" Name="categoryID"
PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
Reserve um momento para verificar nosso progresso em um navegador. Ao visitar a página pela primeira vez, os produtos pertencentes à categoria selecionada (Bebidas) são exibidos (conforme mostrado na Figura 9), mas a alteração do DropDownList não atualiza os dados. Isso ocorre porque um postback deve ocorrer para que o DataList seja atualizado. Para fazer isso, podemos definir a propriedade DropDownList AutoPostBack como true ou adicionar um controle Web Button à página. Para este tutorial, optei por definir a propriedade do DropDownList AutoPostBack como true.
As Figuras 9 e 10 ilustram o relatório mestre/detalhado em ação.
Figura 9: Ao visitar a página pela primeira vez, os produtos de bebidas são exibidos (clique para exibir a imagem em tamanho real)
Figura 10: Selecionar um novo produto (Produzir) causa automaticamente um PostBack, atualizando a DataList (clique para exibir a imagem em tamanho real)
Adicionando um item de lista "-- Escolha uma categoria --"
Ao visitar a FilterByDropDownList.aspx página pela primeira vez, o primeiro item da lista das categorias DropDownList (Bebidas) é selecionado por padrão, mostrando os produtos de bebidas na DataList. No tutorial Filtragem Mestre/Detalhada com uma Lista Suspensa, adicionamos uma opção "-- Escolha uma Categoria --" à Lista Suspensa que foi selecionada por padrão e, quando selecionada, exibiu todos os produtos no banco de dados. Essa abordagem era gerenciável ao listar os produtos em um GridView, pois cada linha de produto ocupava uma pequena quantidade de espaço na tela. Com o DataList, no entanto, as informações de cada produto consomem uma parte muito maior da tela. Vamos ainda adicionar uma opção "-- Escolha uma categoria --" e selecioná-la por padrão, mas em vez de mostrar todos os produtos quando selecionada, vamos configurá-la para que não mostre nenhum produto.
Para adicionar um novo item de lista ao DropDownList, vá para a janela Propriedades e clique nas reticências na Items propriedade. Adicione um novo item de lista com o Text "-- Escolha uma categoria --" e o Value 0.
Figura 11: Adicionar um item de lista "-- Escolha uma categoria --"
Como alternativa, você pode adicionar o item de lista adicionando a seguinte marcação ao DropDownList:
<asp:DropDownList ID="categories" runat="server" AutoPostBack="True"
DataSourceID="CategoriesDataSource" DataTextField="CategoryName"
DataValueField="CategoryID" EnableViewState="False">
<asp:ListItem Value="0">-- Choose a Category --</asp:ListItem>
</asp:DropDownList>
Além disso, precisamos definir o controle AppendDataBoundItems DropDownList como true porque, se ele estiver definido como false (o padrão), quando as categorias forem associadas ao DropDownList do ObjectDataSource, elas substituirão todos os itens de lista adicionados manualmente.
Figura 12: Definir a AppendDataBoundItems propriedade como True
O motivo pelo qual escolhemos o valor 0 para o item de lista "-- Escolha uma categoria --" é porque não há categorias no sistema com um valor de , portanto, nenhum registro de produto será retornado quando o item de 0lista "-- Escolha uma categoria --" for selecionado. Para confirmar isso, reserve um momento para visitar a página por meio de um navegador. Como mostra a Figura 13, ao visualizar inicialmente a página, o item da lista "-- Choose a Category --" é selecionado e nenhum produto é exibido.
Figura 13: Quando o item da lista "-- Escolha uma categoria --" é selecionado, nenhum produto é exibido (clique para exibir a imagem em tamanho real)
Se você preferir exibir todos os produtos quando a opção "-- Escolher uma categoria --" estiver selecionada, use um valor de -1 . O leitor astuto se lembrará de que, no tutorial Filtragem de Mestre/Detalhes com um DropDownList , atualizamos o ProductsBLL método da GetProductsByCategoryID(categoryID) classe para que, se um categoryID valor de fosse passado, todos os registros do -1 produto fossem retornados.
Resumo
Ao exibir dados hierarquicamente relacionados, geralmente é útil apresentar os dados usando relatórios mestre/detalhados, a partir dos quais o usuário pode começar a examinar os dados do topo da hierarquia e detalhar. Neste tutorial, examinamos a criação de um relatório mestre/detalhado simples mostrando os produtos de uma categoria selecionada. Isso foi feito usando um DropDownList para a lista de categorias e um DataList para os produtos pertencentes à categoria selecionada.
No próximo tutorial, veremos como separar os registros mestre e de detalhes em duas páginas. Na primeira página, será exibida uma lista de registros "mestre", com um link para visualizar os detalhes. Clicar no link levará o usuário para a segunda página, que exibirá os detalhes do registro mestre selecionado.
Boa programação!
Sobre o autor
Scott Mitchell, autor de sete livros ASP/ASP.NET e fundador da 4GuysFromRolla.com, trabalha com tecnologias da Web da Microsoft desde 1998. Scott trabalha como consultor, instrutor e escritor independente. 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 a...
Esta série de tutoriais foi revisada por muitos revisores úteis. O revisor principal deste tutorial foi Randy Schmidt. Interessado em revisar meus próximos artigos do MSDN? Em caso afirmativo, envie-me uma mensagem para mitchell@4GuysFromRolla.com.