Nota
O acesso a esta página requer autorização. Podes tentar iniciar sessão ou mudar de diretório.
O acesso a esta página requer autorização. Podes tentar mudar de diretório.
por Scott Mitchell
Este tutorial terá um GridView cujas linhas incluem o nome e o preço de cada produto, juntamente com um botão Selecionar. Clicar no botão Selecionar para um determinado produto fará com que seus detalhes completos sejam exibidos em um controle DetailsView na mesma página.
Introdução
No tutorial anterior vimos como criar um relatório mestre/detalhado usando duas páginas web: uma página web "master", a partir da qual exibimos a lista de fornecedores; e uma página web de "detalhes" que listava os produtos fornecidos pelo fornecedor selecionado. Este formato de relatório de duas páginas pode ser condensado em uma página. Este tutorial terá um GridView cujas linhas incluem o nome e o preço de cada produto, juntamente com um botão Selecionar. Clicar no botão Selecionar para um determinado produto fará com que seus detalhes completos sejam exibidos em um controle DetailsView na mesma página.
Figura 1: Clicar no botão Select exibe os detalhes do produto (Clique para visualizar a imagem em tamanho real)
Etapa 1: Criando um GridView selecionável
Lembre-se de que, no relatório mestre/detalhe de duas páginas, cada registo mestre incluía um hiperlink que, quando clicado, enviava o utilizador para a página de detalhes, passando o valor da linha clicada na string de consulta SupplierID. Esse hiperlink foi adicionado a cada linha GridView usando um HyperLinkField. Para o relatório mestre/detalhes de página única, precisaremos de um botão para cada linha do GridView que, quando clicado, mostre os detalhes. O controle GridView pode ser configurado para incluir um botão Select para cada linha que causa um postback e marca essa linha como SelectedRow do GridView.
Comece adicionando um controle GridView à DetailsBySelecting.aspx página na Filtering pasta, definindo sua ID propriedade como ProductsGrid. Em seguida, adicione um novo ObjectDataSource chamado AllProductsDataSource que invoca o ProductsBLL método da GetProducts() classe.
Figura 2: Criar um ObjectDataSource nomeado AllProductsDataSource (Clique para visualizar a imagem em tamanho real)
Figura 3: Usar a ProductsBLL Classe (Clique para visualizar a imagem em tamanho real)
Figura 4: Configurar o ObjectDataSource para invocar o método (GetProducts() imagem em tamanho real)
Edite os campos do GridView removendo todos, exceto o ProductName e UnitPrice BoundFields. Além disso, sinta-se à vontade para personalizar esses BoundFields conforme necessário, como formatar o UnitPrice BoundField como uma moeda e alterar as HeaderText propriedades dos BoundFields. Essas etapas podem ser realizadas graficamente, clicando no link Editar colunas da marca inteligente do GridView ou configurando manualmente a sintaxe declarativa.
Figura 5: Remover todos exceto o ProductName e UnitPrice BoundFields (Clique para visualizar a imagem em tamanho real)
A marcação final para o GridView é:
<asp:GridView ID="ProductsGrid" runat="server"
AutoGenerateColumns="False" DataKeyNames="ProductID"
DataSourceID="AllProductsDataSource" EnableViewState="False">
<Columns>
<asp:BoundField DataField="ProductName"
HeaderText="Product" SortExpression="ProductName" />
<asp:BoundField DataField="UnitPrice"
DataFormatString="{0:c}" HeaderText="Unit Price"
HtmlEncode="False" SortExpression="UnitPrice" />
</Columns>
</asp:GridView>
Em seguida, precisamos marcar o GridView como selecionável, o que adicionará um botão Selecionar a cada linha. Para conseguir isso, simplesmente assinale a caixa de seleção para ativar a seleção na smart tag do GridView.
Figura 6: Tornar as linhas do GridView selecionáveis (Clique para visualizar a imagem em tamanho real)
Marcar a opção Ativando seleção adiciona um CommandField ao ProductsGrid GridView com sua ShowSelectButton propriedade definida como True. Isso resulta em um botão Select para cada linha do GridView, como ilustra a Figura 6. Por padrão, os botões Select são renderizados como LinkButtons, mas você pode usar Buttons ou ImageButtons em vez disso por meio da ButtonType propriedade CommandField.
<asp:GridView ID="ProductsGrid" runat="server"
AutoGenerateColumns="False" DataKeyNames="ProductID"
DataSourceID="AllProductsDataSource" EnableViewState="False">
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="ProductName"
HeaderText="Product" SortExpression="ProductName" />
<asp:BoundField DataField="UnitPrice"
DataFormatString="{0:c}" HeaderText="Unit Price"
HtmlEncode="False" SortExpression="UnitPrice" />
</Columns>
</asp:GridView>
Quando o botão Select de uma linha GridView é pressionado, um postback é realizado e a propriedade SelectedRow do GridView é atualizada. Além da SelectedRow propriedade, o GridView fornece as propriedades SelectedIndex, SelectedValue e SelectedDataKey . A SelectedIndex propriedade retorna o índice da linha selecionada, enquanto as SelectedValue propriedades e SelectedDataKey retornam valores com base na propriedade DataKeyNames de GridView.
A DataKeyNames propriedade é usada para associar um ou mais valores de campo de dados a cada linha e é comumente usada para atribuir informações de identificação exclusivas dos dados subjacentes a cada linha GridView. A SelectedValue propriedade retorna o valor do primeiro DataKeyNames campo de dados para a linha selecionada onde como a SelectedDataKey propriedade retorna o objeto da linha selecionada, que contém todos os valores para os campos de chave de dados especificados DataKey para essa linha.
A DataKeyNames propriedade é definida automaticamente para o(s) campo(s) de dados de identificação exclusiva quando você vincula uma fonte de dados a um GridView, DetailsView ou FormView por meio do Designer. Embora essa propriedade tenha sido definida para nós automaticamente nos tutoriais anteriores, os exemplos teriam funcionado sem a DataKeyNames propriedade especificada. No entanto, para o GridView selecionável neste tutorial, bem como para tutoriais futuros nos quais examinaremos a inserção, atualização e exclusão, a DataKeyNames propriedade deve ser definida corretamente. Reserve um momento para garantir que a propriedade do DataKeyNames seu GridView esteja definida como ProductID.
Vamos ver o nosso progresso até agora através de um navegador. Observe que o GridView lista o nome e o preço de todos os produtos, juntamente com um Select LinkButton. Clicar no botão Selecionar provoca um reenvio de dados. Na Etapa 2, veremos como fazer com que um DetailsView responda a esse postback exibindo os detalhes do produto selecionado.
Figura 7: Cada linha de produto contém um Select LinkButton (Clique para visualizar a imagem em tamanho real)
Realçando a linha selecionada
O ProductsGrid GridView tem uma SelectedRowStyle propriedade que pode ser usada para ditar o estilo visual para a linha selecionada. Usado corretamente, isso pode melhorar a experiência do usuário, mostrando mais claramente qual linha do GridView está selecionada no momento. Para este tutorial, vamos fazer com que a linha selecionada seja realçada com um fundo amarelo.
Como em nossos tutoriais anteriores, vamos nos esforçar para manter as configurações relacionadas à estética definidas como classes CSS. Portanto, crie uma nova classe CSS no Styles.css nome SelectedRowStyle.
.SelectedRowStyle
{
background-color: Yellow;
}
Para aplicar essa classe CSS à SelectedRowStyle propriedade de todos os GridViews em nossa série de tutoriais, edite a Skin GridView.skin no Tema DataWebControls para incluir as configurações SelectedRowStyle conforme mostrado abaixo:
<asp:GridView runat="server" CssClass="DataWebControlStyle">
<AlternatingRowStyle CssClass="AlternatingRowStyle" />
<RowStyle CssClass="RowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<SelectedRowStyle CssClass="SelectedRowStyle" />
</asp:GridView>
Com essa adição, a linha GridView selecionada agora é realçada com uma cor de plano de fundo amarela.
Figura 8: Personalizar a aparência da linha selecionada usando a propriedade GridView SelectedRowStyle (Clique para visualizar a imagem em tamanho real)
Etapa 2: Exibindo os detalhes do produto selecionado em um DetailsView
Com o GridView concluído, tudo o que resta é adicionar DetailsView, que apresenta informações sobre o produto selecionado. Adicione um controle DetailsView acima do GridView e crie um novo ObjectDataSource chamado ProductDetailsDataSource. Como queremos que este DetailsView exiba informações específicas sobre o produto selecionado, configure o ProductDetailsDataSource para usar o ProductsBLL método da GetProductByProductID(productID) classe.
Figura 9: Invoque o método da ProductsBLL classe (GetProductByProductID(productID) imagem em tamanho real)
Tenha o valor do parâmetro productID obtido da propriedade SelectedValue do controlo GridView. Como discutimos anteriormente, a propriedade do GridView retorna o primeiro valor de chave de dados de SelectedValue para a linha selecionada. Portanto, é imperativo que a propriedade DataKeyNames do GridView seja definida como ProductID, de forma que o valor da ProductID da linha selecionada seja retornado por SelectedValue.
Figura 10: Definir o productID parâmetro para a propriedade do SelectedValue GridView (Clique para visualizar a imagem em tamanho real)
Depois que o productDetailsDataSource ObjectDataSource tiver sido configurado corretamente e vinculado ao DetailsView, este tutorial será concluído! Quando a página é visitada pela primeira vez, nenhuma linha é selecionada, portanto, a propriedade de SelectedValue GridView retorna null. Como não há produtos com um valor NULLProductID, nenhum registo é retornado pelo método GetProductByProductID(productID), o que significa que o DetailsView não é exibido (veja Figura 11). Ao clicar no botão Selecionar de uma linha do GridView, ocorre um postback e a vista de detalhes é atualizada. Desta vez, a propriedade de SelectedValue GridView retorna a ProductID da linha selecionada, o GetProductByProductID(productID) método retorna um ProductsDataTable com informações sobre esse produto específico e o DetailsView mostra esses detalhes (consulte a Figura 12).
Figura 11: Quando visitado pela primeira vez, somente o GridView é exibido (Clique para visualizar a imagem em tamanho real)
Figura 12: Ao selecionar uma linha, os detalhes do produto são exibidos (Clique para visualizar a imagem em tamanho real)
Resumo
Neste e nos três tutoriais anteriores, vimos várias técnicas para exibir relatórios mestres/detalhados. Neste tutorial, examinamos o uso de um GridView selecionável para abrigar os registros mestre e um DetailsView para exibir detalhes sobre o registro mestre selecionado na mesma página. Nos tutoriais anteriores, analisamos como exibir relatórios mestres/detalhes usando DropDownLists e exibindo registros mestre em uma página da Web e registros detalhados em outra.
Este tutorial conclui nosso exame de relatórios mestres/detalhados. Começando com o próximo tutorial, começaremos nossa exploração da formatação personalizada com o GridView, DetailsView e FormView. Veremos como personalizar a aparência desses controles com base nos dados vinculados a eles, como resumir dados no rodapé do GridView e como usar modelos para obter um maior grau de controle sobre o layout.
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.