Demonstra Passo a passo: Editando e inserindo dados em páginas da Web com o controle de servidor Web DetailsView

  • Artigo

Microsoft Visual Web Developer permite que você crie formulários de entrada de dados para atualização de registros e inserção de outros novos em um banco de dados com apenas algumas linhas de código.Usando uma combinação de um controle de fonte de dados que encapsula acesso a dados e os controles DetailsView e GridView que exibem registros em um formato editável, você pode criar uma página de entrada de dados que permite que os usuários editem registros existentes ou insiram novos, tudo sem qualquer código.

Durante este explicação passo a passo, você aprenderá como:

  • Criar uma página de entrada de dados.

  • Configurar um controle da fonte de dados com informações necessárias para realizar atualizações e inserções em um banco de dados.

  • Usar o controle DetailsView para exibir registros individuais, alterá-los e inserir novos registros.

  • Usar um controle GridView para ativar a modificação do banco de dados a partir da página de entrada de dados.

Pré-requisitos

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

  • O Visual Web Developer.

  • 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 fazer o download da versão atual do MDAC, consulte Data Access and Storage Developer Center.

  • 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.

  • Permissão para modificar dados no banco de dados Northwind.

Criando o Site da Web e a Página

Crie um novo site e uma nova página seguindo estas etapas.

Para criar um novo site de 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 caixa Location, selecione File System e digite o nome da pasta onde você deseja manter as páginas do seu site Web.

    Por exemplo, digite o nome C:\WebSites\EditData.

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

    A linguagem de programação que você escolher poderá ser o padrão do site, mas você pode definir as linguagens de programação para cada página individualmente.

  6. Clique em OK.

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

Conectando-se ao SQL Server

A próxima etapa é estabelecer uma conexão com o banco de dados do SQL Server.

Para criar uma conexão com um banco de dados do SQL Server

  1. Em Server Explorer, clique com o botão direito do mouse em Data Connections e clique em Add Connection.Se você estiver usando o Visual Web Developer Express, use o Database Explorer.

    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 página Choose Data Source aparecer, na lista Data source, selecione o tipo de fonte de dados que você irá utilizar.Para este passo a passo, o tipo da fonte de dados será Microsoft SQL Server.Na lista Data provider, clique em .NET Framework Data Provider for SQL Server, e clique em Continue.

    Observação:

    Se a guia Server Explorer não estiver visível no Visual Web Developer, no menu View, clique em Server Explorer.Se a guia Database Explorer não estiver visível na edição Express, no menu View, clique em Database Explorer.

  2. Na caixa Add Connection, digite seu nome de servidor na caixa Server Name.

  3. Para a seção Log on to the server, selecione a opção que for apropriada para acessar o banco de dados do SQL Server em execução (segurança integrada ou identificação e senha específicos) e, se necessário, digite um nome de usuário e senha.Selecione a caixa de seleçãoSave my Password se você inseriu uma senha.

  4. Em selecionar ou digite um nome de banco de dados, digite Northwind.

  5. Clique em Test Connection, e quando você tiver certeza de que ele funciona, clique em OK.

    A nova conexão foi criada em Data Connections no Server Explorer.

Criando a Página de Entrada de Dados

Nesta seção, você irá criar uma página de entrada de dados e irá configurar um controle DetailsView a fim de exibir dados de funcionários que estão armazenados na tabela Employees do banco de dados Northwind.Para tratar o acesso a dados da página, você irá configurar um controle da fonte de dados SQL.

Para criar uma página de entrada de dados e configurar um controle DetailsView

  1. No menu Website, clique em Add New Item.

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

  2. Under Visual Studio installedtemplates, click Web Form, and then in the Name box, type EditEmployees.aspx.

  3. Clique em Adicionar.

  4. Abra a página EditarFuncionarios.aspx.

  5. Alternar para modo Design.

  6. Digite Editar Funcionários, selecione o texto e, em seguida, formate o texto como um título.

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

  8. Clique com o botão direito do mouse no controle DetailsView, clique em Propriedades e, em seguida, defina AllowPaging como true.

    Isso permitirá a você paginar através das entradas individuais de funcionários quando elas são exibidas.

A próxima etapa é criar e configurar um controle da fonte de dados que pode ser usado para realizar a consulta ao banco de dados.Existem várias maneiras de criar um controle da fonte de dados, incluindo arrastar elementos de dados do Server Explorer ou do Database Explorer para a página.Neste passo a passo, você irá iniciar o controle DetailsView e irá configurar o controle da fonte de dados a partir daí.

Para configurar um controle da fonte de dados

  1. Clique com o botão direito do mouse no controle DetailsView e clique em Show Smart Tag.

  2. No menu Tarefas DetailsView, na caixa Escolher Fonte de Dados, clique em <Nova fonte de dados>.

    Aparecerá a caixa de diálogo Data Source Configuration Wizard.

  3. Em Select a data source type, clique em Database.

  4. Deixe o nome padrão, SqlDataSource1, e clique em OK.

    O assistente Configure Data Source exibirá a página Choose a connection.

  5. Na caixa Which data connection should your application use to connect to the database?, digite a conexão que você criou em "Para criar uma conexão para SQL Server", e em seguida, clique em Next.

    O assistente irá exibir uma página onde você pode escolher armazenar a sequência de conexão em um arquivo de configuração.Armazenar a sequência de conexão no arquivo de configuração possui duas vantagens:

    • É mais seguro que armazená-la na página.

    • Você pode usar a mesma sequência de conexão em várias páginas

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

    O assistente irá exibir uma página onde você pode especificar quais dados você deseja recuperar do banco de dados.

  7. Na página Configure the Select Statement, selecione Specify columns from a table or view, e na caixa Name, clique em Employees.

  8. Em Columns, marque as caixas de seleção EmployeeID, LastName, FirstName e HireDate e, em seguida, clique em Next

  9. Clique em Test Query para visualizar os dados, e em seguida, clique em Finish

Agora você pode testar a página para exibição de registros de funcionários.

Para testar a exibição dos registros dos funcionários

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

    O primeiro registro de funcionário é exibido no controle DetailsView.

  2. Clique nos links referentes aos números das páginas para ver os registros adicionais de funcionários.

  3. Feche o navegador.

Permitindo a Edição em um Controle GridView

Nesse ponto, você pode visualizar registros de funcionários, mas você não pode editá-los.Nesta seção, você irá adicionar um controle GridView e irá configurá-lo para que você possa editar registros individuais.

Observação:

O controle GridView apresenta uma lista de registros e permite a você editá-los.Entretanto, não permite que você insira novos registros.Posteriormente neste passo a passo, você usará o controle DetailsView que permite a você adicionar novos registros.

Para oferecer suporte à edição, você deve configurar o controle da fonte de dados criado anteriormente (SqlDataSource1) com instruções SQL que realizam atualizações.

Para adicionar um controle GridView para permitir a edição

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

  2. Clique com o botão direito do mouse no controle GridView, clique em Show Smart Tag e, em seguida, no menu GridView Tasks, na caixa Choose Data Source, clique em SqlDataSource1.

  3. No menu GridView Tasks, clique em Configure Data Source.

  4. Clique em Next para ir à página Configure the Select Statement do assistente.

  5. Na página Configure the Select Statement, clique em Advanced, marque a caixa de seleção Generate INSERT, UPDATE, and DELETE statements e, em seguida, clique em OK.

    Isso gera instruções Insert, Update e Delete para o controle SqlDataSource1 com base na instrução Select que você configurou anteriomente.

    Observação:

    Como alternativa, você pode criar as instruções manualmente, selecionando o Specify a custom SQL statement or stored procedure e inserindo as consultas SQL.

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

    O controle SqlDataSource está agora configurado com instruções SQL adicionais.

    Observação:

    Você pode examinar as instruções geradas pelo assistente, selecionando o controle SqlDataSource e exibindo as propriedades DeleteQuery, InsertQuery e UpdateQuery.Você também pode visualizar as propriedades atualizadas do controle alternando para modo de exibição Fonte e examinando a marcação do controle.

  7. No menu GridView Tasks, marque as caixas de seleção Enable Paging e Enable Editing.

    Observação de segurança:

    Entrada do usuário em um página da Web do ASP.NET pode incluir script de cliente possivelmente mal-intencionado.Por padrão, as páginas Web do ASP.NET validam a entrada do usuário para certificar-se de que a entrada não inclui script ou elementos HTML.Contanto que essa validação esteja ativada, não é preciso explicitamente verificar script ou elementos HTML na entrada do usuário.Para obter mais informações, consulte Visão Geral de Scripts Maliciosos.

Agora você pode testar a edição de registros de funcionários.

Para testar a edição no controle GridView

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

    O controle GridView é exibido com os dados em caixas de texto.

  2. Escolha uma linha no controle GridView e clique em Edit.

  3. Faça uma alteração no registro e, em seguida, clique em Update

    Os dados atualizados agora aparecem tanto no controle GridView quanto no controle DetailsView.

  4. Feche o navegador.

Permitindo a Edição, Exclusão e Inserção Usando um Controle DetailsView

O controle GridView permite a você editar registros, mas ele não permite inserir dados.Nesta seção, você irá modificar o controle DetailsView a fim de visualizar registros individualmente, bem como excluir, inserir e atualizar registros.

Para usar um controle DetailsView para permitir a exclusão, inserção e atualização

  1. Clique com o botão direito do mouse no controle DetailsView e em seguida clique em Exibir Marca Inteligente.

  2. No menu DetailsView Tasks, marque as caixas de seleção Enable Inserting, Enable Editing e Enable Deleting.

    Quando você usou o controle DetailsView anteriormente neste passo a passo, as opções para ativar a edição, inserção e exclusão não estavam disponíveis.O motivo é que o controle SqlDataSource1 ao qual o controle DetailsView é acoplado não possui as instruções SQL necessárias.Agora que você já configurou o controle da fonte de dados para incluir instruções de atualização, as opções de atualização estão disponíveis no controle DetailsView.

Agora você pode testar a exclusão, a inserção e a atualização no controle DetailsView.

Para testar a atualização, a inserção e a exclusão no controle DetailsView

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

    O controle DetailsView exibirá um registro de funcionário.

  2. No controle DetailsView, clique em Edit.

    O controle DetailsView agora exibe os dados em caixas de texto.

  3. Faça uma alteração no registro e, em seguida, clique em Update

    O registro atualizado é exibido no controle.

  4. No controle DetailsView, clique em New.

    O controle agora exibe caixas de texto em branco para cada coluna.

  5. Insira valores para cada coluna.

    A tabela Employees tem uma coluna de chave de incremento automático. Sendo assim, o valor de EmployeeID será atribuído automaticamente quando você salvar o registro.

  6. Quando você tiver terminado, clique em Insert.

    O novo registro é adicionado como o último registro.

    Observação:

    Inserir um novo registro na tabela Employees neste passo a passo não irá gerar erros.No entanto, ao trabalhar com dados de produção, as tabelas podem ter restrições (como uma restrição de chave estrangeira) das quais você deve estar ciente ao configurar o controle DetailsView.

  7. Use paginação no controle DetailsView para navegar até o último registro e, em seguida clique em Delete.

    O novo registro será removido.

    Observação:

    Assim como com a inserção de dados, você deve estar ciente de quaisquer restrições que se aplicam à linha de dados ao configurar um controle DetailsView para permitir exclusão.

Próximas etapas

Essa explicação passo a passo tem ilustrado noções básicas sobre como criar uma página Web que permite aos usuários modificar registros de dados.Convém explorar recursos de dados adicionais de páginas da Web ASP.NET.Por exemplo, você pode querer fazer o seguinte:

Consulte também

Tarefas

Demonstra Passo a passo: Criação de uma página de Web para exibir dados de banco de dados do acesso

Conceitos

Visão geral sobre controles fonte de dados

Ligação a dados usando o controle de fonte de dados