Explicação Passo a Passo: Criando Páginas Web Mestre/Detalhes no Visual Studio

  • Artigo

Muitas páginas Web exibem dados de mais de uma maneira, geralmente exibindo dados das tabelas relacionadas.Esta explicação mostra várias formas de trabalhar com dados em diversos controles e de múltiplas tabelas, incluindo aqueles que têm um relacionamento mestre/detalhes.Tarefas ilustradas nesta explicação passo a passo incluem:

  • Preencher uma lista suspensa com dados do banco de dados.

  • Criar filtros — Instruções SQL com uma cláusula WHERE (consultas parametrizadas).

  • Exibir dados filtrados com base na seleção do usuário em uma lista suspensa.

  • Exibindo detalhes sobre um registro selecionado usando o DetailsView o controle.

  • Selecionar um registro em uma página e exibir um registro relacionado em uma segunda página.

Pré-requisitos

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

  • Acesso ao banco de dados do SQL Server Northwind.Para obter informações sobre pressionada Carregando e instalação do SQL Server banco de dados de exemplo Northwind, consulte Instalar bancos de dados de exemplo No site da Microsoft SQL Server.

    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.

  • 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ê está usando o Microsoft Windows 2000, você pode precisar atualizar o MDAC já instalado no seu computador.Para obter mais informações, consulte o artigo " Microsoft dados do Acessar Componentes (MDAC) instalação " Na Biblioteca do MSDN.

Criando o Site Web

Se você já tiver Criado um site da Web em Microsoft Visual Web Developer (por exemplo, seguindo as etapas em Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer ou Explicação passo a passo: Acesso básico a dados em páginas da Web, você pode usar esse site e pule para a Avançar seção, "Conectando-se a SQL Servidor." 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 File Menu, clique em NovoSite.

    O Novo Site da Web caixa de diálogo é exibida.

  3. Em Modelos Visual Studio instaladoClique em Web Site ASP.NET.

  4. Na Local Digite o nome da pasta onde você deseja manter as páginas do seu site da Web.

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

  5. Na Linguagem lista, clique na programação Idioma você preferir trabalhar no.

  6. Clique em OK.

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

Conectando-se ao SQL Server

Para trabalhar com dados, você precisa estabelecer uma conexão com o banco de dados.Nesta explicação, você criará uma conexão independentemente do trabalho com páginas Web ou controles.

Para criar uma conexão com o Servidor SQL

  1. Pressionarionar ALT + CTRL+S para exibir o Banco de Dados Do Explorer.Em Banco de Dados Do ExplorerClique com o botão direito do mouse Conexões de dados e escolha Adicionar conexão.

    O Alterar fonte de dados caixa de diálogo é exibida.

  2. Na Alterar fonte de dados caixa de diálogo, selecione Microsoft SQL Server.e clique em OK.

  3. Na Adicionar conexão caixa de diálogo, faça o seguinte:

    • Insira ou selecione o nome do seu computador SQL Server.Para um servidor em seu computador, digite (local).

    • Select Usar autenticação SQL Server.

    • Digite um nome de usuário e uma senha.

    • Select Salvar minha senha.

    • Select Northwind Como a Banco de Dados.

  4. Clique em Test Connectione quando tiver certeza que ele funciona, clique em OK.

    A conexão é adicionada ao Server Explorer.

Usando uma Lista Suspensa como Mestre

Nesta parte do exame Através, você adicionará um drop-down list em uma página e preenchê-la com uma lista de categorias das Northwind Tabela.Quando os usuários selecionam uma categoria, a página exibirá os produtos para esta categoria.

Para criar e preencher uma lista suspensa

  1. Alterne para ou abra a página Default.aspx.Se você estiver trabalhando com um site que já tenha criado, adicione ou abra uma página com a qual você pode trabalhar nessa explicação passo a passo.

  2. Alternar para modo Design.

  3. tipo Selecionar Produtos por Categoria na página e formate o texto como um título usando o BBloquear Format drop-down list acima a Toolbox.

  4. A partir de Padrão Agrupar in a ToolboxArraste um DropDownList (lista suspensa) controlar até a página.

  5. Na DropDownLista tarefasSelecionar o Habilitar AutoPostBack caixa de seleção.

    Isso configura o controle para que ele mande a página de volta para o servidor sempre que uma seleção é feita na lista, em vez de aguardar até que o usuário clique em um botão.

  6. Na DropDownLista tarefasSelecione Escolher fonte de dados.

    O Escolher fonte de dados Assistente será iniciado.

  7. Na Selecione um fonte de dados lista, clique em < Novo dados de origem >.

    O Assistente para Configuração da Fonte de Dados caixa de diálogo é exibida.

  8. Select Banco de dados.

    Isso especifica que você deseja obter dados de um banco de dados que tem suporte para instruções SQL.(Isso inclui o Servidor SQL e outros bancos de dados compatíveis com OLE-DB.)

    Na Especificar uma identificação para o fonte de dados Caixa, um padrão controle da fonte de dados nome é exibido (SqlDataSource1).Você pode deixar esse nome.

  9. Clique em OK.

    O assistente exibe a Configurar Fonte de Dados - SqlDataSource1 a página na qual você pode selecionar um conexão de dados.

  10. de o drop-down Lista, selecione o Northwind conexão você criou anteriormente no explicação passo a passo.

  11. Clique em Next.

    O assistente exibe uma página na qual você pode escolher se quer armazenar a string de conexão no arquivo de configuração.

  12. Não se esqueça de Sim, salvar esta conexão como Caixa de seleção está selecionada e em seguida, clique em Next.(Você pode deixar o nome da string de conexão padrão.)

    O assistente exibe uma página na qual você pode especificar quais os dados que você deseja recuperar do banco de dados.

  13. A partir de Name (Nome) Lista em Tabela ou opções do ExibirSelecione Categorias.

  14. Na Colunas Caixa de seleção CódigoDaCategoria e NomeDaCategoria.

  15. Clique em Next.

  16. Clique em Teste de consulta Para garantir que você está obtendo os dados desejado.

  17. Clique em Finish.

    O Assistente para Configuração da Fonte de Dados é exibida, com o nome do Controlarar da Origem de dados que você configurou exibido.

  18. A partir de Selecione um campo de dados para exibir o DropDownList Na lista, selecione NomeDaCategoria.

    Observação:

    Se Não itens Aparecer na lista, clique na Atualizar Esquema Link.

    Isso especifica que o valor da NomeDaCategoria campo será exibido como o texto do item na drop-down list.

  19. A partir de Selecione um campo de dados para o valor da DropDownList Na lista, selecione CódigoDaCategoria.

    Isso especifica que quando um item é selecionado, o CódigoDaCategoria campo será retornado como o valor do item.

  20. Clique em OK.

Antes de prosseguir, teste a lista suspensa.

Para testar a lista suspensa

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

  2. Quando a página for exibida, examine a lista suspensa.

  3. Selecione uma categoria para certificar-se que a lista executa um postback.

    Agora você pode exibir produtos para a categoria selecionada na lista suspensa.

Usando uma Grade para Exibir Informações Detalhadas

Agora você pode estender a página para incluir uma grade.Quando os usuários fizerem uma seleção da lista suspensa de categorias, a grade exibirá os produtos para aquela categoria.

Para usar uma grade para exibir informações detalhadas

  1. Alternar para ou abrir a página Default.aspx (ou a página com a qual você está trabalhando), e alterne para o modo Design.

  2. A partir de Dados Grupo da ToolboxArraste um GridView controlar até a página.

  3. A partir de Tarefas GridExibir menu, selecione < Novo dados de origem > a partir de Escolher fonte de dados Lista.

    O Assistente para Configuração da Fonte de Dados Abre.

  4. Select Banco de dados.

    Na Especificar uma identificação para o fonte de dados Caixa, um padrão controle da fonte de dados nome é exibido (SqlDataSource2).Você pode deixar esse nome.

  5. Clique em OK.

    O assistente exibe uma página onde você pode selecionar uma conexão.

  6. Drop-down list de conexões, selecione a conexão é criado e armazenado anteriormente no (a explicação passo a passo NorthwindConnectionString).

  7. Clique em Next.

    O assistente exibe a Configurar Fonte de Dados - SqlDataSource2 Página no qual você pode criar um Instrução SQL.

  8. A partir de Name (Nome) Na lista, selecione Produtos.

  9. Na Colunas Caixa de seleção ProductID, ProductNamee CódigoDaCategoria.

  10. Clique em WHERE.

    O Adicionar onde cláusula caixa de diálogo é exibida.

  11. A partir de Coluna Na lista, selecione CódigoDaCategoria.

  12. A partir de Operador Na lista, selecione =.

  13. A partir de Origem Na lista, selecione Controle.

  14. Em Propriedades de Parâmetroin a Control ID (Identificação do controle) Na lista, selecione DropDownList1.

    O Último duas etapas especificar que a consulta obterá o valor de pesquisa para a identificação da categoria de DropDownList Controlar Adicionado anteriormente.

  15. Clique em Adicionar.

  16. Clique em OK Para fechar a Adicionar onde cláusula caixa de diálogo.

  17. Clique em Next.

  18. Na página de Visualizar, clique em Teste de consulta.

    O assistente exibe uma caixa de diálogo que solicita um valor para usar na cláusula WHERE.

  19. Digite 4 na caixa e clique em OK.

    Os registros de produtos para a categoria 4 são exibidos.

  20. Clique em Finish Para fechar o assistente.

Agora você pode testar a exibição master/detail.

Para testar a página

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

    Quando a página aparecer, os produtos do primeiro item na lista suspensa são exibidos.

  2. Selecione uma categoria da lista e confirme se os produtos correspondentes aparecem na grade.

Exibindo Dados Mestre/Detalhes na Mesma Página

Nesta parte da explicação, você exibirá dados de tabelas relacionadas em uma página.Os dados da tabela principal são exibidos em uma grade onde os usuários podem selecionar linhas individuais.Quando isso é feito, os detalhes de um ou mais registros são exibidos em um controle com barra de rolagem em outro lugar na página.Para fins de ilustração, você usará a tabela Northwind Categories como a tabela principal e a tabela Products como a tabela de detalhes.

Para exibir os registros principais

  1. Adicionar uma nova página ao site e denominá-la MasterDetails2.aspx.

  2. Alternar para modo Design.

  3. Digitar Master/Detail Page na página e formatar o texto como um título.

  4. A partir de Dados Grupo da ToolboxArraste um GridView controlar até a página.

  5. Na Tarefas GridExibir Menu, in a Escolher fonte de dados lista, clique em < Novo dados de origem > e, em seguida, use estas etapas para configurar um fonte de dados para a GridView controle:

    1. Select Banco de dados.

    2. Clique em OK.

    3. A conexão drop-down list, selecione a conexão é criado e armazenado anteriormente no (a explicação passo a passo NorthwindConnectionString).

    4. Clique em Next.

    5. A partir de Name (Nome) Na lista, selecione Categorias.

    6. Na Colunas Caixa de seleção CódigoDaCategoria e NomeDaCategoria.

    7. Clique em Next e em seguida, clique em Finish.

  6. Selecione o GridView o controle e na Tarefas GridExibir Menu, escolha Editar colunas.

    O Campos caixa de diálogo é exibida.

  7. Em Campos disponíveisAbrir o Comando de campo Nó, escolha Selecte em seguida, clique em Adicionar Para Adicionar-la para o Campos Selecionados Lista.

  8. Na Campos Selecionados lista, escolha Selecte em seguida, na CommandField Propriedade Grade, defina sua SelectText Propriedade para Detalhes.

  9. Clique em OK Para fechar a Campos caixa de diálogo.

    A Novo de coluna com um Detalhes hiperlink é adicionado à grade.

  10. Selecione o GridView Controlar e na janela Propriedades, certifique seu DataKeyNames Propriedade estiver definida como CódigoDaCategoria.

    Isso especifica que quando você seleciona uma linha na grade, o ASP.NET pode encontrar a chave do registro Categories atualmente exibido em um local conhecido.

A grade permite que você selecione uma categoria individual.A próxima etapa é adicionar a DetailsView controle que exibirá os registros de detalhe — os produtos associados a Selecionado de categoria.O DetailsView controle usará uma consulta diferente SQL para obter seus dados, por isso, requer um segundo controle da fonte de dados.

Para configurar uma consulta para exibir registros relacionados

  1. Pressione ENTER para criar espaço abaixo de SqlDataSource1 Controle na página MasterDetails2.aspx na modo de exibição Detalhes.

  2. A partir de Dados Grupo da ToolboxArraste um DetailsView controlar até a página.

  3. Configure-o para usar um segundo controle da fonte de dados usando as seguintes etapas:

    1. A partir de Escolher fonte de dados Na lista, selecione < Novo dados de origem >.

    2. Select Banco de dados.

    3. Clique em OK.

    4. Na lista suspensa de conexão, clique a conexão que você criou e armazenou anteriormente na explicação passo a passo.

    5. Clique em Next.

    6. A partir de Name (Nome) Lista em Tabela ou opções do ExibirSelecione Produtos.

    7. Na Colunas Caixa de seleção ProductID, ProductNamee CódigoDaCategoria.

    8. Clique em WHERE.

      O Adicionar onde cláusula caixa de diálogo é exibida.

    9. A partir de Coluna Na lista, selecione CódigoDaCategoria.

    10. A partir de Operador Na lista, selecione =.

    11. A partir de Origem Na lista, selecione Controle.

    12. Em Propriedades de Parâmetroin a Control ID (Identificação do controle) Na lista, selecione GridView1.A consulta para a segunda grade obterá seu valor de parâmetro da seleção na primeira grade.

    13. Clique em Adicionar e em seguida, clique em OK Para fechar a Adicionar onde cláusula caixa de diálogo.

    14. Clique em Next.

    15. Na página de Visualizar, clique em Teste de consulta.

      O assistente exibe uma caixa de diálogo que solicita um valor para usar na cláusula WHERE.

    16. Digite 4 na caixa e clique em OK.

      Os registros de produtos para a categoria 4 são exibidos.

    17. Clique em Finish.

  4. Na Tarefas DetailsExibir Menu de Seleção Habilitar paginação.

    Isso permitirá que você percorra os registros de produtos individuais.

  5. Opcionalmente, na janela Propriedades, Abrir o PagerSettings Nó e selecione um diferente Modo Valor.

    Por padrão, você navega através dos registros, clicando um número de página, mas você pode selecionar opções para usar os links next e previous.

Agora você pode testar a combinação de grade master e o modo de exibição details.

Para testar a página

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

  2. Na grade, selecione uma categoria.

    O DetailsView o controle exibe um produto associado àquela categoria.

  3. Use os links de pager na DetailsView Controle para navegar para outros produtos para a mesma categoria.

  4. Na grade, selecione uma categoria diferente.

  5. Revisar Produtos para dessa categoria na DetailsView o controle.

Exibindo Dados Mestre/Detalhes em Páginas Separadas

Para a parte final da explicação, você irá criar outra variação — exibição de registros principais e detalhados em páginas separadas.Os registros principais são novamente exibidos em uma grade que contém um hyperlink para cada registro.Quando os usuários clicarem no hiperlink, que navegam para uma segunda página w aqui eles podem exibir registros de detalhe em uma DetailsView controle que exibe o registro Concluir produtos.

Para exibir os registros principais

  1. Adicionar uma nova página ao site Web e denominá-la MasterCustomers.aspx.

  2. Alternar para modo Design.

  3. Digitar Customers na página e formatar o texto como um título.

  4. A partir de Dados Pasta das ToolboxArraste um GridView controlar até a página.

  5. A partir de Tarefas GridExibir No menu Controle, escolha < Novo dados de origem > a partir de Escolher fonte de dados Lista e, em seguida, use o Assistente para fazer o seguinte:

    • Clique em Banco de dados.

    • Conectar-se ao banco de dados Northwind (conexão NorthwindConnectionString).

    • Recuperar o CustomerID, CompanyNamee Cidade Colunas da Os clientes Tabela.

  6. Opcionalmente, na Tarefas GridExibir menu, selecione o Habilitar paginaçãocaixa de seleção.

  7. Na Tarefas GridExibir Menu, escolha Editar colunas.

    O Campos caixa de diálogo é exibida.

  8. Limpar o Automático-Generate camposcaixa de seleção.

  9. Em Campos disponíveisEscolha Campo HiperlinkClique em Adicionare em seguida, defina as propriedades a seguir:

    Propriedade

    Value (Valor)

    Texto

    Detalhes

    DatahrefFields

    CustomerID

    Isso indica que o hiperlink deve obter seu valor a partir de CustomerID Coluna

    DatahrefFormatString

    DetailsOrders.aspx?custid={0

    Isso cria um link que está pré-programado para navegar para a página DetailsOrders.aspx.O link também passa uma variável chamada Cadeia de Caracteres da consulta CustId cujo valor será preenchido usando referenciada na coluna a DatahrefFields   property.

  10. Clique em OK Para fechar a Campos caixa de diálogo.

Agora você pode criar a página de detalhes que aceita um valor da página principal.

Para criar a página de registros detalhados

  1. Adicionar uma nova página ao site Web e denominá-la DetailsOrders.aspx.

  2. Alternar para modo Design.

  3. Digitar Orders na página e formatar o texto como um título.

  4. A partir de Dados Pasta das ToolboxArraste um GridView controlar até a página.

  5. Na Tarefas GridExibir No menu Controle, selecione < Novo dados de origem > a partir de Escolher fonte de dados Lista

  6. Na Selecione um tipo fonte de dados lista, clique em Banco de dados e em seguida, clique em OK.

  7. Na lista de conexão, selecione a conexão é criado e armazenado anteriormente no (a explicação passo a passo NorthwindConnectionString).

  8. Clique em Next.

    O assistente exibe uma página onde você pode criar uma instrução SQL.

  9. A partir de Name (Nome) Na lista, selecione Pedidos.

  10. Na Colunas Caixa de seleção Código Do Pedido, CustomerIDe OrderDate.

  11. Clique em WHERE.

  12. A partir de Colunas Na lista, selecione CustomerID.

  13. A partir de Operadores Na lista, selecione =.

  14. A partir de Origem Na lista, selecione QueryString.

    Isso especifica que a consulta selecionará registros com base no valor passado para a página com a string de consulta.

  15. Em Propriedades de Parâmetroin a Campo QueryString caixa, digite CustId.

    A consulta obterá o cliente Valor de identificação a partir de seqüência de caracteres da consulta, que é criado quando você clica em um Detalhes Vincular na página MasterCustomers.aspx.

  16. Clique em Adicionar.

  17. Clique em OK Para fechar a Adicionar onde cláusula caixa de diálogo.

  18. Clique em Nexte em seguida, clique em Finish Para fechar o assistente.

  19. A partir de Padrão Nó da ToolboxArraste um Hiperlink controlar até a página.Definir seu Texto Propriedade para Retornar para clientes e seu href Propriedade para MasterCustomers.aspx.

Agora você pode testar as páginas master-detail relacionadas.

Para testar as páginas

  1. Alterne para a página MasterCustomers.aspx.

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

  3. Clique na Detalhes Link para um cliente.

    O navegador exibe a página DetailsOrders.aspx com a ordem para o cliente selecionado.Observe que a URL na caixa Address do navegador é:

    DetailsOrder.aspx?custid=x

    Onde x xx é a identificação do cliente selecionado.

  4. Clique na Retornar para clientes Vincular, selecione um cliente diferente e clique na Detalhes link novamente para teste que você pode exibir pedidos para qualquer cliente.

Próximas etapas

Esta explicação ilustrou várias maneiras para exibir dados de tabelas relacionadas.Todos os cenários têm em comum o seguinte: eles são baseados em uma consulta com parâmetros, e os valores dos parâmetros podem ser passados para a consulta automaticamente em tempo de execução.Você pode querer experimentar maneiras adicionais para usar dados relacionados.Por exemplo, você pode desejar:

Consulte também

Conceitos

Visão geral sobre controles fonte de dados

Modificando Dados Usando Controles de Fonte de Dados