terça-feira, 10 de abril de 2012

Exibindo dados formatado em páginas da Web com o FormView Servidor Web de controle

Passo a passo: Exibindo dados formatado em páginas da Web com o FormView Servidor Web de controle

Visual Studio 2008
 

O ASP.NET fornece vários controles que permitem que você exibir e editar registros de dados. Neste passo a passo, você trabalhará com o FormView controle, que trabalha com um único registro de dados de cada vez. O FormView principal característica o controle é que ele permite que você criar o layout do registro se definindo modelos. Ao trabalhar com modelos, você pode ter controle total sobre o layout ea aparência dos dados dentro do controle. O FormView controle também suporta atualizações como editar, inserir e excluir registros de dados. Se o fonte de dados fornece mais de um registro para o FormView controle, o controle permite que você possa ver os registros individualmente.
NotaNota:
Você também pode editar registros de dados individuais com o DetailsView controle, que fornece um layout pré-definido para os dados. Para mais informações, consulte Web DetailsView Visão geral controle servidor .
Tarefas ilustradas nesta explicação passo a passo incluem:
  • Criar uma página para exibir mestre / detalhes.
  • Usando um FormView controle para criar um layout de forma livre para um registro de dados.
  • Configurando o FormView controle para permitir a edição.
Para completar este passo a passo, você vai precisar de:
  • Microsoft Visual Web Developer.
  • O acesso ao banco de dados SQL Server Northwind. Para obter informações sobre como baixar e instalar o SQL Server banco de dados exemplo Northwind, consulte instalando bancos de dados de exemplo no site da Microsoft SQL Server.
    NotaNota:
    Se precisar de informações sobre como fazer logon no computador que está executando SQL Server, contate o administrador do servidor.
  • Microsoft Data Access Components versão (MDAC) 2.7 ou posterior.
    Se você estiver usando o Microsoft Windows XP ou Windows Server 2003, você já tem MDAC 2.7. No entanto, se você estiver usando o Microsoft Windows 2000, você pode precisar atualizar o MDAC já instalado no seu computador. Para mais informações, consulte "Microsoft Data Access Componentes de Instalação (MDAC) "na MSDN Library .
Criar um novo site e página seguindo estas etapas.

Para criar um arquivo de site do sistema

  1. Abra o Visual Web Developer.
  2. No arquivo menu, clique em New , e clique em Web Site . Se você estiver usando Visual Web Developer Express, no arquivo menu, clique em New Web Site .
    O Novo Site da Web caixa de diálogo aparece.
  3. Sob Modelos Visual Studio instalado , clique em Web Site ASP.NET .
  4. No local , digite 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 Linguagem lista, clique na linguagem de programação que você prefere para trabalhar dentro
  6. Clique em OK .
    Visual Web Developer cria a pasta e uma nova página chamada Default.aspx.
Nesta parte do passo a passo, você adicionará uma lista suspensa para uma página e preenchê-lo com uma lista de nomes de produtos. Quando os usuários selecionam um produto, a página irá mostrar os detalhes para que o produto em um FormView controle.

Para criar e preencher uma lista drop-down

  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 que você pode trabalhar com neste passo a passo.
  2. Mude para o modo Design.
  3. Digite Information Display produto na página.
  4. A partir do padrão do grupo na caixa de ferramentas , arraste um DropDownList controle para a página.
  5. Se o DropDownList Tasks menu não aparecer, clique com o DropDownList controle, e clique em Mostrar marcas inteligentes .
  6. Na DropDownList Tasks menu, selecione o Habilitar AutoPostBack caixa de seleção.
  7. Clique Choose Data Source para abrir o Data Source Configuration Wizard .
  8. No Selecione uma fonte de dados lista, clique em <Nova Fonte de Dados .
  9. Clique banco de dados .
    Isso especifica que você deseja obter dados de um banco de dados que suporta instruções SQL.
    Na Especificar uma identificação para o fonte de dados caixa, um padrão de controle de origem de dados nome é 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 New Connection botão.
    O Add Connection caixa de diálogo aparece.
    • Se a fonte de dados lista não exibir o Microsoft SQL Server (SqlClient) , clique em Alterar , e no Change Data Source caixa de diálogo, selecione Microsoft SQL Server .
    • Se a Escolher fonte de dados página aparece, na fonte de dados lista, selecione o tipo de fonte de dados você vai usar. Para este passo a passo, o tipo de fonte de dados é o Microsoft SQL Server . No provedor de dados lista, clique em . NET Framework Data Provider para SQL Server e clique em Continuar .
  12. No Add Connection caixa de diálogo, faça o seguinte:
    1. No nome do servidor , digite o nome do computador executando o SQL Server.
    2. Para as credenciais de logon, selecione a opção que seja apropriada para acessar o funcionamento do banco de dados SQL Server (segurança integrada ou ID específico e senha) e, se necessário, digite um nome de usuário e senha. Selecione o Salvar minha senha caixa de seleção se você digitou uma senha.
    3. Selecione o Selecione ou digite um nome de banco de botão, e em seguida, digite Northwind .
    4. Clique Teste de conexão , e quando tiver certeza de que a conexão funciona, clique em OK .
    Você volta para o assistente, e as informações de conexão são preenchidas dentro
  13. Clique em Avançar .
  14. Certifique-se que o Sim, salvar esta conexão como caixa de seleção é selecionada, e clique em Avançar . (Você pode deixar o nome padrão da seqüência de conexão.)
    O assistente exibe uma página onde você pode especificar quais dados você deseja recuperar do banco de dados.
  15. Clique Especificar colunas de uma tabela ou exibição.
  16. No Nome lista, clique em Produtos .
  17. Sob Colunas , selecione ProductID e ProductName .
  18. Clique em Avançar .
  19. Clique em Teste de consulta para ter certeza de que você está recuperando os dados que deseja.
  20. Clique em Concluir .
    Você volta para o assistente.
  21. No Selecione um campo de dados para exibir no DropDownList lista, clique em ProductName .
  22. Desde o Selecione um campo de dados para o valor do DropDownList lista, selecione ProductID .
    Isso especifica que quando um item é selecionado, o campo ProductID será retornado como o valor do item.
  23. Clique em OK .
Antes de prosseguir, testar a lista drop-down.

Para testar a lista drop-down

  1. Pressione CTRL + F5 para executar a página.
  2. Quando a página é exibida, examine a lista drop-down.
  3. Escolha um nome de produto para ter certeza de que a lista executa um postback.
Agora você irá adicionar um FormView controle para exibir os detalhes do produto. O FormView controle obtém seus dados de um segundo controle da fonte de dados que você adicionar à página. O segundo controle da fonte de dados contém uma consulta parametrizada que recebe o registro do produto para o item selecionado no DropDownList controle.

Para adicionar um controle FormView

  1. A partir do dados do grupo na caixa de ferramentas , arraste um FormView controle para página.
  2. Se o FormView Tasks menu não aparecer, clique com o FormView controle, e clique em Mostrar marcas inteligentes .
  3. Na Tarefas FormView menu, na lista Choose Data Source , clique em <Nova Fonte de Dados .
    O Data Source Configuration Wizard caixa de diálogo aparece.
  4. Clique banco de dados .
    O FormView controle receberá dados da mesma tabela como o DropDownList controle.
    Na Especificar uma identificação para o fonte de dados caixa, um padrão de controle de origem de dados nome é exibido. Você pode deixar esse nome.
  5. Clique em OK .
    O Configurar fonte de dados assistente é iniciado.
  6. A partir da conexão de dados o aplicativo deve usar para se conectar ao banco de dados? lista, selecione a conexão que você criou e armazenou anteriormente na explicação passo a passo.
  7. Clique em Avançar .
    O assistente exibe uma página onde você pode criar uma instrução SQL.
  8. A partir do nome em lista Especificar colunas de uma tabela ou exibição , selecione Products .
  9. No Columns , selecione ProductID , ProductName , e UnitPrice .
  10. Clique no ONDE botão.
    A cláusula WHERE Adicionar caixa de diálogo é exibida.
  11. A partir da coluna lista, selecione ProductID .
  12. A partir do Operador , selecione = .
  13. A partir da Fonte , selecione Controle .
  14. De acordo com propriedades de parâmetro , na identificação de Controle , selecione DropDownList1 .
    As duas últimas etapas especificam que a consulta obterá o valor de pesquisa para a identificação do produto a partir do DropDownList controle que você adicionou anteriormente.
  15. Clique Adicionar .
  16. Clique em OK para fechar a Adicionar onde cláusula caixa de diálogo.
  17. Clique avançada .
    O Advanced SQL Generation Options caixa de diálogo aparece.
  18. Selecione o Gerar instruções INSERT, UPDATE e DELETE caixa de seleção.
    Esta opção faz com que o assistente para criar instruções SQL atualizadas com base na instrução Select que você configurou. Mais tarde, no passo a passo você usará o FormView controle para editar e inserir registros, o que requer instruções de atualização do controle de origem de dados.
  19. Clique em OK .
  20. Clique em Avançar .
  21. Na página de visualização, 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 , digite 4 e clique em OK .
    As informações do produto aparece.
  23. Clique em Concluir .
A razão para usar o FormView controle é que você pode definir o layout do registro que ele exibe. Nesta seção da explicação passo a passo, você irá personalizar o layout do registro, editando um modelo. Para o seu layout, você vai usar uma tabela HTML.

Para formatar o layout

  1. Clique no FormView controle para selecioná-lo e em seguida, arraste a alça de redimensionamento no lado direito do controle para fazer o controle da largura da página atual.
  2. Arraste a alça de redimensionamento na parte inferior do controle para alterar a altura do controle a cerca de 400 pixels. (A altura exacta não é importante.)
  3. Botão direito do mouse o controle, clique em Editar Modelo e clique em ItemTemplate .
    O controle é reexibido no modelo de item modo de edição. O modelo do 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 de item com um data-bound etiqueta de controle para cada coluna de dados na fonte de dados. Além disso, o Visual Web Developer gera texto estático para cada label atuar como uma legenda.
    O modelo também é gerado com três LinkButton controles com o texto Editar e Excluir , e novas .
  4. Colocar o ponto de inserção, na parte superior do modelo de item, pressione ENTER algumas vezes para dar lugar e, em seguida, na parte superior do modelo Detalhes do produto do tipo de actuar como um título.
  5. Coloque o cursor abaixo dos controles e texto estático, e, em seguida, na tabela de menu, clique em Inserir Tabela .
    Você está criando uma tabela HTML como um recipiente para o texto e controles.
  6. Na Inserir tabela caixa de diálogo, definir linhas a 4 e colunas a 2.
  7. Clique em OK para fechar o Inserir tabela caixa de diálogo.
  8. Selecione todas as células na tabela, e depois na tabela de menu, selecione Formatar Célula .
    O celular Propriedades caixa de diálogo é exibida.
  9. Definir Largura de 35 pixels (px) e altura de 30 pixels (px).
  10. Clique em OK para fechar o celular Propriedades caixa de diálogo.
  11. Arraste o ProductIdLabel controle na célula superior direita.
  12. Arraste o ProductNameLabel controle na célula da direita segundo.
  13. Arraste o UnitPriceLabel controle na célula da direita terceiro.
  14. Na coluna da esquerda, digite texto estático para atuar como legendas para as etiquetas controles. Por exemplo, na célula ao lado do ProductIdLabel controle, tipo ID. Você pode digitar qualquer texto da legenda que você gosta.
  15. Direito do mouse na coluna da esquerda, clique em Selecionar e clique em Coluna .
  16. Na janela Propriedades, defina alinhar a direita para fazer o texto da legenda alinhado à direita.
  17. Selecione a coluna da direita e arraste a borda da mão direita para fazer a tabela larga o suficiente para exibir nomes de produtos longos.
  18. Selecione o texto gerado pelo Visual Web Developer (por exemplo, o texto ProductID ) e excluí-lo.
  19. Botão direito do mouse o FormView barra de controle do título e clique em End Template Editing .
    O editor de modelo fecha eo controle aparece com o layout que você criou.

Teste o controle FormView

Agora você pode testar o seu layout.

Para testar o controle FormView

  1. Pressione CTRL + F5 para executar a página.
  2. No DropDownList controle, clique em um nome de produto.
    O FormView controle exibe detalhes sobre o produto.
  3. Selecione um produto diferente e confirmar que o FormView controle exibe os detalhes do produto.
  4. Feche o navegador.
O FormView controle pode exibir registros individuais e também suporta edição, exclusão e inserção.
Nesta parte do passo a passo, você irá adicionar a capacidade de editar o registro exibido no momento. Para editar o registro, você define um modelo diferente que contém caixas de texto (e potencialmente outros controles).

Para adicionar capacidade de edição para o controle FormView

  1. Botão direito do mouse o FormView controle, clique em Editar Modelo e clique em EditItemTemplate .
    O editor de modelo aparece, exibindo o EditItemTemplate propriedade, que define como os registros são definidos quando o controle está no modo de edição. Visual Web Developer preenche o modelo de edição com um TextBox controle para cada coluna de dados que não é uma chave e adiciona texto estático para legendas. Esta é semelhante à maneira como o item de modelo foi gerado, exceto que no modelo de edição, Visual Web Developer gera caixas de texto.
    Como antes, o modelo é gerado com Atualização e Cancelar LinkButton controles que são usados ​​para guardar e descartar as alterações durante a edição.
  2. Opcionalmente, adicione uma tabela de layout e organizar os controles como você fez quando se trabalha com o modelo do item anterior no passo a passo.
  3. Botão direito do mouse o FormView controle, clique em Editar Modelo e clique em InsertItemTemplate .
    Como com o EditItemTemplate propriedade, Visual Web Developer cria automaticamente um layout modelo de rótulos e TextBox controles. Os controles serão exibidos quando os usuários querem para inserir um novo registro na tabela Produtos. O modelo também é gerado com Inserir e Cancelar LinkButton controles.
  4. Opcionalmente, adicione uma tabela de layout e organizar os controles como você fez quando se trabalha com o modelo de item de edição.
  5. Botão direito do mouse o FormView controle e clique em End Template Editing .
    Nota de SegurançaObservação de segurança:
    A entrada do usuário em uma página da Web do ASP.NET pode incluir script de cliente possivelmente mal-intencionado. Por padrão, páginas Web ASP.NET validam a entrada do usuário para fazer a entrada certeza não incluem scripts ou elementos HTML. Contanto que essa validação esteja ativada, você não preciso explicitamente verificar script ou elementos HTML na entrada do usuário. Para 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 DropDownList controle.
    Os detalhes do produto aparecem no FormView controle.
  3. Clique em Editar .
    O FormView controle passa para o modo de edição.
  4. Faça uma alteração no nome do produto ou preço unitário.
  5. Clique Atualizar .
    O registro é salvo eo FormView controle passa para o modo de visualização. A mudança se reflete no visor.
  6. Selecione um produto diferente.
  7. Clique em Editar .
  8. Faça uma alteração no nome do produto.
  9. Clique Cancelar .
    Confirme que a alteração não foi salva.

Para testar as capacidades de inserção do controle FormView

  1. Clique Novo no FormView controle.
    O FormView controle passa para o modo de inserção, exibindo duas caixas de texto vazias.
  2. Digite um novo nome do produto e preço, e clique em Inserir .
    O registro é salvo no banco de dados eo FormView controle muda para exibir (ItemTemplate) vista.
    NotaNota:
    O novo registro não for exibido na lista drop-down. Você vai adicionar esse recurso na próxima seção.
Sua página agora permite-lhe visualizar, editar ou excluir registros na tabela de banco de Produtos. No entanto, a lista drop-down ainda não está sincronizada com as alterações que você fizer no FormView controle. Por exemplo, se você inserir um novo registro de produto , a lista drop-down não exibir o novo recorde a menos que você fechar a página e reabri-lo. Além disso, a página é exibida inicialmente com o primeiro registro na tabela Produtos, que pode não ser o que quiser.
Você pode adicionar algum código para corrigir esses pequenos problemas. Nesta seção da explicação passo a passo, você fará o seguinte:
  • Atualizar a lista drop-down sempre que os usuários editar ou inserir um registro.
  • Adicionar o texto "(Select)" na lista drop-down quando a página aparece pela primeira vez, e removê-lo quando o usuário fez a primeira seleção.

Para atualizar a lista drop-down quando registros são editados ou inseridos

  1. No modo Design da página, selecione o FormView controle.
  2. Na janela Propriedades, clique na Eventos botão para exibir uma lista de eventos para o FormView controle.
  3. Clique duas vezes no ItemInserted caixa.
    Visual Web Developer alterna para edição de código-view e cria um manipulador para o ItemInserted evento.
  4. Adicione o seguinte código realçado ao manipulador de eventos.
    Protegido  Sub FormView1_ItemInserted ( ByVal remetente como  objeto , _
        ByVal e Como 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 é executado após o novo registro foi inserido. Ele religa a lista drop-down para a tabela Produtos, que faz com que o conteúdo da lista a ser atualizada.
  5. Alternar para modo Design. (Se você está trabalhando com uma página code-behind, alterne para a página Default.aspx e alterne para modo Design.)
  6. Na janela Propriedades, clique na Eventos botão para exibir uma lista de eventos para o FormView controle.
  7. Clique duas vezes no ItemUpdated caixa.
    Visual Web Developer alterna para edição de código-view e cria um manipulador de eventos para o ItemUpdated evento.
  8. Adicione o seguinte código realçado.
    Protegido  Sub FormView1_ItemUpdated ( ByVal remetente como  objeto , _
        ByVal e Como System.Web.UI.WebControls.FormViewUpdatedEventArgs) _
        Handles FormView1.ItemUpdated
          DropDownList1.DataBind ()
    End  Sub
    

    [C #]
    protected void remetente (FormView1_ItemUpdated objeto, 
        FormViewUpdatedEventArgs e)
    {
        DropDownList1.DataBind ();
    }
    
    O código será executado após o registro foi atualizado. Ele religa a lista drop-down para a tabela Produtos, que faz com que o conteúdo da lista a ser atualizada.
  9. Pressione CTRL + F5 para executar a página.
  10. Edite o nome do produto de um registro, clique em Atualizar , em seguida, examinar a lista drop-down para ter certeza de que o nome atualizado é exibido.
  11. Inserir um novo registro de produto, clique em Inserir e, em seguida, examinar a lista drop-down para ter certeza de que o novo nome foi adicionado à lista.
O último passo é alterar a lista drop-down para exibir "(Select)" e para exibir o FormView controle somente quando os usuários fizeram uma seleção.

Para adicionar uma entrada de seleção para o controle DropDownList

  1. No modo Design, clique duas vezes em uma parte em branco da página.
    Visual Web Developer cria uma manipulador de eventos para a página da Load evento.
  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
        Se não IsPostBack Então End = False Se FormView1.Visible
    End Sub
    

    [C #]
    protected void Page_Load (object sender, EventArgs e)
    {
        if (! IsPostBack)
        {
            FormView1.Visible = false;
        }
    }
    
    O código é executado quando a página é executada. Ele testa primeiro para ver se este é um postback, se não, esta é a primeira vez que a página foi executado. Se não é um postback, o código esconde o FormView controle, porque você quer exibi-lo somente quando o usuário explicitamente selecionado um registro para ver ou editar.
  3. No modo Design da página, selecione o DropDownList controle.
  4. Na janela Propriedades, clique na reticências (...) no Itens caixa.
    A coleção ListItem Editor de caixa de diálogo aparece.
  5. Clique Adicionar para criar um novo item.
  6. Sob ListItem propriedades , no texto , digite (Select).
  7. Clique em OK para fechar a ListItem Collection Editor caixa de diálogo.
  8. Na caixa de Propriedades, defina AppendDataBoundItems a verdade .
    Quando a lista drop-down é preenchida durante a ligação de dados, informações sobre o produto será adicionado ao (Select) item definido.
  9. Na janela Propriedades, clique na Eventos botão para exibir uma lista de eventos para o DropDownList controle.
  10. Clique duas vezes no SelectedIndexChanged caixa.
  11. Adicione o seguinte código realçado.
    [Visual Basic]
    Protegido remetente DropDownList1_SelectedIndexChanged (Sub ByVal _
        As Object, ByVal e As System.EventArgs) _
        Manipula DropDownList1.SelectedIndexChanged
            Se DropDownList1.Items (0) Texto. = "(Select)" Então Fim (0) DropDownList1.Items.RemoveAt Se FormView1.Visible = True
    End Sub
    

    [C #]
    protected void remetente (DropDownList1_SelectedIndexChanged objeto, 
        EventArgs e)
    {
        if (DropDownList1.Items [0] == Texto "(Select)".) {DropDownList1.Items.RemoveAt (0);} FormView1.Visible = true;
    }
    
    O código é executado quando os usuários selecionar um item no DropDownList controle. Ele remove o "(Select)" item que você adicionou anteriormente (verificar primeiro, para ter certeza de que existe), porque depois que os usuários de primeira vez de selecionar um item, você não necessidade de levá-los para selecionar um item. O código também exibe (un-esconde) o FormView controle que os usuários possam ver o registro que eles escolheram.
  12. Pressione CTRL + F5 para executar a página.
    A página exibe somente a lista de drop-down, com a palavra (Select) exibida.
  13. Selecione um item na lista.
    O item é exibido no FormView controle.
  14. Examine a lista drop-down e note que a palavra (Select) não está mais na lista.
Este passo a passo mostrou as etapas básicas para usar um FormView controle para exibir e editar registros de dados individuais usando um layout personalizado. O FormView controle permite que você execute a formatação mais sofisticada do que o que você fez neste passo a passo. Além disso, você pode criar . modelos para os outros modos, incluindo modo de seleção e modo de inserção, e para cabeçalhos e rodapés que são exibidos com o registro Para outros cenários para explorar com o FormView , consulte o seguinte: