Filtragem mestre/detalhe com um controle DropDownList e GridView (C#)

por Scott Mitchell

Baixar PDF

Neste tutorial, veremos como exibir os registros master em um controle DropDownList e os detalhes do item de lista selecionado em um GridView.

Introdução

Um tipo comum de relatório é o relatório de master/detalhes, no qual o relatório começa mostrando algum conjunto de registros "master". Em seguida, o usuário pode fazer uma busca detalhada em um dos registros master, exibindo assim os "detalhes" desse registro master. Relatórios mestres/detalhados são uma opção ideal para visualizar relações um-para-muitos, como um relatório mostrando todas as categorias e, em seguida, permitindo que um usuário selecione uma categoria específica e exiba seus produtos associados. Além disso, master/relatórios detalhados são úteis para exibir informações detalhadas de tabelas particularmente "amplas" (que têm muitas colunas). Por exemplo, o nível "master" de um relatório de master/detalhes pode mostrar apenas o nome do produto e o preço unitário dos produtos no banco de dados e fazer drill down em um produto específico mostraria os campos de produto adicionais (categoria, fornecedor, quantidade por unidade e assim por diante).

Há muitas maneiras pelas quais um relatório de master/detalhes pode ser implementado. Neste e nos próximos três tutoriais, examinaremos uma variedade de relatórios de master/detalhes. Neste tutorial, veremos como exibir os registros master em um controle DropDownList e os detalhes do item de lista selecionado em um GridView. Em particular, o relatório de master/detalhes deste tutorial listará as informações de categoria e produto.

Etapa 1: Exibindo as categorias em um DropDownList

Nosso relatório de master/detalhes listará as categorias em um DropDownList, com os produtos do item de lista selecionado exibidos mais abaixo na página em um GridView. A primeira tarefa à nossa frente, então, é ter as categorias exibidas em um DropDownList. Abra a FilterByDropDownList.aspx página na Filtering pasta, arraste um DropDownList da Caixa de Ferramentas para o designer da página e defina sua ID propriedade como Categories. Em seguida, clique no link Escolher Fonte de Dados da marca inteligente dropDownList. Isso exibirá o assistente de Configuração da Fonte de Dados.

Figura 1: Especificar a fonte de dados do DropDownList (clique para exibir a imagem em tamanho real)

Escolha adicionar um novo ObjectDataSource chamado CategoriesDataSource que invoca o CategoriesBLL método da GetCategories() classe.

Figura 2: Adicionar um novo objetoDataSource nomeado CategoriesDataSource (clique para exibir a imagem em tamanho real)

Figura 3: Escolher usar a CategoriesBLL classe (clique para exibir a imagem em tamanho real)

Figura 4: Configurar o ObjectDataSource para usar o GetCategories() método (clique para exibir a imagem em tamanho real)

Depois de configurar o ObjectDataSource, ainda precisamos especificar qual campo de fonte de dados deve ser exibido em DropDownList e qual deles deve ser associado como o valor do item de lista. Tenha o CategoryName campo como a exibição e CategoryID como o valor de cada item de lista.

Figura 5: Fazer 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 Categories tabela (tudo realizado em cerca de seis segundos). A Figura 6 mostra nosso progresso até agora quando exibido por meio de um navegador.

Figura 6: um Drop-Down Listas categorias atuais (clique para exibir a imagem em tamanho real)

Etapa 2: adicionando o Products GridView

Essa última etapa em nosso relatório de master/detalhes é listar os produtos associados à categoria selecionada. Para fazer isso, adicione um GridView à página e crie um novo ObjectDataSource chamado productsDataSource. Fazer com que o productsDataSource controle corte seus dados do ProductsBLL método da GetProductsByCategoryID(categoryID) classe.

Figura 7: Selecionar o GetProductsByCategoryID(categoryID) método (clique para exibir a imagem em tamanho real)

Depois de escolher esse método, o assistente ObjectDataSource nos solicita o valor do parâmetro do categoryID método. Para usar o valor do item DropDownList selecionado categories , defina a origem do parâmetro como Control e ControlID como Categories.

Figura 8: Definir o categoryID parâmetro como o valor de Categories DropDownList (clique para exibir a imagem em tamanho real)

Reserve um momento para marcar nosso progresso em um navegador. Ao visitar a página pela primeira vez, esses produtos pertencem à categoria selecionada (Bebidas) são exibidos (conforme mostrado na Figura 9), mas alterar o DropDownList não atualiza os dados. Isso ocorre porque um postback deve ocorrer para que o GridView seja atualizado. Para fazer isso, temos duas opções (nenhuma das quais requer a gravação de nenhum código):

• Defina as categoriaspropriedade AutoPostBack de DropDownList como True. (Você pode fazer isso verificando a opção Habilitar AutoPostBack na marca inteligente dropDownList.) Isso disparará um postback sempre que o item selecionado do DropDownList for alterado pelo usuário. Portanto, quando o usuário selecionar uma nova categoria no DropDownList, um postback ocorrerá e o GridView será atualizado com os produtos para a categoria recém-selecionada. (Essa é a abordagem que usei neste tutorial.)
• Adicione um controle web de botão ao lado de DropDownList. Defina sua Text propriedade como Refresh ou algo semelhante. Com essa abordagem, o usuário precisará selecionar uma nova categoria e, em seguida, clicar no Botão. Clicar no Botão fará com que um postback e atualize o GridView para listar os produtos da categoria selecionada.

Os números 9 e 10 ilustram o relatório de master/detalhes 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 o GridView (clique para exibir a imagem em tamanho real)

Adicionando um item de lista "-- Escolher uma categoria --"

Ao visitar FilterByDropDownList.aspx a página pela primeira vez, o primeiro item de lista (Bebidas) do DropDownList das categorias é selecionado por padrão, mostrando os produtos de bebidas no GridView. Em vez de mostrar os produtos da primeira categoria, talvez queiramos ter um item DropDownList selecionado que diga algo como "-- Escolha uma categoria --".

Para adicionar um novo item de lista ao DropDownList, vá para o janela Propriedades e clique nas reticências na Items propriedade . Adicione um novo item de lista com o Text "-- Escolher uma Categoria --" e o Value-1.

Figura 11: Adicionar um -- Escolher uma Categoria -- Item de Lista (Clique para exibir a imagem em tamanho real)

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="-1">
       -- Choose a Category --
    </asp:ListItem>
</asp:DropDownList>

Além disso, precisamos definir o controle DropDownList como AppendDataBoundItems True porque quando as categorias estiverem associadas ao DropDownList do ObjectDataSource, elas substituirão todos os itens de lista adicionados manualmente se AppendDataBoundItems não for True.

Figura 12: Definir a AppendDataBoundItems propriedade como True

Após essas alterações, ao visitar a página pela primeira vez, a opção "-- Escolher uma Categoria --" é selecionada e nenhum produto é exibido.

Figura 13: Na página inicial, não há nenhum produto exibido (clique para exibir a imagem em tamanho real)

O motivo pelo qual nenhum produto é exibido quando porque o item de lista "-- Escolher uma Categoria --" está selecionado é porque seu valor é -1 e não há produtos no banco de dados com um CategoryID de -1. Se esse é o comportamento que você deseja, então você terminou neste momento! Se, no entanto, você quiser exibir todas as categorias quando o item de lista "-- Escolher uma Categoria --" estiver selecionado, retorne à ProductsBLL classe e personalize o GetProductsByCategoryID(categoryID) método para que ele invoque o GetProducts() método se o parâmetro passado categoryID for menor que zero:

public Northwind.ProductsDataTable GetProductsByCategoryID(int categoryID)
{
    if (categoryID < 0)
        return GetProducts();
    else
        return Adapter.GetProductsByCategoryID(categoryID);
}

A técnica usada aqui é semelhante à abordagem que usamos para exibir todos os fornecedores de volta no tutorial Parâmetros Declarativos , embora, neste exemplo, estejamos usando um valor de -1 para indicar que todos os registros devem ser recuperados em vez nullde . Isso ocorre porque o categoryID parâmetro do GetProductsByCategoryID(categoryID) método espera como valor inteiro passado, enquanto no tutorial Parâmetros Declarativos estávamos passando um parâmetro de entrada de cadeia de caracteres.

A Figura 14 mostra uma captura de tela de FilterByDropDownList.aspx quando a opção "-- Escolher uma Categoria --" está selecionada. Aqui, todos os produtos são exibidos por padrão e o usuário pode restringir a exibição escolhendo uma categoria específica.

Figura 14: Todos os produtos agora estão listados por padrão (clique para exibir a imagem em tamanho real)

Resumo

Ao exibir dados relacionados hierarquicamente, muitas vezes ajuda a apresentar os dados usando relatórios de master/detalhes, dos quais o usuário pode começar a examinar os dados da parte superior da hierarquia e detalhar os detalhes. Neste tutorial, examinamos a criação de um relatório simples de master/detalhes mostrando os produtos de uma categoria selecionada. Isso foi feito usando um DropDownList para a lista de categorias e um GridView para os produtos que pertencem à categoria selecionada.

No próximo tutorial , levaremos a interface DropDownList mais uma etapa, usando duas DropDownLists.

Programação feliz!

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.

Próximo