Filtragem mestre/detalhes com uma DropDownList (VB)

por Scott Mitchell

Baixar o aplicativo de exemplo ou baixar PDF

Neste tutorial, veremos como exibir os registros mestres 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 mestre/detalhado, no qual o relatório começa mostrando um conjunto de registros "mestre". O usuário pode fazer uma busca detalhada em um dos registros mestres, exibindo assim os "detalhes" do registro mestre. Os relatórios mestre/de detalhes são uma opção ideal para a visualização de relações um-para-muitos, como um relatório que mostra todas as categorias e, em seguida, permite que um usuário selecione uma determinada categoria e exiba seus produtos associados. Além disso, os relatórios mestre/detalhados são úteis para exibir informações detalhadas de tabelas "amplas" (aquelas que têm muitas colunas). Por exemplo, o nível "mestre" de um relatório mestre/detalhado 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 determinado produto mostraria os campos de produto adicionais (categoria, fornecedor, quantidade por unidade e assim por diante).

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

Etapa 1: exibindo as categorias em uma DropDownList

Nosso relatório mestre/detalhado listará as categorias em uma DropDownList, com os produtos do item de lista selecionados exibidos mais abaixo na página em um GridView. A primeira tarefa à frente de nós, então, é ter as categorias exibidas em uma DropDownList. Abra a página FilterByDropDownList.aspx na pasta Filtering, arraste em uma DropDownList da caixa de ferramentas para o designer da página e defina sua propriedade ID como Categories. Em seguida, clique no link escolher fonte de dados na marca inteligente da DropDownList. Isso exibirá o assistente de configuração de fonte de dados.

especificar a fonte de dados da DropDownList

Figura 1: especificar a fonte de dados da DropDownList (clique para exibir a imagem em tamanho normal)

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

adicionar um novo ObjectDataSource chamado CategoriesDataSource

Figura 2: adicionar um novo ObjectDataSource chamado CategoriesDataSource (clique para exibir a imagem em tamanho normal)

optar por usar a classe CategoriesBLL

Figura 3: escolha usar a classe CategoriesBLL (clique para exibir a imagem em tamanho normal)

configurar o ObjectDataSource para usar o método GetCategories ()

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

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 para o item de lista. Tenha o campo CategoryName como a exibição e CategoryID como o valor para cada item de lista.

fazer com que a DropDownList exiba o campo CategoryName e use CategoryID como o valor

Figura 5: fazer com que a DropDownList exiba o campo CategoryName e use CategoryID como o valor (clique para exibir a imagem em tamanho normal)

Neste ponto, temos um controle DropDownList que é preenchido com os registros da tabela Categories (todos são realizados em cerca de seis segundos). A Figura 6 mostra nosso progresso até o momento, quando visualizado por meio de um navegador.

um menu suspenso lista as categorias atuais

Figura 6: um menu suspenso lista as categorias atuais (clique para exibir a imagem em tamanho normal)

Etapa 2: adicionando os produtos GridView

A última etapa em nosso relatório mestre/detalhado é 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 controle de productsDataSource faça a remoção dos dados do método de GetProductsByCategoryID(categoryID) da classe ProductsBLL.

selecionar o método GetProductsByCategoryID (categoryID)

Figura 7: selecione o método de GetProductsByCategoryID(categoryID) (clique para exibir a imagem em tamanho normal)

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

definir o parâmetro categoryID como o valor das categorias DropDownList

Figura 8: definir o parâmetro categoryID para o valor da Categories DropDownList (clique para exibir a imagem em tamanho normal)

Reserve um tempo para conferir nosso progresso em um navegador. Ao visitar a página pela primeira vez, os produtos que pertencem à categoria selecionada (bebidas) são exibidos (como mostra a Figura 9), mas a alteração da 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 delas requer escrever qualquer código):

  • Defina apropriedade AutoPostBackde categorias DropDownListcomo true. (Você pode fazer isso verificando a opção Enable AutoPostBack na marca inteligente da DropDownList.) Isso irá disparar um postback sempre que o item selecionado da DropDownList for alterado pelo usuário. Portanto, quando o usuário seleciona uma nova categoria da DropDownList, um postback será acontecerdo e o GridView será atualizado com os produtos para a categoria selecionada recentemente. (Essa é a abordagem que usei neste tutorial.)
  • Adicione um controle Web de botão ao lado de DropDownList. Defina sua propriedade Text como atualizar ou algo semelhante. Com essa abordagem, o usuário precisará selecionar uma nova categoria e clicar no botão. Clicar no botão causará um postback e atualizará o GridView para listar os produtos da categoria selecionada.

As figuras 9 e 10 ilustram o relatório mestre/detalhado em ação.

ao visitar a página pela primeira vez, os produtos de bebidas são exibidos

Figura 9: ao visitar a página pela primeira vez, os produtos de bebidas são exibidos (clique para exibir a imagem em tamanho normal)

selecionar um novo produto (produzir) gera automaticamente um PostBack, atualizando o GridView

Figura 10: selecionar um novo produto (produzir) gera automaticamente um postback, atualizando o GridView (clique para exibir a imagem em tamanho normal)

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

Ao visitar pela primeira vez o FilterByDropDownList.aspx página, o primeiro item de lista da DropDownList de categorias (bebidas) é selecionado por padrão, mostrando os produtos de bebidas no GridView. Em vez de mostrar os produtos da primeira categoria, poderemos, em vez disso, ter um item DropDownList selecionado que diz algo como, "--escolher uma categoria--".

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

adicionar uma--escolha uma categoria--item de lista

Figura 11: adicionar um – escolha uma categoria – item de lista (clique para exibir a imagem em tamanho normal)

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 a AppendDataBoundItems do controle DropDownList como true porque, quando as categorias estiverem vinculadas a DropDownList do ObjectDataSource, eles substituirão quaisquer itens de lista adicionados manualmente se AppendDataBoundItems não for verdadeiro.

Defina a propriedade AppendDataBoundItems como true

Figura 12: definir a propriedade AppendDataBoundItems como true

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

na página inicial carregar nenhum produto é exibido

Figura 13: na página inicial, não é possível carregar nenhum produto (clique para exibir a imagem em tamanho normal)

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

Public Function GetProductsByCategoryID(categoryID As Integer) _
    As Northwind.ProductsDataTable
    If categoryID < 0 Then
        Return GetProducts()
    Else
        Return Adapter.GetProductsByCategoryID(categoryID)
    End If
End Function

A técnica usada aqui é semelhante à abordagem que usamos para exibir todos os fornecedores de volta no tutorial de parâmetros declarativos , embora, para este exemplo, estamos usando um valor de -1 para indicar que todos os registros devem ser recuperados em oposição a Nothing. Isso ocorre porque o parâmetro categoryID do método GetProductsByCategoryID(categoryID) espera como um valor inteiro passado, enquanto no tutorial de parâmetros declarativos que estávamos passando em 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.

todos os produtos agora estão listados por padrão

Figura 14: todos os produtos agora são listados por padrão (clique para exibir a imagem em tamanho normal)

Resumo

Ao exibir dados relacionados hierarquicamente, ele geralmente ajuda a apresentar os dados usando relatórios mestre/detalhados, dos quais o usuário pode começar a usar os dados da parte superior da hierarquia e fazer uma busca detalhada nos detalhes. Neste tutorial, examinamos a criação de um relatório mestre/detalhado simples que mostra os produtos de uma categoria selecionada. Isso foi feito usando uma DropDownList para a lista de categorias e um GridView para os produtos que pertencem à categoria selecionada.

No próximo tutorial , vamos pegar a interface DropDownList um passo adiante, usando dois DropDownLists.

Boa programação!

Sobre o autor

Scott Mitchell, autor de sete livros sobre ASP/ASP. net e fundador da 4guysfromrolla.com, tem trabalhado com tecnologias Web da Microsoft desde 1998. Scott trabalha como consultor, instrutor e escritor independentes. Seu livro mais recente é que a Sams ensina a ASP.NET 2,0 em 24 horas. Ele pode ser acessado em mitchell@4GuysFromRolla.com. ou por meio de seu blog, que pode ser encontrado em http://ScottOnWriting.NET.