Desenvolvimento - ASP. NET
ASP.NET: Como usar Ajax em duas listbox hierárquicas
Neste tutorial o autor procura mostrar como é fácil o uso do Ajax no ASP.NET 2.0.
por Raphaël DésalbresA versão final do Microsoft Ajax (que antes chamava-se "Atlas") sairá em janeiro de 2007, mas você pode usar tranquilamente o último CTP disponível em http://go.microsoft.com/fwlink/?LinkID=77296
Como não haverá muitas diferenças entre este CTP e a versão final, você pode adotá-la nos seus projetos, depois será necessário somente atualizar algumas DLLs.
Para este tutorial são necessários os seguintes softwares:
1) Windows 2000 / XP Home ou Pro / 2003 / Vista
2) Visual Studio Express 2005 ou superior
3) Banco de dados SQL Server 2000 ou 2005 ou Access
Note que neste tutorial as todas as ferramentas utilizadas podem ser obtidas gratuitamente (Visual Studio Express 2005, SQL Server Express 2005)
Este tutorial é dedicado aos usuários iniciantes, pois explicarei passo-a-passo todos os procedimentos necessários para chegar ao resultado. Se você for um usuário experiente, a moral da história é: sempre que você for trabalhar com Gridview ou DropDownList, ListBox ou semelhantes, use o UpdatePanel como host para seus controles. Você pode ainda baixar o código de exemplo aqui (você precisa instalar o código em C:\AjaxTest, ou então alterar o caminho do arquivo AjaxTest.sln).
Após ter instalado o Microsoft Ajax, basta você criar um novo site web "ASP.NET Ajax-Enabled Web Site" como mostra a figura abaixo.
Aqui no caso escolhemos o C#, mas na verdade tanto faz, já que para este exemplo não vamos digitar uma linha de código sequer.
Dê um clique sobre o modo "design" da página, deverá ver o seguinte:
Usaremos o Banco de dados da Microsoft Northwind, que pode ser baixado do site da Microsoft. As duas tabelas que nos importam estão abaixo. Categories, que é a tabela pai, que será representada por um listbox, e Products, representada por outro listbox. Ou seja, quando um usuário clicar sobre o listbox de categorias, automaticamente será populado um segundo listbox de produtos pertencentes à aquela categoria. Eis o "esquema" do banco de dados.
Agora faremos algo interessante, primeiro sem Ajax, e depois com Ajax, para ver a diferença. Na versão final colocarei os 2 exemplos lado a lado, para melhor ilustrar as diferenças...
Primeiro adicionaremos um controle listbox (ou dropdownlist, tanto faz)
Após isso deveremos configurar a nossa fonte de dados. Como? Dando um clique na setinha do datasource, e clicar em configure Data Source.
A seguir será apresentada a seguinte opção:
Selecione "Choose Data Source"
New Data Source...
Selecione Database, e chame a nossa data source de "dtsCategories"
Em seguida selecione "New Connection"
Aparecerá uma tela parecida com esta:
Clique em "Change", já que queremos um banco de dados SQL Server
Selecione então Microsoft SQL Server
Selecione a seguir o nome do servidor (dica: coloque "." para servidor local), e escolha o Banco de Dados Northwind.
Temos então nossa conexão. Agora é só clicar em Next.
Next
Agora selecionaremos a tabela Categories, selecionando os campos "CategoryID" e "CategoryName" que são os campos que nos interessam. Next.
Nesta etapa poderemos testar a nossa query. Finalmente selecionemos "Finish"
Uma vez que o nosso datasource está configurado, basta adicionarmos uma listbox na nossa página default, que chamaremos de "lstCategories"
A seguir atribuiremos a fonte de dados que fizemos anteriormente para o nosso controle, clicando na setinha do listbox.
Então colocamos como "CategoryName" o valor a ser exibido, sendo "CategoryID" o valor do listbox.
A arrastemos uma segunda listbox para o formulário, "ListBox2", que pode ser renomeada para "lstProducts" Clique novamente na setinha do controle "lstProducts", e em "choose data source", coloque "dtsProducts"
A seguir você não precisa mais incluir a connection string já que ela está salva...
Agora preste atenção: você precisa digitar uma query SQL com um parâmetro proveniente da listbox categorias, e para isso você precisa seguir os seguinte passos.
Escolha esta opção:
O Visual Studio é inteligente o suficiente para determinar quando você digita um parâmetro com arroba "@" ele pedirá no assistente a origem deste parâmetro, que no nosso caso é o ID da categoria que vem do listbox lstCategorias.
Selecione next
Agora a sua página deve ficar como acima.
Só resta um detalhe para a nossa página funcionar. Definir a propriedade "autopostback" do controle de categorias como verdadeiro. É que na verdade o controle precisa ser refrescado no servidor para podermos atualizar os produtos. Agora teste a página, e perceberá que a página leva algum tempo para ser refrescada quando você clica em uma categoria. Com Ajax isto mudará. Agora a pergunta, como faremos para implementar Ajax nesta página. A resposta é: colocar um UpdatePanel. O UpdatePanel é um componente que vem na Toolbox quando você instala o Microsoft Ajax. Portanto é só arrastá-lo para a página, e colocar nossos controles dentro dele. Dica: para você fazer isso com o mínimo de esforço, selecione ambas as listbox com o mouse (apertando shift+clique), depois pressione <CTRL>+X e depois mova o cursor para dentro do UpdatePanel, pressionando em seguida <CTRL>+V.
Ao darmos um F5 para executar nosso projeto, percebemos que ao clicarmos o listbox de categorias, a combo de produtos é populada SEM dar refresh.
Notamos na figura abaixo que não foi necessária sequer uma linha de programação para o nosso exemplo, pois tudo o que fizemos está no código HTML da página. Se você for curioso pode dar uma espiada lá. E como o código é executado no servidor, estas tags irão desaparecer quando o código for executado.
Estas ferramentas visuais do Visual Studio poupam muito tempo do desenvolvedor, isto é o que faz a diferença!
Conclusão: Já implementei Ajax na mão em um site, só que para isso você precisa programar em JavaScript, fazer uma requisição XMLHTTP dentro do script, o que não é fácil, e precisa escrever arquivos de handler (.ASHX). Com Ajax isto acabou.
