Partilhar via

Demonstra Passo a passo: Criando um controle GridView aninhados

  • Artigo

O controle GridView exibe linhas de dados em uma grade (uma tabela HTML), exibindo um dado por linha por linha de grade.Essa explicação passo a passo mostra como estender a funcionalidade do controle GridView de modo que linhas de grade individuais posam exibir dados de uma tabela de dados relacionados.Nessa explicação passo a passo, você mostrará os dados relacionados em um controle GridView aninhado — um controle GridView dentro da linha de grade do controle pai GridView.

Um exemplo de dados aninhados seria um controle GridView que exibe uma lista de clientes, onde cada linha do controle GridView inclui um outro controle GridView que exibe os pedidos para aqueles clientes.

Nessa explicação passo a passo, ambos os controles GridView usam controles SqlDataSource para recuperar os dados a partir de fonte de dados.

Durante esta explicação passo a passo, você aprenderá a fazer o seguinte:

  • Conectar-se a um banco de dados do SQL Server no Microsoft Visual Web Developer.

  • Usar o controle SqlDataSource para gerenciar o acesso a dados e a ligação de dados.

  • Exibir dados retornados pelo banco de dados no controle GridView.

  • Crie um TemplateField com controles aninhados para ser exibido pelo controle GridView.

  • Personalize dinamicamente a exibição para cada linha com base em condições de tempo de execução.

  • Opcionalmente, use o cache de dados com o controle SqlDataSource para reduzir solicitações feitas ao banco de dados.

Pré-requisitos

A fim de concluir este explicação passo a passo, será necessário:

  • O Visual Web Developer (Visual Studio).

  • Microsoft Data Access Components (MDAC) versão 2.7 ou posterior.

    Se você está usando o Microsoft Windows XP ou o Windows Server 2003, você já tem MDAC 2.7.Entretanto, se você estiver usando o Microsoft Windows 2000, você deve atualizar o MDAC já instalado no seu computador.Para obter mais informações, consulte "Instalação do Microsoft Data Access Components (MDAC) " na MSDN Library.

  • Acesso ao banco de dados do SQL Server Northwind.Para obter informações sobre como baixar e instalar o banco de dados Northwind de exemplo do SQL servidor, consulte Instalando o banco de dados de exemplo no site do Microsoft SQL servidor.

    Observação:

    Se você precisa de informações sobre como efetuar o logon para o computador que está executando o SQL Server, contate o administrador do servidor.

Criando o Site Web

Se você já tiver criado um site Web no Visual Web Developer, completando Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer, você pode usar esse site Web e ir para a próxima seção.Caso contrário, crie um site e uma página novos, seguindo estas etapas.

Para criar um site do sistema de arquivos

  1. Abra o Visual Web Developer.

  2. Sobre o Arquivo menu, clicar Novoe, em seguida, clicar Site da Web.If you are using Visual Web Developer Express, on the File menu, click NewWeb Site.

    The Novo site caixa de diálogo é exibida.

  3. Em O Visual Studio installed templates, clicar Site da Web do ASP.NET.

  4. Na primeira caixa Localização, selecione Sistema de Arquivos; na segunda, digite o nome da pasta onde você deseja manter as páginas do seu site.

    Por exemplo, digite o nome da pasta C:\WebSites\NestedGridView.

  5. Na lista Language, clique a linguagem de programação com a qual você prefere trabalhar.

  6. Clique em OK.

    Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.

Adicionando uma fonte de dados para o controle GridView

Para exibir dados em uma página da Web do ASP.NET, será necessário:

  • Uma conexão com uma fonte de dados (como um banco de dados).No procedimento a seguir, você criará uma conexão com o banco de dados Northwind do SQL Server.

  • Um controle na página para exibir os dados.

No seguinte procedimento, você vai exibir dados num controle GridView.O controle GridView irá obter seus dados do controle SqlDataSource.

Adicionar uma fonte de dados para o controle GridView

  1. Abra ou alterne para a página Default.aspx.

  2. Alternar para modo Design.

  3. Em Caixa de Ferramentas, a partir do grupo Data, arraste um controle SqlDataSource para a página.

    Se a marca inteligente SqlDataSource Tasks não aparecer, clique com o botão direito do mouse no controle SqlDataSource e clique em Mostrar Marca Inteligente.

  4. No painel SqlDataSource Tasks, clique em Configurar Fonte de Dados.

    O assistente Configure Data Source aparece.

  5. Clique em New Connection.

    Aparecerá a caixa de diálogo Add Connection.

    • Se a lista Fonte de Dados não exibir o Microsoft SQL Server (SqlClient), clique em Modificar e, na caixa de diálogo Modificar Fonte de Dados, selecione Microsof SQL Server.

    • Se a caixa de diálogo Choose Data Source aparecer no lugar da caixa de diálogo Connection Properties, na lista Data source, selecione o tipo da fonte de dados que você irá usar.Para este passo a passo, o tipo da fonte de dados será Microsoft SQL Server.Na lista Provedor de Dados, clique em .NET Framework Data Provider for SQL Server e, em seguida, clique em Continue

  6. Na página Adicionar conexão, na caixa de texto Nome do servidor, digite o nome do SQL Server onde o banco de dados de exemplo Northwind está instalado.

  7. Em Logar no servidor, selecione a opção apropriada para acessar o banco de dados SQL Server em execução (segurança integrada ou ID e senha específicas).Se você precisar, insira um nome de usuário e a senha.

  8. Se você inseriu uma senha, selecione a caixa de seleção Salvar minha senha.

  9. clicar selecionar ou digite um nome de banco de dados e, em seguida, digite Northwind.

  10. Clique em Test connection e, quando você tiver certeza que ele funciona, clique em OK.

  11. No assistente Configurar Fonte de Dados, clique em Avançar.

  12. Certifique-se de que a caixa de seleção Sim, salvar esta conexão como está selecionada.

  13. Nomeie a conexão NorthwindConnectionString e, em seguida, clicar Próximo.

  14. No painel Configurar a Instrução Select, selecione Especificar colunas para uma tabela ou modo de exibição.

  15. No Nome lista, selecione Customers.

  16. No Colunas painel, selecionar as colunas CustomerID e CompanyName.

  17. Clique em Next.

  18. Clique em Finish.

Adicionando um Controle GridView para Exibir Dados

Depois de ter estabelecido um fonte de dados para recuperar os dados, você deve adicionar um controle para a página para exibir os dados.

No seguinte procedimento, você vai exibir dados num controle GridView.O controle GridView vai obter os seus dados do controle SqlDataSource que você adicionou anteriormente.

Para adicionar e configurar um controle GridView para exibir dados

  1. Assegure-se de que se está no modo de Design para página default.aspx.

  2. Na Caixa de Ferramentas, do grupo Dados, arraste um controle GridView para a página.

  3. Sobre o GridView Tasks menu, no escolher a fonte de dados lista, selecionar o SqlDataSource controle adicionado anteriormente, SqlDataSource1.

  4. Selecione a caixa de seleção Ativar paginação.

  5. Na janela Propriedades, expanda a propriedade RowStyle para o controle GridView e então defina a propriedade VerticalAlign como Top.Isso irá alinhar o texto na linha de grade na parte superior de células, porque a grade aninhada irá exibir linhas múltiplas.

Adicionando um Controle GridView Aninhado para Exibir Dados Relacionados

Agora você deve criar uma fonte de dados aninhada e um controle GridView para exibir dados relacionados em cada linha.Para fazer isso, você irá fazer o seguinte:

Para adicionar e configurar um controle GridView aninhado para exibir dados

  1. Assegure-se de que se está no modo de Design para página default.aspx.

  2. Clique com o botão direito do mouse no controle GridView e selecione Mostrar Marca Inteligente.

  3. Clique em Editar colunas.

    A Caixa de diálogo Fields aparece.

  4. No painel Campos Disponíveis, selecione um TemplateField e em seguida, clique em Adicionar.

  5. No Propriedades TemplateField painel, conjunto HeaderText para pedidos.

  6. Clique em OK.

  7. No painel Tarefas do GridView, clique em Editar Modelos.

  8. No painel Modo de edição do modelo, a partir da caixa de listagem Display, selecione ItemTemplate.

  9. Na Caixa de Ferramentas, do grupo Dados, arraste um controle SqlDataSource até a página para a área editável da ItemTemplate.

    Se a marca inteligente SqlDataSource Tasks não aparecer, clique com o botão direito do mouse no controle SqlDataSource e clique em Mostrar Marca Inteligente.

  10. No menu SqlDataSource Tasks, clique em Configurar Fonte de Dados.

    O assistente Configure Data Source aparece.

  11. O escolher sua conexão de dados etapa, selecionar NorthwindConnectionString criou anteriormente neste passo-a-passo e, em seguida, clicar Próximo.

  12. No painel Configurar a Instrução Select, selecione Especificar colunas para uma tabela ou modo de exibição.

  13. No Nome lista, selecionados Orders.

  14. No Colunas painel, selecionar as colunas NúmeroDoPedido e DataDoPedido.

  15. Clique WHERE para adicionar um parâmetro para a instrução SELECT.

  16. No Adicione WHERE cláusula janela, selecionar CustomerID no Coluna lista box.

  17. selecionar Nenhum no fonte caixa de listagem.

  18. Clique em Adicionar.

    Isso cria um selecionar parâmetro que você irá conjunto valor de CódigoDoCliente para cada linha vinculada ao pai GridView controle.

  19. Clique em OK.

  20. Clique em Next.

  21. Clique em Finish.

  22. Na Caixa de Ferramentas, do grupo Dados, arraste um controle GridView para a área editável da ItemTemplate.

    Se a marca inteligente GridView Tasks não aparecer, clique com o botão direito do mouse no controle GridView e clique em Mostrar Marca Inteligente.

  23. No GridView Tasks marca SMART, no escolher a fonte de dados lista caixa selecionar o nome do aninhados SqlDataSource controle SqlDataSource2.

  24. clicar com o botão direito do mouse o pai GridView controle, GridView1 e selecionar Mostrar marca inteligente.

  25. No painel GridView Tasks, clique em Terminar a Edição do Modelo.

    Observação:

    O controle GridView aninhado não é exibido no modo Design.

  26. No Propriedades painel para GridView1, clicar no Eventos botão .

  27. No RowDataBound na caixa, digite GridView1_RowDataBound e, em seguida, pressione ENTER.

    O Visual Web Developer cria uma manipulador de eventos para o evento RowDataBound do controle GridView.O código terá o aspecto como no exemplo a seguir.

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

End Sub

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{

}

  28. Adicione o seguinte código ao procedimento:

    If e.Row.RowType = DataControlRowType.DataRow Then
    Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
    s.SelectParameters(0).DefaultValue = e.Row.Cells(0).Text
End If

    if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
    s.SelectParameters[0].DefaultValue = e.Row.Cells[0].Text;
}

    O código recupera o valor CustomerID da linha corrente e define sistema autônomo o selecionar valor do parâmetro para o aninhados SqlDataSource controle SqlDataSource2.

  29. Salve as alterações para os arquivos.

Testando a Página

Agora você pode executar a página.

Para testar a página

  1. Pressione CTRL+F5 para executar a página.

    O controle GridView exibe as linhas de dados da Tabela Customers Northwind com dados da tabela Orders do Northwind para cada cliente aninhadas em cada linha.

  2. Feche o navegador.

Usando o Cache com um Controle GridView Aninhado

Até este ponto da explicação passo a passo, você criou uma página com controles GridView aninhados.Como escrita atualmente, a página consulta o banco de dados uma vez para o controle pai GridView, e novamente para cada controle GridView aninhado.

Para reduzir a carga do banco de dados, você pode modificar sua consulta aninhada para retornar todas as linhas, guardar em cache os resultados e em seguida, filtrar os resultados para cada controle GridView aninhado.

Observação:

Para grandes bancos de dados, esta é uma solução não prática.Se você estiver recuperando dados a partir de um grande banco de dados, criar um objeto de dados que recupera apenas as linhas necessárias e vincula a ela usando o controle ObjectDataSource.Para obter mais informações, consulte Visão geral sobre o controle de servidor Web ObjectDataSource.

Para configurar um controle SqlDataSource aninhado para guardar em cache resultados da consulta

  1. Assegure-se de que se está no modo de Design para página default.aspx.

  2. clicar com o botão direito do mouse o pai GridView controlar GridView1 e, em seguida, clique em edição modelo.

  3. No ItemTemplate para a coluna de pedidos, selecionar o aninhados SqlDataSource controle SqlDataSource2.

  4. Na janela Propriedades, defina as propriedades EnableCaching para true.

  5. Defina a propriedade FilterExpression como CustomerID='{0}'.

  6. Na propriedade FilterParameters, clique no botão reticências para abrir a janela Editor de coleção do parâmetro.

  7. Na janela Editor de coleção do parâmetro, clique em Adicionar parâmetros.

  8. No Nome, digite CustomerID.

  9. Clique em OK.

  10. clicar com o botão direito do mouse o aninhadosSqlDataSource controle, SqlDataSource2 e selecionar Mostrar marca inteligente.

  11. Clique em Configurar Fonte de Dados.

  12. Deixe inalteradas as informações de conexão e clique em Avançar.

  13. Na etapa Configurar a Instrução Select, selecione Especificar colunas para uma tabela ou modo de exibição.

  14. No Nome caixa de listagem, selecionados Orders.

  15. No Colunas seção, marque as colunas OrderID, CustomerID e OrderDate e, em seguida, clicar Próximo.

  16. Clique em Finish.

  17. Quando solicitado a atualizar os campos e chaves para o aninhadosGridView clicar controle GridView2, Não.

    As colunas exibidas pelo controle GridView aninhado não serão alteradas.

    Você configurou o aninhadosSqlDataSource controle SqlDataSource2 para recuperar todos os dados de pedidos do banco de dados e armazenar cache localmente. Quando o aninhadosGridView controle está limite os dados, um filtro é aplicado, de modo que somente pedidos relacionados ao valor de CódigoDoCliente da linha corrente seja exibidos.

  18. Se usar uma página code-behind, clique com o botão direito do mouse em uma área em branco na página e em seguida, clique em Exibir código.

  19. Altere o código para o manipulador de eventos RowDataBound para ler como a seguir:

    If e.Row.RowType = DataControlRowType.DataRow Then
    Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
    s.FilterParameters(0).DefaultValue = e.Row.Cells(0).Text
End If

    if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
    s.FilterParameters[0].DefaultValue = e.Row.Cells[0].Text;
}

    Nesta versão do código, em vez de definir um valor na coleção SqlDataSource do controle SelectParameters coleção, você define um valor em sua coleção FilterParameters.

  20. Salve o arquivo.

Testando a Página

Agora você pode executar a página.

Para testar a página

  1. Pressione CTRL+F5 para executar a página.

    O controle GridView exibe as linhas de dados da Tabela Customers Northwind com dados da tabela Orders do Northwind para cada cliente aninhadas em cada linha.No entanto, todos os dados que são vinculados ao controle GridView serão solicitada uma vez, quando a primeira linha é de dados vinculados.Os dados são armazenados em cache para uso com as linhas restantes do controle GridView.

  2. Feche o navegador.

Próximas etapas

Essa explicação passo a passo ilustrou como você pode estender a funcionalidade do controle GridView para exibir dados relacionados usando controles GridView aninhados em um página da Web ASP.NET.Você também pode estender o aplicativo para permitir dados a serem atualizados e excluídos ou para permitir que os usuários insiram novos registros usando um controle DetailsView ou FormView.Você também pode usar controles que não sejam um controle TextBox, como um controle DropDownList, para alterar um valor.Para obter mais informações, consulte os seguintes tópicos:

Consulte também

Tarefas

Como: Proteger seqüências de conexão quando usando controles de fontes de dados

Passo-a-passo: Exibindo uma Lista Suspensa Durante a Edição no Controle GridView do Servidor Web

Explicação passo a passo: Acesso básico a dados em páginas da Web