Ajax pode-se dizer que é uma revolução no conceito de aplicações pra web, essa tecnologia foi implementada nos anos 2000, e permite aperfeiçoar o trafico de dados entre um servidor web e um browser. Utiliza um protocolo XML HTTP para fazer uma comunicação assíncrona com o servidor, isso significa que, com o Ajax, apenas uma “porção” da tela será atualizada, somente o que desejar, sem a necessidade de atualizar toda a página quando quiser realizar uma ação. Com ele é possível criar aplicações muito mais leves e amigáveis, pois os PostBacks deixam de existir.

Quando se fala em Ajax, para facilitar o serviço, a Microsoft disponibiliza o ASP.NET AJAX Control Toolkit, que é composto por uma série de controles com recursos Ajax. Ao decorrer dos artigos postados neste blog, serão detalhados alguns destes controles. Neste artigo será explicado como instalar o ajaxControltoolKit, o que é e como utilizar os controles UpdatePanel e ModalPopUpExtender.

Para instalar o AjaxControlToolKit, você pode baixá-lo em http://ajaxcontroltoolkit.codeplex.com/ e siga os passos de instalação, ou simplesmente baixar os arquivos DLL clicando aqui , e colocá-lo na pasta BIN de seu projeto.
Colocando os arquivos na pasta BIN, após criar o projeto, na página em que irá utilizar o AJAX, deve-se informar que a mesma ela irá trabalhar com o Ajax Control Toolkit, portanto deve ser feita uma chamada do mesmo antes de abrir a tag HTML, veja:

Repare que, foi informado o valor “cc1” para a TegPrefix, portanto toda chamada de controles do Ajax Control Toolkit na pagina será feita através desta Tag.

Para trabalhar com o Ajax, deve-se inserir na página o ScriptManager, pois este é responsável por gerenciar os PostBacks que serão realizados e transformar em requisições XML HTTP. Dentro do form, insira:

Agora, serão detalhados alguns controles do AJAX Control Toolkit:

O controle UpdatePanel permite criar aplicações web onde seja possível atualizar apenas a área que está delimitada pelo componente, ou seja, pode-se atualizar parcialmente o site sem necessidade de carregar novamente a página usando um PostBack.

Não há limite de UpdatePanel que se pode usar em uma página, portanto, pode-se definir regiões específicas de uma página, que podem ser atualizadas sem realizar um Refresh por completo.

Abaixo serão citadas algumas propriedades mais usuais.

Será codificada uma área que atualizará uma informação em um determinado local do site. O Exemplo a ser mostrado, é simples e intuitivo, onde o usuário clicará em um botão, e a informações que ele digitar em um Textbox será adicionado em uma Label. O detalhe é que este estará dentro de um UpdatePanel, para que, o preenchimento da Label seja realizado sem o PostBack da página.

Para isso, crie um novo projeto, e no webform, adicione o ScriptManager, pois como foi dito no artigo “CascadingDropDown passo a Passo”, este é responsável por gerenciar os PostBacks que serão feitos na página e transformar em requisições XML HTTP. Adicione também 1 Label, 1 Textbox e 1 Button, veja abaixo o código:

Vá a modo “Design” em seu Visual Studio e dê duplo clique sobre o botão, para que este gere automaticamente o método onclick. Neste método realize a ação de adicionar o texto informado no Textbox na Label, da seguinte maneira:

lblValor.Text = txtValor.Text;

Simples, porém quando executar, perceba que ao clicar no botão, a página é atualizada por completo, para realizar o carregamento apenas do local desejado, sem que a página realize um PostBack, coloque os componentes que deseja atualizar dentro de um UpdatePanel, veja abaixo:

Executando o projeto pressionando o botão “Add”, observe o comportamento da página. Perceba que usando o UpdatePanel o as ações do botão não exigem que a página atualize por completo, tornando assim a interação com o usuário mais rápida e dinâmica.

Com o ModalPopUpExtender é permitido criar popups em aplicações AJAX, janelas “modais” que sobrepõe a outros controles, algo que não é possível fazer em aplicações web tradicionais, porém, utilizando-o é muito simples simular essas janelas popups através de Panel , e qualquer controle pode ser adicionado à este Panel, também é possível customizá-lo da forma desejada.

Algumas propriedades serão descritas abaixo:

Será criada uma página onde conterá um link, que quando clicado, irá abrir uma janela modal simples, onde conterá uma Label informativa e um botão de fechar. Exemplo criado simplesmente com objetivo de mostrar o funcionamento do ModalPopUpExtender.

Utilizando o mesmo projeto citado no exemplo acima, crie uma nova página, adicione o ScriptManager, coloque um Hyperlink na página com id “hlModal”, adicione um Panel, com id “pnlModal” (customize-o da maneira que achar melhor), dentro do Panel, adicione uma Label e um Button, com IDs “lblInfo” e “btnFechar” respectivamente, observe na Figura 1.

Próximo passo é fazer com que o “pnlModal” se torne uma janela popup , e apareça somente quando o usuário clicar sobre o Hyperlink “hlModal”, para isso basta adicionar o ModalPopupExtender na página, como mostra o código abaixo:

Perceba que, foram configuradas as seguintes propriedades: TargetControlID, DropShadow, OkControlID e PopupControlID, de acordo com cada componente que foi adicionado na página. Compile a aplicação e perceba que inicialmente o pnlModal está invisível, e que quando clica-se sobre o link “hlModal”, o Panel aparece como um popup.

Com o texto acima descrito, pode-se perceber que, utilizando à tecnologia AJAX, as páginas Web ficaram de certa forma mais eficientes, direta e objetiva. Cria-se aplicações mais leves e amigáveis, pois o usuário não precisa aguardar a página ser recarregada a cada requisição de dados com o servidor.