Filtragem Mestre/Detalhe em Duas Páginas com GridView (C#)

por Scott Mitchell

Baixar 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 mestre/detalhes 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 mestre/detalhes é ter os registros mestres em uma página da Web e os detalhes mostrados em outra. Um site do fórum, como os Fóruns ASP.NET, é um ótimo exemplo desse padrão na prática. Os fóruns de ASP.NET são compostos por uma variedade de fóruns, como de Introdução, Web Forms, Controles de Apresentação de Dados e assim por diante. Cada fórum é composto por muitos threads e cada thread é composto por várias postagens. Na página inicial dos Fóruns ASP.NET, os fóruns são listados. Clicar em um fórum leva você a uma ShowForum.aspx página, que lista os threads desse fórum. Da mesma forma, clicar em um thread leva você a ShowPost.aspx, que exibe as postagens do 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 pastas BasicReporting, Filtering, e CustomFormatting. No entanto, não adicionamos uma página inicial para este tutorial naquele momento, portanto, reserve um momento para adicionar duas novas páginas à Filtering pasta: SupplierListMaster.aspx e ProductsForSupplierDetails.aspx. SupplierListMaster.aspx listará os registros "mestre" (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: Adicione 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 com isso. Para este tutorial, basta adicionar a SupplierListMaster.aspx página ao mapa do site usando o seguinte conteúdo XML como filho do elemento Filtering Reports <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, nossa próxima etapa é criar o GridView de 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 SuppliersBLL classe (Clique para exibir a imagem em tamanho real)

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

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

Para fazer isso, adicione um HyperLinkField ao GridView, que adiciona um hiperlink a cada linha gridView. Comece clicando no link Editar Colunas do marcador 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 exibir a imagem em tamanho real)

O HyperLinkField pode ser configurado para usar o mesmo texto ou os mesmos valores de URL do link em cada linha do 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 do Text HyperLinkField como Exibir Produtos.

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

Para definir os valores de texto ou URL com base nos dados subjacentes associados à linha do GridView, especifique os campos de dados dos quais os valores de texto ou URL devem ser extraídos nas propriedades `DataTextField` 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 a 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 de 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 é controlada 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 propriedades DataTextFormatString e DataNavigateUrlFormatString. Nas 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 propriedades DataTextField 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, uma vez 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 na SupplierID (clique para exibir a imagem em tamanho real)

Depois de adicionar o HyperLinkField, fique à vontade para personalizar e reordenar os campos do GridView. A marcação a seguir mostra o GridView depois de fazer algumas pequenas personalizações no nível do 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 exibir a SupplierListMaster.aspx página por meio de um navegador. Como mostra a Figura 7, a página lista atualmente todos os fornecedores, incluindo um link Exibir Produtos. Clicar no link Exibir Produtos levará você até ProductsForSupplierDetails.aspx, passando o SupplierID do fornecedor na querystring.

Figura 7: cada linha do fornecedor contém um link de produtos de exibição (clique para exibir imagem em tamanho real)

Etapa 3: Listando os produtos do fornecedor emProductsForSupplierDetails.aspx

Neste ponto, a página SupplierListMaster.aspx está enviando usuários para ProductsForSupplierDetails.aspx, passando o SupplierID do fornecedor selecionado na string de consulta. A etapa final do tutorial é exibir os produtos em um GridView cujos ProductsForSupplierDetails.aspxSupplierID valores são iguais aos SupplierID transmitidos por meio da querystring. Para realizar isso, comece adicionando um GridView à página ProductsForSupplierDetails.aspx, usando um novo controle ObjectDataSource chamado ProductsBySupplierDataSource que invoca o método GetProductsBySupplierID(supplierID) da classe ProductsBLL.

Figura 8: Adicionar um Novo ObjectDataSource Nomeado ProductsBySupplierDataSource (Clique para exibir a imagem em tamanho real)

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

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

A etapa final do assistente Configurar Fonte de Dados nos pede para fornecer 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 insira o nome do valor querystring a ser usado na caixa de texto QueryStringField (SupplierID).

Figura 11: Preencher o supplierID Valor do Parâmetro a partir do SupplierID valor da string de consulta (clique para exibir a imagem em tamanho real)

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

Figura 12: Os produtos fornecidos pela Tokyo Traders são mostrados (clique para exibir a imagem em tamanho real)

Exibindo informações do fornecedor emProductsForSupplierDetails.aspx

Como mostra a Figura 12, a ProductsForSupplierDetails.aspx página simplesmente lista os produtos fornecidos pelo SupplierID especificado na consulta. No entanto, alguém que fosse enviado diretamente para esta página não saberia que a Figura 12 mostra os produtos da Tokyo Traders. Para corrigir isso, também podemos exibir informações do fornecedor nesta página.

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

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

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

Assim como acontece com o ProductsBySupplierDataSource, faça com que o parâmetro supplierID receba o valor do querystring SupplierID.

Figura 15: Preencher o Valor do parâmetro supplierID a partir do valor da cadeia de consulta SupplierID (Clique para exibir a imagem em tamanho real)

Ao associar o FormView ao ObjectDataSource no modo design, o Visual Studio criará automaticamente os elementos ItemTemplate, InsertItemTemplate, e EditItemTemplate do FormView com os controles Web Label e TextBox para cada um dos campos de dados retornados pelo ObjectDataSource. Como só queremos exibir informações do fornecedor, fique à 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, você pode definir manualmente o FormView DataSourceID e criar a ItemTemplate marcação, como fizemos no tutorial "Exibindo dados com o ObjectDataSource".

Após essas edições, a marcação declarativa do FormView deverá 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 depois que as informações do fornecedor detalhadas acima foram incluídas.

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

Aplicando os toques finais na interface doProductsForSupplierDetails.aspxusuário

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 à página ProductsForSupplierDetails.aspx que leva de volta a SupplierListMaster.aspx, fornecendo outra maneira para o usuário retornar à lista mestre.

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

Se o usuário clicar no link Exibir Produtos para um fornecedor que não possui produtos, o ProductsBySupplierDataSource ObjectDataSource não retornará ProductsForSupplierDetails.aspx nenhum resultado. O GridView associado 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 como a mensagem que desejamos exibir quando tal situação surgir. Defina essa propriedade como "Não há 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 depois que essa alteração foi feita.

Figura 18: Os usuários são informados de que o fornecedor não fornece produtos (clique para exibir a imagem em tamanho real)

Resumo

Embora os relatórios mestres/detalhados possam exibir os registros mestre e detalhado em uma única página, em muitos sites eles são separados em duas páginas da web. Neste tutorial, analisamos como implementar esse relatório mestre/detalhe, 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 inicial 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 origem 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 em relatórios mestre-detalhe. Veremos como exibir uma lista de produtos em um GridView em que 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.

Divirta-se programando!

Sobre o autor

Scott Mitchell, autor de sete livros 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 alcançado em mitchell@4GuysFromRolla.com.

Agradecimentos Especiais a

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