Demonstra Passo a passo: Exibindo dados em páginas da Web com o controle FormView servidor Web com formatação

  • Artigo

O ASP.NET fornece vários controles que permitem que você exiba e edite registros de dados.Nesta explicação passo a passo, você trabalha com o controle FormView, que funciona com um único registro de dados ao mesmo tempo.A característica principal do controle FormView é que ele permite que você crie o leiaute do registro definindo modelos.Trabalhando com modelos, você pode ter controle completo sobre o leiaute e a aparência dos dados dentro do controle.O controle FormView também suporta atualizações como editar, inserir, e excluir registros de dados.Se a fonte de dados fornece mais de um registro para o controle FormView, o controle permite que você pagine entre os registros individualmente.

Observação:

Você também pode editar registros de dados individuais com o controle DetailsView, que fornece um leiaute predefinido para os dados.Para obter detalhes, consulte:Visão geral do controle de servidor Web DetailsView.

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

  • Criando uma página para exibir informações Mestre/detalhes.

  • Usando um controle FormView para criar um leiaute de forma livre para um registro de dados.

  • Configurando o controle FormView para permitir a edição.

Pré-requisitos

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

  • O Microsoft Visual Web Developer.

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

Criando o Site Web

Crie um novo site e uma nova página 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 caixa Location, insira o nome da pasta onde você deseja manter as páginas do seu site.

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

  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.

Usando uma Lista Suspensa como Mestre

Esta parte dá explicação passo a passo, você adiciona uma lista de soltar-abaixo para uma página e preenche-a com uma lista dos nomes dos produtos.Quando os usuários selecionarem um produto, a página será exibida com os detalhes para o produto em um controle FormView.

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. Digite a página Display Product Information.

  4. A partir do grupo Padrão na Caixa de Ferramentas, arraste um controle DropDownList para a página.

  5. Se o menu DropDownList Tasks não aparecer, clique com o botão direito do mouse no controle DropDownList e em seguida, clique em Show Smart Tag

  6. No menu DropDownListTasks, selecione a caixa de seleção Enable AutoPostBack .

  7. Clique em Choose Data Source para abrir o Data Source Configuration Wizard.

  8. Na lista Selecione uma fonte de dados , clique em Nova Fonte de Dados.

  9. Clique em Database.

    Isso especifica que você deseja obter dados de um banco de dados que tem suporte para instruções SQL.

    Na caixa Specify an ID for the data source, um nome controle da fonte de dados padrão será exibido.Você pode deixar esse nome.

  10. Clique em OK.

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

  11. Clique no botão 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 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 Provedor de Dados, clique em .NET Framework Data Provider for SQL Server e, em seguida, clique em Continue

  12. Na caixa de diálogo Add Connection, faça o seguinte:

    1. Na caixa Nome do servidor, digite o nome do computador que estiver executando o Servidor SQL.

    2. Para as credenciais de logon, selecione a opção que apropriada para acessar a execução do banco de dados do Servidor SQL (segurança integrada ou ID específico e senha) 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.

    3. Selecione o botão Select or enter a database name, e digite Northwind.

    4. Clique em Test connection e, quando você tiver certeza de que a conexão funciona, clique em OK.

    Você é retornado para o assistente, e as informações de conexão são preenchidas.

  13. Clique em Next.

  14. Certifique-se de que a caixa de seleção Yes, save this connection as está marcada, e clique em Next.(Você pode deixar o nome da string de conexão padrão.)

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

  15. Clique em Specify columns from a table or view.

  16. Na lista Name, clique Products.

  17. Em Columns, selecione ProductID e ProductName.

  18. Clique em Next.

  19. Clique em Test Query para certificar-se que você está recuperando os dados que você deseja.

  20. Clique em Finish.

    Você é retornado para o assistente.

  21. Na lista Select a data field to display in the DropDownList, clique ProductName.

  22. Na lista Select a data field for the value of the DropDownList, selecione ProductID.

    Isto especifica que quando um item é selecionado, o campo ProductID será retornado como o valor do item.

  23. 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 um nome do produto para certificar-se de que a lista executa uma nova postagem.

Adicionando um Controle FormView

Agora você irá adicionar um controle FormView para exibir detalhes do produto.O controle FormView obtém seus dados de um controle da fonte de dados segundo o que você adicionar à página.O segundo controle da fonte de dados contém uma consulta com parâmetros que obtém o registro de produto para o item atualmente selecionado no controle DropDownList.

Para adicionar um controle FormView

  1. A partir do grupo Data na Toolbox, arrastar um controle na página FormView.

  2. Se o menu FormView Tasks não aparecer, clique com o botão direito do mouse no controle FormView e em seguida, clique em Show Smart Tag

  3. No menu Tarefas FormView, em Selecione a lista de Fontes de Dados, clique em <Nova Fonte de Dados>.

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

  4. Clique em Database.

    O controle FormView obterá dados da mesma tabela assim como o controle DropDownList.

    Na caixa Specify an ID for the data source, um nome controle da fonte de dados padrão será exibido.Você pode deixar esse nome.

  5. Clique em OK.

    O assistente Configure Data Source inicia.

  6. Na lista Which data connection should your application use to connect to the database?, selecione a conexão que você criou e armazenou anteriormente na explicação passo a passo.

  7. Clique em Next.

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

  8. Na lista Name em Specify columns from a table or view, selecione Products.

  9. Na caixa Columns, selecione ProductID, ProductName, e UnitPrice

  10. Clique no botão WHERE.

    A caixa de diálogo Add WHERE Clause é exibida.

  11. Na lista Column, selecione ProductID.

  12. Na lista Operator, selecione =.

  13. Na lista Source, selecione Control.

  14. Em Propriedades de Parâmetros, na lista Identificador de Controle, selecione DropDownList1.

    As duas últimas etapas especificam que a consulta obterá o valor de pesquisa para o identificador do produto do controle DropDownList adicionado anteriormente.

  15. Clique em Adicionar.

  16. Clique em OK para fechar a caixa de diálogo Add WHERE Clause.

  17. Clique em Advanced.

    A caixa de diálogo Opções de Geração de SQL Avançado aparece.

  18. Selecione a caixa de seleção Generate INSERT, UPDATE, and DELETE statements.

    Esta opção faz o assistente criar instruções SQL atualizadas com base na instrução Select que você configurou.Posteriormente na explicação passo a passo você usará o controle FormView para editar e inserir registros, que requerem instruções de atualização no controle da fonte de dados.

  19. Clique em OK.

  20. Clique em Next.

  21. Na página Preview, clique em Test Query.

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

  22. No Valor na caixa, digite 4 e, em seguida, clicar OK.

    A informação produto aparece.

  23. Clique em Finish.

Personalizando o leiaute no Controle FormView

A razão para usar o Controle FormView é que você pode definir o leiaute do registro que ele exibe.Essa seção dá a explicação passo a passo, sobre como você irá personalizar o leiaute do registro, editando um modelo.Para o leiaute, você usará uma tabela HTML.

Para formatar o leiaute

  1. Clique no controle FormView para selecioná-lo, e em seguida, arraste o alça de redimensionamento à direita do controle para tornar o controle tão largo quanto a página atual.

  2. Arraste a alça de redimensionamento na parte inferior do controle para alterar a altura do controle cerca de 400 pixels .(A altura EXATA não é importante.)

  3. Clique com o botão direito do mouse no controle, clique Edit Template, e em seguida, clique em ItemTemplate.

    O controle é reexibido no modo de edição do modelo de item.O modelo de item contém o texto estático e controles que são usados para exibir o registro de dados quando a página é executada.Por padrão, Visual Web Developer preenche o modelo do item com um controle Label de dados vinculado para cada coluna de dados na fonte de dados.Além disso, o desenvolvedor de Visual Web gera texto estático para cada label atuar como uma legenda.

    O modelo também é gerado com três controles LinkButton com o texto Editar, Deletar, e Novo.

  4. Coloque o ponto de inserção na parte superior do modelo de item, pressione ENTER algumas vezes para liberar espaço, e depois na parte superior do modelo de tipo Product Details para atuar como um título.

  5. Coloque o cursor abaixo dos controles e do texto estático e, em seguida, no menu de Tabela, clique em Inserir Tabela .

    Você está criando uma tabela HTML como um contêiner para o texto e controles.

  6. Na caixa de diálogo Inserir Tabela , defina Linhas para 4 e Colunas para 2.

  7. Clique em OK para fechar a caixa de diálogo Inserir Tabela .

  8. Selecione todas as células na tabela e em seguida, no menu Tabela, selecione Formatação de Célula .

    A caixa de diálogo Propriedades da Célula é exibida.

  9. Defina Largura como 35 pixels (px) e Altura como 30 pixels (px).

  10. Clique em OK para fechar a caixa de diálogo Propriedades da Célula.

  11. Arraste o controle ProductIdLabel para a parte superior direita da célula.

  12. Arraste o controle ProductNameLabel na segunda célula à direita.

  13. Arraste o controle UnitPriceLabel na terceira célula à direita.

  14. Na coluna esquerda, digite o texto estático para atuar como legendas para os controles Label.Por exemplo, na célula ao lado de ProductIdLabel controle, ID de tipo.Você pode digitar qualquer texto de legenda que você desejar.

  15. Clique com o botão direito do mouse na coluna esquerda, clique Select, e em seguida, clique em Column.

  16. Na janela de propriedades, definida align como right para alinhar o texto da legenda à direita.

  17. Selecione a coluna à direita e arraste sua borda direita para fazer a tabela larga o suficiente para exibir nomes extensos de produto.

  18. Selecione o texto gerado pelo Desenvolvedor Visual Web (por exemplo, o texto ProductID) e exclua-o.

  19. Clique com o botão direito do mouse na barra de título do controle FormView e clique em End Template Editing.

    O editor de modelo fecha e o controle aparece com o leiaute que você criou.

Teste o controle FormView

Agora você pode testar seu leiaute.

Para testar o controle FormView

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

  2. No controle DropDownList, clique em um nome de produto.

    O controle FormView exibe detalhes sobre o produto.

  3. Selecione um produto diferente e confirme que o controle FormView exibe os detalhes do produto.

  4. Feche o navegador.

Adicionando recursos de inserir e editar no controle FormView

O controle FormView pode exibir registros individuais e também oferece suporte a edição, exclusão, e inserção.

Nesta parte da explicação passo a passo, você irá adicionar o recurso de edição ao registro atualmente exibido.Para editar o Registro, você define um modelo diferente que contém caixas de texto (e possivelmente outros controles).

Para adicionar funcionalidade de edição ao controle FormView

  1. Clique com o botão direito do mouse no controle FormView, clique Edit Template, e clique em EditItemTemplate.

    O editor de modelo aparecerá, exibindo a propriedade EditItemTemplate, que define como os registros são dispostos quando o controle estiver em modo de edição.Visual Web Developer preenche o modelo de edição com um controle TextBox para cada coluna de dados que não é uma chave e adiciona texto estático para legendas.Isso é semelhante à maneira como o modelo de item foi gerado, exceto que no modelo de edição, o Desenvolvedor Visual Web gera caixas de texto.

    Como antes, o modelo é gerado com os controles LinkButtonAtualizar e Cancelar que são usados para salvar e descartar mudanças enquanto da edição.

  2. Opcionalmente, adicione uma tabela de leiaute e organize os controles como você fez ao trabalhar com o modelo de item anteriormente na explicação passo a passo.

  3. Clique com o botão direito do mouse no controle FormView, clique Edit Template, e em seguida, clique em InsertItemTemplate.

    Como com a propriedade EditItemTemplate, o desenvolvedor Visual Web cria automaticamente um leiaute de modelo de rótulos e controles TextBox.Os controles serão exibidos quando usuários desejarem inserir um novo registro na tabela de Produtos.O modelo também é gerado com controles LinkButtonInserir e Cancelar.

  4. Opcionalmente, adicione uma tabela de leiaute e organize os controles como fez ao trabalhar com o modelo de item de edição.

  5. Clique com o botão direito do mouse no controle FormView e clique em End Template 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.

Testando edição e inserção

Agora você pode testar edição e inserção.

Para testar recursos de edição do controle FormView

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

  2. Selecione um produto no controle DropDownList.

    Os detalhes do produto são exibidos no controle FormView.

  3. Clique em Edit.

    O controle FormView alterna para o modo de edição.

  4. Faça uma alteração no Nome do produto ou unidade de preço.

  5. Clique em Update.

    O registro é salvo e o controle FormView alterna para o modo de exibição.A alteração é refletida na exibição.

  6. Selecione um produto diferente.

  7. Clique em Edit.

  8. Faça uma alteração para o nome do produto.

  9. Clique em Cancel.

    Confirme que a alteração não foi salva.

Para testar recursos de inserção do controle FormView

  1. Clique Novo no controle FormView.

    O controle FormView alterna para o modo de inserção, exibindo duas caixas de texto vazias.

  2. Digite um novo nome do produto e preço, e clique Insert.

    O registro é salvo no banco de dados e o controle FormView alterna para o modo de exibição (ItemTemplate).

    Observação:

    O novo registro não será exibido na lista suspensa.Você adicionará essa funcionalidade na próxima seção.

Exibir nomes de produto atualizados na lista suspensa

A página agora permite exibir, editar ou excluir registros na tabela de banco de dados de produtos.Entretanto, a lista suspensa ainda não está sincronizada com alterações que você fez no controle FormView.Por exemplo, se você inserir um novo registro de produto, a lista suspensa não exibe o novo registro a menos que você feche a página e reabra-a.Além disso, a página é exibida inicialmente com o primeiro registro na tabela de Produtos, que pode não ser o que você deseja.

Você pode adicionar alguns códigos para correção dessas questões secundárias.Nesta seção da explicação passo a passo, você irá fazer o seguinte:

  • Atualizar a lista suspensa sempre que os usuários editarem ou inserirem um registro.

  • Adicione o texto (" Select) " na lista suspensa quando a página for exibida pela primeira vez e remova-o quando o usuário tiver feito a primeira seleção.

Para atualizar a lista suspensa quando registros são editados ou inseridos

  1. No modo Design da página, selecione o controle FormView.

  2. Na janela Propriedades, clique no botão Eventos para exibir uma lista de eventos para o controle FormView.

  3. Clique duas vezes na caixa ItemInserted.

    Visual Web Developer alterna para o modo edição de código e cria um manipulador de eventos para o evento ItemInserted.

  4. Adicione o seguinte código realçado para o manipulador de eventos.

    Protected Sub FormView1_ItemInserted(ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.FormViewInsertedEventArgs) _
   Handles FormView1.ItemInserted
      DropDownList1.DataBind()
End Sub

    [C#]

    protected void FormView1_ItemInserted(object sender, 
        FormViewInsertedEventArgs e)
{
    DropDownList1.DataBind();
}

    O código será executado após o novo registro ser inserido.Ele religa a lista suspensa à tabela de Produtos, que faz o conteúdo da lista ser atualizado.

  5. Alternar para modo Design.(Se você estiver trabalhando com uma página code-behind, alterne para a página Default.aspx e alterne para o modo Design).

  6. Na janela Propriedades, clique no botão Eventos para exibir uma lista de eventos para o controle FormView.

  7. Clique duas vezes na caixa ItemUpdated.

    Visual Web Developer alterna para o modo edição de código e cria um manipulador de eventos para o evento ItemUpdated.

  8. Adicione o seguinte código realçado.

    Protected Sub FormView1_ItemUpdated(ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.FormViewUpdatedEventArgs) _
   Handles FormView1.ItemUpdated
      DropDownList1.DataBind()
End Sub

    [C#]

    protected void FormView1_ItemUpdated(object sender, 
    FormViewUpdatedEventArgs e)
{
    DropDownList1.DataBind();
}

    O código será executado após o registro ser atualizado.Ele religa a lista suspensa à tabela de Produtos, que faz o conteúdo da lista ser atualizado.

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

  10. Edite o nome do produto de um registro, clique Update, e examine a lista suspensa para certificar-se de que o nome atualizado foi exibido.

  11. Insira um novo registro de produto, clique Insert, e examine a lista suspensa para certificar-se de o novo nome foi adicionado à lista.

A etapa final é para alterar a lista suspensa para exibir " (Selecionar) " e para exibir o controle FormView somente quando os usuários fizerem uma seleção.

Para adicionar uma entrada de seleção no controle da lista suspensa.

  1. Clique duas vezes no modo Design, uma parte em branco da página.

    O desenvolvedor de Visual Web cria um manipulador de eventos para a página do evento Load.

  2. No manipulador, adicione o seguinte código realçado.

    [Visual Basic]

    Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then        FormView1.Visible = False    End If
End Sub

    [C#]

    protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        FormView1.Visible = false;
    }
}

    O código executa quando a página é executada.Ele testa primeiro para ver se esta é uma nova postagem; caso contrário, esta é a primeira vez que a página foi executada.Se não for uma postagem, o código ocultará o controle FormView, porque você deseja exibi-lo somente quando o usuário tiver selecionado explicitamente um registro para exibir ou editar .

  3. No modo Design para a página, selecione o controle DropDownList.

  4. Na janela Propriedades, clique as reticências (...) na caixa Items.

    A caixa de diálogo ListItem Collection Editor aparece.

  5. Clique Add para criar um novo item.

  6. Em ListItem properties, in the Texto caixa, o tipo (Selecionar).

  7. Clique em OK para fechar a caixa de diálogo ListItem Collection Editor.

  8. Na caixa Propriedades, defina AppendDataBoundItems para true.

    Quando a lista suspensa é preenchida durante a vinculação de dados, as informações sobre o produto serão adicionadas ao item (Select) que você definiu.

  9. Na janela Propriedades, clique no botão Eventos para exibir uma lista de eventos para o controle DropDownList.

  10. Clique duas vezes na caixa SelectedIndexChanged.

  11. Adicione o seguinte código realçado.

    [Visual Basic]

    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender _
    As Object, ByVal e As System.EventArgs) _
    Handles DropDownList1.SelectedIndexChanged
        If DropDownList1.Items(0).Text = "(Select)" Then            DropDownList1.Items.RemoveAt(0)        End If        FormView1.Visible = True
End Sub

    [C#]

    protected void DropDownList1_SelectedIndexChanged(object sender, 
    EventArgs e)
{
    if(DropDownList1.Items[0].Text == "(Select)")    {        DropDownList1.Items.RemoveAt(0);    }    FormView1.Visible = true;
}

    O código será executado quando os usuários selecionarem um item no controle DropDownList.Ele remove o item " (Select) " que você adicionou anteriormente (checando primeiramente se o item existe), porque depois da primeira vez que o usuário seleciona um item, você não precisa mais requisitá-los para selecionar um item.O código também exibirá (Un-hides) o controle FormView para que os usuários possam ver o registro que foi selecionado.

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

    A página exibe somente a lista suspensa, com a palavra (Select) exibida.

  13. Selecione um item na lista.

    O item é exibido no controle FormView.

  14. Examine a lista suspensa e note que a palavra (Select) não está mais na lista.

Próximas etapas

Esta explicação passo a passo mostrou as etapas básicas para usar um controle FormView para exibir e editar registros de dados individuais usando um leiaute personalizado.O controle FormView permite que você execute formatação mais sofisticada do que as que você fez nesta explicação passo a passo.Além disso, você pode criar modelos para outros modos, incluindo o modo de seleção e Modo ponto, e para cabeçalhos e rodapés que são exibidos com o registro.Para outros cenários sobre como explorar o FormView, consulte o seguinte:

Criando modelos para o controle FormView de Servidor Web

Modificando dados usando um controle FormView de servidor Web

Consulte também

Conceitos

Visão geral do controle do servidor da Web FormView

Referência

Visão geral do controle de servidor Web DetailsView