Filtragem mestre/detalhe em duas páginas com o GridView (VB)

por Scott Mitchell

Descarregar PDF

Neste tutorial, implementaremos esse padrão usando um GridView para listar os fornecedores no banco de dados. Cada linha de fornecedor no GridView conterá um link Exibir produtos que, quando clicado, levará o usuário a uma página separada que lista esses produtos para o fornecedor selecionado.

Introdução

Nos dois tutoriais anteriores, vimos como exibir relatórios mestres/detalhados em uma única página da Web usando DropDownLists para exibir os registros "mestre" e um controle GridView ou DetailsView para exibir os "detalhes". Outro padrão comum usado para relatórios mestres/detalhes é ter os registros mestre em uma página da Web e os detalhes mostrados em outra. Um site de fórum, como o ASP.NET Forums, é um ótimo exemplo desse padrão na prática. Os ASP.NET Fóruns são compostos por uma variedade de fóruns Introdução, Web Forms, Controles de Apresentação de Dados e assim por diante. Cada fórum é composto por muitos tópicos e cada thread é composto por um número de posts. Na página inicial do ASP.NET Forums, os fóruns estão listados. Clicar em um fórum leva você a uma ShowForum.aspx página, que lista os tópicos para esse fórum. Da mesma forma, clicar em um thread leva você para ShowPost.aspx, que exibe as postagens para o thread que foi clicado.

Neste tutorial, implementaremos esse padrão usando um GridView para listar os fornecedores no banco de dados. Cada linha de fornecedor no GridView conterá um link Exibir produtos que, quando clicado, levará o usuário a uma página separada que lista esses produtos para o fornecedor selecionado.

Etapa 1: AdicionarSupplierListMaster.aspxeProductsForSupplierDetails.aspxpáginas àFilteringpasta

Ao definir o layout da página no terceiro tutorial, adicionamos várias páginas "iniciais" nas BasicReportingpastas , Filteringe CustomFormatting . No entanto, não adicionamos uma página inicial para este tutorial naquele momento, então reserve um momento para adicionar duas novas páginas à Filtering pasta: SupplierListMaster.aspx e ProductsForSupplierDetails.aspx. SupplierListMaster.aspx listará os registros "mestres" (os fornecedores) enquanto ProductsForSupplierDetails.aspx exibirá os produtos para o fornecedor selecionado.

Ao criar essas duas novas páginas, certifique-se de associá-las à Site.master página mestra.

Figura 1: Adicionar as páginas SupplierListMaster.aspx e ProductsForSupplierDetails.aspx à pasta Filtering

Além disso, ao adicionar novas páginas ao projeto, certifique-se de atualizar o arquivo de mapa do site, Web.sitemapde acordo. Para este tutorial, basta adicionar a SupplierListMaster.aspx página ao mapa do site usando o seguinte conteúdo XML como filho do elemento Relatórios de Filtragem <siteMapNode> :

<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
  title="Master/Detail Across Two Pages"
  description="Master records on one page, detail records on another." />

Etapa 2: Exibindo a lista de fornecedores emSupplierListMaster.aspx

Com as páginas SupplierListMaster.aspx e ProductsForSupplierDetails.aspx criadas, o nosso próximo passo é criar o GridView dos fornecedores em SupplierListMaster.aspx. Adicione um GridView à página e associe-o a um novo ObjectDataSource. Este ObjectDataSource deve usar o SuppliersBLL método da GetSuppliers() classe para retornar todos os fornecedores.

Figura 2: Selecione a classe (SuppliersBLL imagem em tamanho real)

Figura 3: Configurar o ObjectDataSource para usar o método (GetSuppliers() imagem em tamanho real)

Precisamos incluir um link intitulado Exibir Produtos em cada linha do GridView que, ao ser clicado, leva o usuário para ProductsForSupplierDetails.aspx, passando pelo valor da linha selecionada SupplierID através do querystring. Por exemplo, se o usuário clicar no link Exibir produtos para o fornecedor Tokyo Traders (que tem um SupplierID valor de 4), eles devem ser enviados para ProductsForSupplierDetails.aspx?SupplierID=4.

Para fazer isso, adicione um HyperLinkField ao GridView, que adiciona um hiperlink para cada linha GridView. Comece clicando no link Editar colunas da etiqueta inteligente do GridView. Em seguida, selecione o HyperLinkField na lista no canto superior esquerdo e clique em Adicionar para incluir o HyperLinkField na lista de campos do GridView.

Figura 4: Adicionar um HyperLinkField ao GridView (Clique para visualizar a imagem em tamanho real)

O HyperLinkField pode ser configurado para usar os mesmos valores de texto ou URL do link em cada linha GridView ou pode basear esses valores nos valores de dados vinculados a cada linha específica. Para especificar um valor estático em todas as linhas, use as propriedades Text ou NavigateUrl do HyperLinkField. Como queremos que o texto do link seja o mesmo para todas as linhas, defina a propriedade HyperLinkField Text como View Products.

Figura 5: Definir a propriedade do Text HyperLinkField para exibir produtos (Clique para visualizar a imagem em tamanho real)

Para definir os valores de texto ou URL a serem baseados nos dados subjacentes vinculados à linha GridView, especifique os campos de dados dos quais os valores de texto ou URL devem ser extraídos nas DataTextField propriedades ou DataNavigateUrlFields . DataTextField só pode ser definido como um único campo de dados; DataNavigateUrlFields, no entanto, pode ser definido como uma lista delimitada por vírgulas de campos de dados. Frequentemente precisamos basear o texto ou URL em uma combinação do valor do campo de dados da linha atual e alguma marcação estática. Neste tutorial, por exemplo, queremos que a URL dos links do HyperLinkField seja ProductsForSupplierDetails.aspx?SupplierID=supplierID, onde supplierID é o valor de SupplierID cada linha do GridView. Observe que precisamos de valores estáticos e controlados por dados aqui: a ProductsForSupplierDetails.aspx?SupplierID= parte da URL do link é estática, enquanto a supplierID parte é orientada por dados, pois seu valor é o próprio SupplierID valor de cada linha.

Para indicar uma combinação de valores estáticos e controlados por dados, use as DataTextFormatString propriedades e DataNavigateUrlFormatString . Nessas propriedades, insira a marcação estática conforme necessário e use o marcador {0} onde você deseja que o valor do campo especificado nas DataTextField propriedades ou DataNavigateUrlFields apareça. Se a DataNavigateUrlFields propriedade tiver vários campos especificados, use {0} onde você deseja inserir o primeiro valor de campo, {1} para o segundo valor de campo e assim por diante.

Aplicando isso ao nosso tutorial, precisamos definir a DataNavigateUrlFields propriedade como SupplierID, já que esse é o campo de dados cujo valor precisamos personalizar por linha e a DataNavigateUrlFormatString propriedade como ProductsForSupplierDetails.aspx?SupplierID={0}.

Figura 6: Configurar o HyperLinkField para incluir a URL de link adequada com base no SupplierID (Clique para visualizar a imagem em tamanho real)

Depois de adicionar o HyperLinkField, sinta-se à vontade para personalizar e reordenar os campos do GridView. A marcação a seguir mostra o GridView após ter efetuado algumas pequenas personalizações a nível de campo.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="SupplierID" DataSourceID="ObjectDataSource1"
    EnableViewState="False">
    <Columns>
        <asp:HyperLinkField DataNavigateUrlFields="SupplierID"
          DataNavigateUrlFormatString=
          "ProductsForSupplierDetails.aspx?SupplierID={0}"
            Text="View Products" />
        <asp:BoundField DataField="CompanyName"
            HeaderText="Company" SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City"
            SortExpression="City" />
        <asp:BoundField DataField="Country"
            HeaderText="Country" SortExpression="Country" />
    </Columns>
</asp:GridView>

Reserve um momento para visualizar a SupplierListMaster.aspx num navegador. Como mostra a Figura 7, a página atualmente lista todos os fornecedores, incluindo um link Exibir produtos. Ao clicar no link Ver produtos, será levado para ProductsForSupplierDetails.aspx, transmitindo as informações do fornecedor SupplierID na sequência de consulta.

Figura 7: Cada linha de fornecedor contém um link Exibir produtos (Clique para visualizar a imagem em tamanho real)

Etapa 3: Listar os produtos do fornecedor emProductsForSupplierDetails.aspx

Neste ponto, a SupplierListMaster.aspx página está enviando usuários para ProductsForSupplierDetails.aspx, passando o fornecedor SupplierID selecionado na querystring. A etapa final do tutorial é exibir os produtos em um GridView em ProductsForSupplierDetails.aspx cujo SupplierID é igual ao SupplierID passado através da querystring. Para fazer isso, comece adicionando um GridView à ProductsForSupplierDetails.aspx página, usando um novo controle ObjectDataSource chamado ProductsBySupplierDataSource que invoca o GetProductsBySupplierID(supplierID) método da ProductsBLL classe.

Figura 8: Adicionar um novo ObjectDataSource nomeado ProductsBySupplierDataSource (Clique para visualizar a imagem em tamanho real)

Figura 9: Selecione a classe (ProductsBLL imagem em tamanho real)

Figura 10: Fazer com que o ObjectDataSource invoque o método (GetProductsBySupplierID(supplierID) imagem em tamanho real)

A etapa final do assistente Configurar Fonte de Dados solicita-nos que forneçamos a origem do parâmetro GetProductsBySupplierID(supplierID) do método supplierID. Para usar o valor querystring, defina a origem do parâmetro como QueryString e digite o nome do valor querystring a ser usado na caixa de texto QueryStringField (SupplierID).

Figura 11: Preencher o valor do parâmetro a partir do valor do supplierID Querystring (SupplierID)

É só isso! A Figura 12 mostra a ProductsForSupplierDetails.aspx página quando visitada clicando no link Tokyo Traders de SupplierListMaster.aspx.

Figura 12: Os produtos fornecidos pelos comerciantes de Tóquio são mostrados (Clique para ver a imagem em tamanho real)

Exibindo informações do fornecedor emProductsForSupplierDetails.aspx

Como mostra a Figura 12, a página ProductsForSupplierDetails.aspx simplesmente lista os produtos que são fornecidos pela SupplierID especificada na string de consulta. Alguém enviado diretamente para esta página, no entanto, não saberia que a figura 12 exibe os produtos da Tokyo Traders. Para remediar isso, também podemos exibir informações do fornecedor nesta página.

Comece adicionando um FormView acima do GridView dos produtos. Crie um novo controle ObjectDataSource nomeado SuppliersDataSource que invoca o SuppliersBLL método da GetSupplierBySupplierID(supplierID) classe.

Figura 13: Selecione a classe (SuppliersBLL imagem em tamanho real)

Figura 14: Fazer com que o ObjectDataSource invoque o método (GetSupplierBySupplierID(supplierID) imagem em tamanho real)

Tal como acontece com o ProductsBySupplierDataSource, atribua ao parâmetro supplierID o valor da string de consulta SupplierID.

Figura 15: Preencher o valor do parâmetro com o valor da cadeia de consulta (supplierID)

Ao vincular o FormView ao ObjectDataSource no modo Design, o Visual Studio criará automaticamente os controles da Web FormView ItemTemplate, InsertItemTemplate e EditItemTemplate com Label e TextBox para cada um dos campos de dados retornados pelo ObjectDataSource. Uma vez que queremos apenas exibir informações do fornecedor, sinta-se à vontade para remover o InsertItemTemplate e EditItemTemplate. Em seguida, edite o ItemTemplate para que ele exiba o nome da empresa do fornecedor em um <h3> elemento e o endereço, cidade, país/região e número de telefone abaixo do nome da empresa. Como alternativa, podes definir manualmente o FormView e criar a marcação DataSourceID, como fizemos no tutorial "ItemTemplate".

Após essas edições, a marcação declarativa do FormView deve ser semelhante à seguinte:

<asp:FormView ID="FormView1" runat="server" DataKeyNames="SupplierID"
    DataSourceID="suppliersDataSource" EnableViewState="False">
    <ItemTemplate>
        <h3><%# Eval("CompanyName") %></h3>
        <p>
            <asp:Label ID="AddressLabel" runat="server"
                Text='<%# Bind("Address") %>'></asp:Label><br />
            <asp:Label ID="CityLabel" runat="server"
                Text='<%# Bind("City") %>'></asp:Label>,
            <asp:Label ID="CountryLabel" runat="server"
                Text='<%# Bind("Country") %>'></asp:Label><br />
            Phone:
            <asp:Label ID="PhoneLabel" runat="server"
                Text='<%# Bind("Phone") %>'></asp:Label>
        </p>
    </ItemTemplate>
</asp:FormView>

A Figura 16 mostra uma captura de tela da ProductsForSupplierDetails.aspx página após a inclusão das informações do fornecedor detalhadas acima.

Figura 16: A lista de produtos inclui um resumo sobre o fornecedor (Clique para visualizar a imagem em tamanho real)

Aplicando os retoques finais na interface do utilizadorProductsForSupplierDetails.aspx

Para melhorar a experiência do usuário para este relatório, há algumas adições que devemos fazer à ProductsForSupplierDetails.aspx página. Atualmente, a única maneira de um usuário ir da ProductsForSupplierDetails.aspx página de volta para a lista de fornecedores é clicar no botão Voltar do navegador. Vamos adicionar um controle HyperLink à ProductsForSupplierDetails.aspx página que vincula de volta ao SupplierListMaster.aspx, fornecendo outra maneira para o usuário retornar à lista mestra.

Figura 17: Adicionar um controle HyperLink para levar o usuário de volta (SupplierListMaster.aspxClique para visualizar a imagem em tamanho real)

Se o usuário clicar no link Exibir produtos de um fornecedor que não tenha nenhum produto, o ProductsBySupplierDataSource ObjectDataSource em ProductsForSupplierDetails.aspx não retornará nenhum resultado. O GridView vinculado ao ObjectDataSource não renderizará nenhuma marcação, resultando em uma região em branco na página no navegador do usuário. Para comunicar mais claramente ao usuário que não há produtos associados ao fornecedor selecionado, podemos definir a propriedade do EmptyDataText GridView para a mensagem que queremos exibir quando tal situação surgir. Defini esta propriedade como "Não existem produtos fornecidos por este fornecedor""

Por padrão, todos os fornecedores no banco de dados Northwinds fornecem pelo menos um produto. No entanto, para este tutorial, modifiquei manualmente a Products tabela para que o fornecedor Escargots Nouveaux não esteja mais associado a nenhum produto. A Figura 18 mostra a página de detalhes do Escargots Nouveaux após essa alteração.

Figura 18: Os usuários são informados de que o fornecedor não fornece nenhum produto (Clique para visualizar a imagem em tamanho real)

Resumo

Embora os relatórios mestre/detalhe possam exibir os registos mestre e detalhe numa única página, em muitos sites da web, eles são separados em duas páginas distintas. Neste tutorial, analisamos como implementar esse relatório mestre/detalhado tendo os fornecedores listados em um GridView na página da Web "mestre" e os produtos associados listados na página "detalhes". Cada linha de fornecedor na página principal da web continha um link para a página de detalhes que transmitia o valor da linha SupplierID. Esses links específicos de linha podem ser facilmente adicionados usando o HyperLinkField do GridView.

Na página de detalhes, a recuperação desses produtos para o fornecedor especificado foi realizada invocando o método da classe ProductsBLLGetProductsBySupplierID(supplierID). O supplierID valor do parâmetro foi especificado declarativamente usando a querystring como a fonte do parâmetro. Também analisamos como exibir os detalhes do fornecedor na página de detalhes usando um FormView.

Nosso próximo tutorial é o último sobre relatórios mestres/detalhados. Veremos como exibir uma lista de produtos em um GridView onde cada linha tem um botão Selecionar. Clicar no botão Selecionar exibirá os detalhes do produto em um controle DetailsView na mesma página.

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. O revisor principal deste tutorial foi Hilton Giesenow. Interessado em rever meus próximos artigos do MSDN? Se for o caso, envie-me uma mensagem para mitchell@4GuysFromRolla.com.