Demonstra Passo a passo: Páginas da Web com um componente de dados do Visual Studio de vinculação de dados

Muitos aplicativos da Web são criados usando múltiplas camadas, com um ou mais componentes na camada central que combinam acesso a dados juntamente com lógica corporativa.Esta explicação passo a passo mostra como criar um componente de acesso a dados em um site e ligar um controle de servidor Web (um controle GridView) aos dados que são gerenciados pelo componente.O componente de dados interage com um banco de dados do Microsoft SQL Server, e pode ler e gravar dados.

Tarefas ilustradas nesta explicação passo a passo incluem o seguinte:

• Criar um componente que pode ler e gravar dados.

• Referenciar o componente de dados como uma fonte de dados em um página da Web.

• Ligar um controle aos dados que são retornados pelo componente de dados.

• Ler e gravar dados usando o componente de dados.

Pré-requisitos

Para concluir esta explicação passo a passo, será necessário o seguinte:

• 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 Microsoft SQL servidor Web site.

  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 estiver usando o Microsoft Windows 2000, você deve atualizar a versão do MDAC que já está instalada no computador.Para fazer o download da versão atual do MDAC, consulte Data Access and Storage Developer Center.

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. No menu File, clique em 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 lista Location mais à esquerda, clique em File System, e depois na caixa de texto Location mais à direita, digite o nome da pasta onde você deseja manter as páginas do site da Web.

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

5. No Idioma lista, clicar na linguagem de programação que você prefere para trabalhr.

6. Clique em OK.

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

Criando um componente de acesso a dados

Nesta explicação passo a passo, você usará um assistente para gerar um componente que lê e grava dados no banco de dados Northwind.O componente inclui um arquivo de esquema (.xsd) que descreve os dados que você deseja e os métodos que serão usados para ler e gravar dados.Você não terá que escrever nenhum código.Em tempo de execução, o arquivo .xsd é compilado em um assembly que executa as tarefas que você especificar no assistente.

Para criar um componente de acesso a dados

1. Se o site da Web ainda não tiver uma pasta App_Code, faça o seguinte:

   1. No Solution Explorer, clique com o botão direito do mouse no nome do site.

   2. Aponte para Add Folder, e depois clique em App_Code Folder.

2. Clique com o botão direito do mouse na pasta App_Code e então clique em Add New Item.

   The Adicionar novo item caixa de diálogo é exibida.

3. Em Visual Studio installed templates, clique em DataSet.

4. Na caixa Name, digite EmployeesObject, e depois clique em Add.

   O assistente TableAdapter Configuration aparece.

5. Clique em New Connection.

6. Se a caixa de diálogo Choose Data Source aparecer, clique em Microsoft SQL Server e depois clique em Continue.

7. Na caixa Server name, digite o nome do computador que esteja executando o SQL Server.

8. Para as credenciais de login, selecione a opção que seja apropriada para acessar o banco de dados do SQL Server (segurança integrada ou ID específico e senha) e se for necessário, digite um nome de usuário e senha.

   • Se você especificar credenciais explícitas, selecione a caixa de seleção Save my password.

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 de que a conexão funciona, clique em OK.

    O assistente TableAdapter Configuration aparece com as informações de conexão preenchidas.

11. Clique em Next.

    Uma página onde você pode escolher armazenar a sequência de conexão no arquivo de configuração aparece.

12. Marque a caixa de seleção Yes, save this connection as e clique em Next.

    Você pode deixar o nome de sequência de conexão padrão.

    Uma página onde você pode optar por usar instruções SQL ou procedimentos armazenados aparece.

13. Clique em Use SQL statements, e depois clique em Next.

    Usar procedimentos armazenados tem algumas vantagens, incluindo desempenho e segurança.Entretanto, pela simplicidade desta explicação passo a passo, você usará uma instrução SQL.

    Uma página na qual você pode definir a instrução SQL aparece.

14. Em What data should be loaded into the table, digite a seguinte instrução SQL:

    SELECT EmployeeID, LastName, FirstName, HireDate FROM Employees
    

    Observação:
    Você pode clicar em Query Builder para usar uma ferramenta construtora, se você preferir.

15. Clique em Next.

    Uma página na qual você pode definir os métodos que o componente irá expor aparece.

16. Clique para desmarcar a caixa de seleção Fill a DataTable e em seguida, selecione Return a DataTable e caixas de seleção Create methods to send updates directly to the database.

    Você não precisa de um método para preencher uma tabela de dados para esta explicação passo a passo.Entretanto, você precisará de um método que retorna os dados e você também quer que o componente contenha métodos que atualizem o banco de dados.

17. Na caixa Method Name, digite GetEmployees.

    Você está nomeando o método que será usado posteriormente para obter dados.

18. Clique em Finish.

    O assistente configura o componente e o exibe no Component Designer, exibindo os dados que o componente gerencia e os métodos que o componente expõe.

19. Salve o componente de dados, e depois feche o Component Designer.

20. No menu Build, clique em Build Web Site para certificar-se de que o componente compile corretamente.

Usando o componente de dados em uma página

Agora você pode usar o componente de dados como uma fonte de dados em uma página da Web ASP.NET.Para acessar o componente de dados, você usará um controle ObjectDataSource, configurando-o para chamar os métodos de acesso a dados que são expostos pelo componente de dados.Você pode adicionar controles à página e ligá-los ao controle de fonte de dados.

Para adicionar um controle da fonte de dados à página

1. Abra a página Default.aspx e alterne para o modo de exibição Design.

2. No grupo Dados, a partir do grupo Caixa de Ferramentas, arraste um controle ObjectDataSource para a página.

   • Se o menu de atalho ObjectDataSource Tasks não for exibido, clique com o botão direito do mouse no controle ObjectDataSource e depois clique em Show Smart Tag.

3. No menu de atalho ObjectDataSource Tasks, clique em Configure Data Source.

   O assistente Configure Data Source aparece.

4. Na lista Choose your business object, clique em EmployeesObjectTableAdapters.EmployeesTableAdapter.

   Este é o nome do tipo (namespace e nome da classe) do componente que você criou na seção anterior.

5. Clique em Next.

6. Na guia Select, na lista Choose a method, clique em GetEmployees(), returns EmployeesDataTable.

   O método GetEmployees é um método que foi definido no componente que você criou na seção anterior.Ele retorna os resultados da instrução SQL, disponível em um objeto DataTable ao qual controles de dados podem ser ligados.

7. Clique em Finish.

Você pode adicionar controles de dados à página e ligá-los ao controle ObjectDataSource.Nesta explicação passo a passo, você irá trabalhar com o controle GridView.

Para adicionar um controle GridView à página e ligá-lo aos dados

1. A partir do grupo Data, no Toolbox, arraste um controle GridView para a página.

   • If the GridView Tasks shortcut menu does not appear, right-click the GridView control, and then click Show Smart Tag.

2. No menu de atalho GridView Tasks, na lista Choose Data Source, clique em ObjectDataSource1, o qual é a identificação do controle que você configurou na seção anterior.

   O controle GridView reaparecerá com uma coluna para cada coluna de dados que é retornada pela instrução SQL.

3. Em Properties, verifique se o DataKeyNames é definido como CódigoDoFuncionário.

Testando a Página

Agora que todos os controles que você precisa estão na página, você pode testar a página.

Para testar a página

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

2. Confirme se as colunas EmployeeID, LastName, FirstName, e HireDate da tabela Employees são exibidas na grade.

3. Feche o navegador.

O controle GridView solicita dados do controle ObjectDataSource.Por sua vez, o controle ObjectDataSource cria uma instância do componente de dados e chama o método GetEmployees para o componente de dados.O método GetEmployees retorna um objeto DataTable, que o controle ObjectDataSource retorna para o controle GridView.

Adicionando atualizações à página

O componente de dados que você criou inclui instruções SQL para atualizar o banco de dados (atualiza, insere, e exclui registros).As instalações de atualização do componente de dados são expostas pelos métodos que foram gerados automaticamente quando o assistente criou o componente.O controle GridView e o controle ObjectDataSource podem interagir para iniciar automaticamente os métodos de atualização.

Observação:
O controle GridView não dá suporte à inserção.

Para ativar atualizações e exclusões

1. Clique com o botão direito do mouse no controle GridView e, em seguida, clique em Mostrar Marca Inteligente.

2. Selecione a caixa de seleção Enable Editing.

3. Selecione a caixa de seleção Enable Deleting.

   Observação:
   Ativar exclusões permite que você remova registros do banco de dados permanentemente.Não ative exclusões a menos que você esteja trabalhando com dados de teste descartáveis.

Testar atualizações

Você pode agora testar para certificar-se de que você pode usar o componente para atualizar o banco de dados.

Para testar atualizações

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

   Desta vez, o controle GridView exibe os links Edit e Delete em cada linha.

2. Clique no link Edit que está próximo a uma linha.

3. Faça uma alteração na linha, e depois clique em Update.

   A grade é exibida novamente com os dados atualizados.

4. Clique no link Delete que está em uma linha.

   A linha é permanentemente excluída do banco de dados.A grade é exibida novamente sem esta linha.

5. Feche o navegador.

Próximas etapas

Esta explicação passo a passo ilustra como trabalhar com um componente de dados.Você pode desejar testar recursos adicionais de navegação.Por exemplo, você pode querer fazer o seguinte:

• Criar um componente de dados personalizado ao invés de usar o assistente.

  Para um exemplo, consulte Demonstra Passo a passo: Ligação para um objeto de negócios personalizado de dados.

• Restringir quais usuários podem alterar os dados.Um método geral é adicionar associações e funções ao site, e depois estabelecer regras que o componente comercial pode verificar antes de permitir alterações nos dados.

• Para obter mais informações, consulte Passo a passo: Criando um Site com Associação e Logon de Usuário (Visual Studio) e Passo-a-passo: Gerenciando Usuários de Sites da Web com Papéis.

Consulte também

Tarefas

Passo-a-passo: Usando código compartilhado em sites da Web no Visual Web Developer

Demonstra Passo a passo: Criando um Basic página da Web no Visual Web Developer

Conceitos

Visão geral sobre controles fonte de dados

Usando parâmetros com controles de fonte de dados