Primeiros passos com Ajax Control Toolkit

Sobre o Ajax

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 esta em constante aperfeiçoamento e difusão. Pessoalmente escutei falar a primeira vez, através do Atlas em 2005 e acompanhei o seu crescimento e aperfeiçoamento. 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 a 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ó criarmos o nosso projeto utilizando os recursos do Ajax Control Toolkit, como este artigo é sobre os primeiros passo. Vou utilizar dois pequenos exemplos com componentes distintos, primeiro 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

Com a instalação do Ajax Control Toolkit ele adiciona extensão para alguns componentes padrões do .net. Para entender melhor vou mostrar 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 esta 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 e vamos ter uma tela com diversas opções estendidas para esse 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á diversas tags. Vou comentar de mais 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.

Web site: www.crespi.pro.br

email: rodrigo@crespi.pro.br