quarta-feira, 29 de dezembro de 2010

ASP.NET - DropDownList

Vamos agora mostrar como sincronizar dois controles DropDownList : Um controle irá exibir os nomes dos produtos da tabela produto e o outro controle irá exibir os produtos relacionados na tabela Detalhes do Pedido.
Com ASP .NET 2.0 ficou muito simples sincronizar dois ou mais controles dropdownlist.
Vamos ao um exemplo clássico : Em uma página ASP .NET eu desejo exibir os estados do Brasil em um DropDownList e quando conforme a seleção do usuário o segundo DropDownList será preenchido com as cidades daquele estado.
Eu vou usar um banco de dados chamado Teste.mdb e duas tabelas : uma contendo o codigoEstado , nomeEstado e siglaEstado para os estados e outra contendo o codigoCidade , codigoEstado, nomeCidade para os municípios:

Como vamos usar um banco de dados devemos criar uma conexão com o banco de dados Teste.mdb ou copiar o arquivo para a pasta App_Code.
Você pode usar o Visual Web Developer 2005 ou 2008 para acompanhar o exemplo a seguir.
Abra o Visual Web Developer e crie um novo web site chamado sincddl usando a linguagem VB;
A seguir no formulário padrão Default.aspx inclua os dois controles DropDownList com name igual a ddl1 e ddl2;
Selecione o primeiro dropdownlist e em DropDownList Tasks marque Enable AutoPostBack e clique em Choose Data Source...
A seguir em Choose Data Source selecione <New data source...> e clique em OK;
Na próxima janela do assistente marque a opção Access DataBase pois vamos trabalhar com uma tabela Access , mas poderíamos trabalhar com SQL Server, LINQ, Object,  XML , etc. Informe o nome dsTeste e clique em OK;
Na janela Configure Data Source clique no botão Browse e selecione o banco de dados Teste.mdb na pasta App_data;

A seguir selecione a tabela Estados e marque os campos codEstado e nomeEstado;

Importante !!! Selecione o campo nomeEstado para ser exibido no dropdownlist e o campo codEstado como sendo o valor do dropdownlist usado na seleção;

Com isso já teremos a exibição dos estados na primeira dropdownlist - ddl1.
O que desejamos fazer é preencher a segunda dropdownlist de acordo com a seleção feita na primeira.
Selecione o segundo dropdownlist e repita os mesmos passos efetuados para o primeiro:
Em DropDownList Tasks e clique em Choose Data Source.../
A seguir em Choose Data Source selecione <New data source...> e clique em OK;
- Na próxima janela do assistente marque a opção Access DataBase.  Informe o nome dsTeste2 e clique em OK;
- Na janela Configure Data Source clique no botão Browse e selecione o banco de dados Teste.mdb na pasta App_data;
- A seguir selecione a tabela Municipios e marque todos os campos; ( Agora preste atenção ...)
- Clique no botão WHERE para montar uma condição de exibição de dados para o controle;
Na janela add WHERE Clause selecione o campo para o qual deseja criar a condição , no nosso caso o campo codEstado;
Em seguida selecione de onde deverá sair o parâmetro para estipular a condição. No nosso caso o parâmetro virá do primeiro controle dropdownlist - ddl1;
Em seguida clique no botão Add e em OK;
Veja a consulta SQL criada contendo a cláusula Where indicando que será selecionado os campos da tabela Municipios onde o codEstado for igual ao valor selecionado no primeiro dropdownlist;
Na última janela do assistente selecione para exibir o nome do município e o campo codMunicipio para ser o valor do dropdownlist;
Pronto.
Podemos executar a página e iremos verificar que conforme a seleção do primeiro controle dropdownlist o segundo será preenchido automaticamente;


Sem comentários:

Enviar um comentário