Ajax é o acrônimo (em língua inglesa) de Asynchronous Javascript and XML. De forma bem resumida, é a utilização sistêmica de três tecnologias: Javascript, XML e XmlHttpRequest, utilizando solicitações assíncronas de informações. Isso permite tornar as páginas mais dinâmicas, interativas e interessantes ao usuário.

Isso tudo não é algo novo, mas algo que está em constante aperfeiçoamento e difusão. Pessoalmente escutei falar a primeira vez através do Atlas, em 2005, e acompanhei o seu crescimento desde então. E hoje em dia temos facilidades para instalar pacotes prontos de componentes para nossas aplicações web.

Este artigo tem por finalidade introduzir o leitor aos primeiros e mais básicos passos para utilizarmos os recursos do Ajax Control Toolkit nos aplicativos ASP.NET.

Como instalar o Ajax Control Toolkit

Primeiramente vamos ter que fazer o download do pacote de instalação do Ajax Control Toolkit no web site asp.net. No momento que estou escrevendo este artigo, o link para download se encontra no menu Downloads, na opção ASP.NET AJAX Control Toolkit.

Ilustração 1 – Site asp.net

Esta opção nos direcionará para o link do CodePlex. Na sessão de arquivos, vamos fazer download do arquivo AjaxControlToolkit-Framework3.5.zip. Este pacote é a release completa do código fonte para todos os controles. Após clicar no link do download, aparecerá a tela de licença do contrato. Claro que você deverá ler e, se concordar, aceitar.

Ilustração 2 – Escolhendo o item de download

Salvaremos o arquivo .zip em algum diretório apropriado para downloads. Neste artigo vou criar um subdiretório chamado “Ajax Control Toolkit” dentro do diretório Program Files, para extrair o nosso pacote.

O assemblie que será adicionado ao Visual Studio se encontra dentro do diretório Binaries. Porém, como faremos aplicações em português, vamos primeiramente adicionar o template do idioma ao diretório do nosso assemblie. Para isso, vamos copiar o diretório “pt” e os arquivos AjaxControlToolkit.dll e AjaxControlToolkit.pdb que estão em “Ajax Control Toolkit\SampleWebSite\Bin\” para o diretório binaries.

Adicionando o Toolkit ao Visual Studio 2008

Agora sim, efetivamente, iremos adicionar o Ajax Control Toolkit ao Visual Studio 2008 e isso irá fazer aparecer novos controles a toolbox do Visual Studio.

Ao abrir o Visual Studio criaremos um novo web site, conforme os passos indicados na imagem abaixo.

Ilustração 3 – Criando um novo projeto

Na Toolbox criaremos uma nova guia, chamada Ajax Control Toolkit e adicionaremos ao assemblie que instalamos anteriormente.

Ilustração 4 – Adicionando uma guia na ToolBox

O próximo passo será adicionar os componentes à nossa guia. Para isso basta clicar com o botão direito e selecionar a opção Choose Items.

Ilustração 5 – Escolhendo os itens

Na tela de seleção de componentes, vamos manter a guia default .NET Framework Components, como demonstra a imagem abaixo:

Ilustração 6 – Escolhendo itens

O próximo passo será clicar em Browse e selecionar o assembly AjaxControlToolkit.dll, que se localiza no diretório Binaries da nossa instalação. Esta seleção irá exibir os novos itens de componentes que serão selecionados na caixa.

Ilustração 7 – Selecionando o assembly

Ilustração 8 – Verificando a seleção

O resultado desta confirmação será percebido na guia que criamos anteriormente na nossa Toolbox. Aparecerá diversos componentes novos.

Ilustração 9 – Novos compoentes na ToolBox

Agora é só criar o nosso projeto utilizando os recursos do Ajax Control Toolkit. Como este artigo é sobre os primeiros passos, vou utilizar dois pequenos exemplos com componentes distintos. Inicialmente será o uso do botão (componente padrão do visual Studio) e outro será um objeto de calendário. Vamos aos exemplos!

A extensão do botão

A instalação do Ajax Control Toolkit adiciona a extensão para alguns componentes padrões do .net. Para entender melhor, vou demonstrar como adicionar um botão ao nosso web form e executar um confirm (comando Javascript que exibe uma tela de confirmação) sem escrever uma única linha em javascript.

Para o Ajax funcionar, precisamos adicionar um componente chamado ScriptManager, que está na guia AJAX Extensions. Basta arrastar para o nosso design do form.

Ilustração 10 – ScriptManager

No web form, adicione um botão e perceba que quando selecionamos esse botão, aparecerá uma nova opção de propriedades estendida no seu canto superior direito.

Ilustração 11 – Propriedades estendidas

Selecionando a opção Add Extender, vamos ter uma tela com diversas opções estendidas para este objeto. Vamos selecionar a funcionalidade ConfirmButtonExtender.

Ilustração 12 – Selecionando a nova funcionalidade

Agora, na tela de codificação do nosso HTML, observe o código que foi gerado.

Ilustração 13 – Verificando o código padrão

É fácil perceber que, abaixo da declaração do Button Control, existe uma nova extensão de códigos. Vamos codificar para que, ao clicar no botão, exiba uma caixa de confirmação. Acompanhe o código abaixo.

Ilustração 14 – Exitando a mensagem de confirmação

Executando a aplicação, veremos que somente com esses dois passos teremos uma caixa de confirmação e não precisamos escrever nenhuma linha de código em javascript. E assim, concluímos o primeiro exemplo.

Ilustração 15 – Executando a aplicação

Utilizando o CalendarExtender

Incluiremos um TextBox Control ao Web Form e, quando clicarmos neste objeto, ele irá abrir um calendário para selecionarmos a data.

Vamos começar adicionando o TextBox Control ao formulário em modo design, e em modo de edição do HTML adicionaremos um CalendarExtender do Ajax Toolkit Control.

Para começar a codificação, vamos editar a tag TargetControlID. Esta tag indica qual o ID do controle que receberá o valor do CalendarExtender. Defina o valor para o TextBox Control conforme as imagens abaixo.

Quando utilizamos o ListMembers do CalendarExtender, aparecerão diversas tags. Vou destacar uma que é de extrema utilidade para o nosso aplicativo: a tag format, que definirá o formato do retorno.

Veja o código abaixo.

Chegou a hora de verificar o resultado final, executando o nosso aplicativo.

Conclusão

Creio que, depois desses exemplos, não preciso falar muito.

Neste artigo expliquei como instalar e dar as primeiras “engatinhadas” com o Ajax ToolKit Control. Utilizei dois exemplos práticos para demonstrar o ganho de tempo no desenvolvimento com esse pacote.

Afinal, para fazer algumas tarefas que exigiriam tempo de codificação JavaScript, foi feito praticamente só arrastando componentes.

Claro que com Ajax podemos criar funcionalidades poderosas como o DragAndDrop, etc, mas essas implementações ficarão para um próximo artigo!