Passo-a-passo: Exibindo uma Lista Suspensa Durante a Edição no Controle GridView do Servidor Web

O GridView o Controlarar exibe caixas de texto para edição por padrão.Você pode usar o ASP.NET GridView Controle do interno Avançado a funcionalidade para adicionar um drop-Para Baixo Lista a exibição de edição.Isso pode ser feito em um formulário da Web sem ter que Gravar qualquer código por trás do formulário.Tarefas ilustradas nesta explicação passo a passo incluem o seguinte:

• Configurando um GridView Controle para exibir dados SQL.

• Exibindo dados de GridView o controle.

• Exibindo um drop-down list durante a edição na GridView o controle.

Pré-requisitos

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

• Visual Web Developer Microsoft (Visual Studio).

• SQL Server Express Edition.Se você possui o SQL Server instalado, você pode usá-lo, mas deve fazer pequenos ajustes em alguns procedimentos.

• A amostra Northwind Banco de Dados instalado no seu computador.Para obter informações sobre como a Baixar e instalação do SQL Servidor banco de dados de exemplo Northwind, consulte Instalar bancos de dados de exemplo No site da Microsoft SQL Server.

  Observação:
  T aqui são muitos métodos alternativos que você pode usar para se conectar ao 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 site do sistema de arquivos

1. Abra o Visual Web Developer.

2. Sobre o File Menu, clique em Novoe em seguida, clique em Site.Se você estiver usando Visual Web Developer ExPressionar, na 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 Caixa de seleção Sistema de arquivose digite o nome da pasta w aqui você deseja manter as páginas do seu site da Web.

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

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.

Criando uma Conexão para uma fonte de dados SQL

Para Iniciar, você deve criar uma conexão com o banco de dados Northwind.

Para criar uma conexão com o Servidor SQL

1. Em Gerenciador de Servidores, clique com o botão direito do mouse Conexões de dadose em seguida, clique em Adicionar conexão.Se você estiver usando o Visual Web Developer Express, use o Database Explorer.

   O Adicionar conexão caixa de diálogo é exibida.

   • Se a Fonte de Dados Lista não é exibida **Arquivo de Banco de Dados Microsoft SQL Server (SqlClient)**Clique em Alterare na Alterar fonte de dados caixa de diálogo, selecione Arquivo de Banco de Dados Microsoft SQL Server (SqlClient).

   • Se a Escolher fonte de dados página for exibida, in a Fonte de Dados lista, Selecionar o tipo de fonte de dados que você usará.Para este exame Através, fonte de dados o tipo é Microsoft SQL Server.Na O provedor de dados lista, clique em Provedor de Dados .Net Framework para SQL Servere em seguida, clique em Continue.

   Observação:
   Se a Server Explorer guia não estiver visível no Visual Web Developer, in a View Menu, clique em Server Explorer.Se a Banco de Dados Do Explorer Guia não é visível, no View Menu, clique em Banco de Dados Do Explorer.

2. Na Nome do arquivo de banco de dados Campo, digite ou navegue até o local onde você instalado o banco de dados de exemplo Northwind.

3. Selecionar o arquivo de banco de dados Northwnd.mdf e clique em Abrir.

4. Selecione o Salvar minha senha caixa de seleção.

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

   O Novo conexão tenha sido criado em Conexões de dados Em Gerenciador de Servidores.

Configurando um Controle GridView para Exibir Dados do Banco de Dados

Nesta parte da explicação passo a passo, você preenche dinamicamente a grade com dados.

Para ativar a classificação simples

1. Alterne para ou abra o arquivo Default.aspx

2. Alternar para modo Design.

3. Na Toolboxa partir de Dados Agrupar, arraste um GridView controlar até a página.

4. Sobre o Tarefas GridExibir Menu, in a ChooseData Source caixa, clique em < novo Origem de dados >.

   O Configuração de fonte de dados assistente é exibido.

5. Clique em Banco de dados.

   Isso especifica que você deseja obter dados de um banco de dados que suporta instruções SQL, que inclui o SQL Server e outros banco de dados OLE-DB compatíveis.

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

7. Clique em OK.

   O Configurar fonte de dados assistente é exibido.

8. Na Que conexão de dados o aplicativo deve usar para se conectar ao banco de dados? caixa, insira a conexão que você Criado em "para criar uma conexão SQL Server," e em seguida, clique em Next.

   O assistente exibe uma página em que você pode escolher armazenar a string de conexão em um arquivo de configuração.Armazenar a seqüê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 seqüência de conexão em várias páginas

9. Selecione o Sim, salvar esta conexão como Caixa de seleção e em seguida, clique em Next.

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

10. Em Especificar colunas de uma tabela ou modo de exibiçãoin a Name (Nome) caixa, clique em Os funcionários.

11. Em ColunasSelecionar o EmployeeId,Sobrenome, Nome, HireDatee Cidade Marcar caixas.

    O assistente exibe a instrução SQL que você está criando em uma caixa na parte inferior da página.

    Observação:
    O assistente permite que você especifique o critério de seleção (cláusulas WHERE) e outras opções de consulta SQL.Para esta explicação passo a passo, você criará uma instrução simples sem opções de seleção ou classificação.

12. Clique em AvançadoSelecionar o Gerar instruções INSERT, UPDATE e DELETE Caixa de seleção e em seguida, clique em OK.

    Isso gera inserir, Atualizar e excluir instruções para a SqlDataSource1 controle que é baseado na instrução SELECT que você configurou anteriormente.

    Observação:
    Como alternativa, você pode criar manualmente as instruções, selecionando Especifique um personalizado Instrução SQL ou procedimento armazenado e inserir consultas SQL.

13. Clique em Next.

14. Clique em Teste de consulta Para certificar-se que você estiver recuperando os dados que você deseja.

15. Clique em Finish.

16. Clique com o botão direito do mouse o GridView Controle e selecione Mostrar marcas inteligentes.A partir de Tarefas GridExibir menu, selecione o Habilitar edição a caixa.

Agora você pode testar a página.

Para testar a página

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

   O GridView o controle é exibido com EmployeeId,Sobrenome, Nome, HireDatee Cidade Colunas.

2. Clique na Editar link Avançar em uma linha.

   A linha Selecionado para edição é exibida com Sobrenome, Nome, HireDatee Cidade colunas como um editável Caixa de Texto.EmployeeId não é exibido em um caixa de texto, porque é um campo de chave e não EDI Tabela.

3. Alterar um campo como Sobrenome e clique em Update.

   O GridView o controle é exibido com EmployeeId,Sobrenome, Nome, HireDatee Cidade colunas, com Sobrenome Atualizado com o novo valor.

4. Feche o navegador.

Exibindo uma Lista Suspensa Durante a Edição no Controle GridView

Nesta parte da explicação passo a passo, você pode adicionar uma lista suspensa para selecionar enquanto edita as linhas da grid.

Para exibir uma lista suspensa durante a edição

1. A partir de Dados Nó da ToolboxArraste um SqlDataSource controlar até a página.

   Um novo controle da Origem de dados chamado SqlDataSource2 é criado.

2. Na Tarefas SqlDataSource menu, selecione Configure fonte de dados.

3. Na Que conexão de dados o aplicativo deve usar para se conectar ao banco de dados? caixa, insira a conexão que você Criado anteriormente.

4. Clique em Next.

5. Sobre o Configurar a Instrução Select Página, selecione Especificar colunas de uma tabela ou modo de exibiçãoe em seguida, na Name (Nome) caixa, clique em Os funcionários.

6. Selecione apenas a Cidade Coluna e, em seguida, selecione o Retornar apenas Exclusivo linhas caixa de seleção.Clique em Next.

7. Clique em Teste de consulta Para visualizar os dados e em seguida, clique em. Finish.

8. Clique com o botão direito do mouse o GridView Controle e selecione Mostrar marcas inteligentes.Na Tarefas GridExibir menu, selecione Editar colunas.

9. Na Campos caixa de diálogo, selecione Cidade a partir de Os campos selecionados Lista.

10. Clique em Converter este campo em um TemplateField Link.

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

12. Clique com o botão direito do mouse o GridView Controle e selecione Mostrar marcas inteligentes.Na Tarefas GridExibir menu, selecione Editar Modelos.

13. Select EditItemTemplate Na Exibir drop-down list.

14. Clique com o botão direito do mouse padrão TextBox Controlar no modelo e selecione Delete Para Remover-la.

15. A partir de Padrão Guia das ToolboxArraste um DropDownList (lista suspensa) Controlar até o modelo.

16. Clique com o botão direito do mouse o DropDownList (lista suspensa) Controle e selecione Mostrar marcas inteligentes.Na DropDownLista tarefas menu, selecione ChooseData Source.

17. Select SqlDataSource2.

18. Clique em OK.

19. Na DropDownLista tarefas menu, selecione Editar DataBindings.O SelectedValue Propriedade das DropDownList controle esteja selecionado na DataBindings caixa de diálogo.

20. Clique na Campo de vinculação Rádio botão e selecione Cidade Para Ligado para.

21. Selecione o Ligação de dados bidirecional caixa de seleção.

22. Clique em OK.

23. Clique com o botão direito do mouse o GridView Controle e selecione Mostrar marcas inteligentes.Na Tarefas GridExibir Menu, clique em End Modelo 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.Enquanto essa validação estiver Habilitado, não é necessário que verificar explicitamente script ou elementos HTML de entrada do usuário.Para obter mais informações, consulte Visão Geral de Scripts Maliciosos.

Agora você pode testar a página.

Para testar a página

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

   O GridView o controle é exibido com EmployeeId,Sobrenome, Nome, HireDatee Cidade Colunas.

2. Clique na Editar link Avançar em uma linha.

   O atual Cidade Valor é pré-selecionado na drop-down list.

   Selecione um diferente Cidade Valor a partir de drop-down list e clique em Update.

   O Cidade Campo é atualizado usando o valor selecionado na lista suspensa.

Próximas etapas

Embora este exame Através mostra como exibir um drop-down list preenchida com valores da mesma coluna como a um limite para o controle, há muitos métodos alternativos para preencher um drop-down list.Consulte o exemplo para DataItem Para ver como preencher um drop-down list com valores de uma tabela diferente.

Consulte também

Tarefas

Explicação passo a passo: Acesso básico a dados em páginas da Web

Como Para: Proteger seqüências de caracteres de conexão quando usando controles de Origem de dados

Referência

Visão Geral sobre o Controle do Servidor Web GridView

DataItem