ASP.NET  2.0 - Usando o ASP.NET AJAX

AJAX - é um acrônimo para Asynchronous JavaScript and XML  e é constituído por um conjunto de tecnologias como JavaScript, HTML, CSS, DHTML e DOM.

A tecnologia AJAX é uma avanço na tentativa de se construir uma ponte entre a funcionalidade e a interatividade de uma aplicação Desktop e uma aplicação Web. A idéia é permitir a criação de uma interface e de controles em uma aplicação web com os mesmos recursos encontrados nas aplicações dekstop. (esta síndrome também é conhecida como:  saudades (ou inveja) do desktop... )

Obs: Na verdade AJAX não é uma linguagem de programação , nem um Framework, nem um padrão. É apenas um conceito lançado inicialmente por Jesse James Garret ( que nome hein...) no artigo - Ajax: A New Approach to Web Applications em 18 de fevereiro de 2005.

O novo framework Microsoft ASP.NET AJAX incorpora a tecnologia Ajax de desenvolvimento para web sendo uma evolução da tecnologia ATLAS que eu tive a oportunidade de abordar nos seguintes artigos:

Nota: Existem outros frameworks que incorporam a tecnologia AJAX. Dentre os que são grátis os mais conhecidos para a plataforma .NET são:

Vejam também neste sítio : http://www.daniel-zeiss.de/AJAXComparison/Results.htm  um comparativo entre diversos Frameworks AJAX.

Se já era bom então agora ficou melhor ainda: mais recursos, maior facilidade de utilização e etc.

Nesta versão do ASP.NET AJAX, basta você arrastar e soltar alguns controles ASP.NET AJAX no seu formulário web , como qualquer controle ASP.NET, para ter os recursos da tecnologia AJAX sem precisar conhecer nada de JavaScript, DHTML, etc. (Isso é realmente o tchan do framework...)

As tecnologias básicas que sustentam o ASP.NET AJAX , além é claro do .NET Framework 2.0, são:

A seguir temos uma figura comparando o modelo tradicional para aplicações web com o modelo AJax :

fonte : http://www.adaptivepath.com/publications/essays/archives/000385.php

Para você poder usar todos estes recursos vai precisar ter instalado o seguintes aplicativos:

A primeira coisa a fazer é efetuar o download dos pacotes acima no endereço http://ajax.asp.net/ e instalar, sendo que, o Ajax Control ToolKit deverá ser descompactado em uma pasta para depois ser habilitado como veremos a seguir.

Instalar o ASP.NET AJAX é simples: Faça o download e clique no pacote de instalação seguindo as orientações.

Tendo instalado o ASP.NET AJAX (ASPAJXExtSetup.msi) se você abrir o VWD e criar um novo projeto irá perceber uma nova aba na ToolBox chamada AJAX Extensions contendo alguns novos controles.(Se você não encontrar esta aba é por que não possui o componente instalado ou ocorreu algum problema durante a instalação.)

 

Instalando o Ajax Control ToolKit

1- Vamos agora instalar a biblioteca do Ajax Control ToolKit, para isso clique com o botão direito do mouse sobre a aba ToolBox e clique com o botão direito do mouse selecionando a opção Add Tab

2- A seguir informe o nome Ajax ControlToolKit para esta aba;

3- A seguir clique com o botão direito do mouse sobre a aba criada e selecione a opção Choose Itens;

4- Na janela Choose ToolBox Itens clique no botão Browse e procure pela pasta onde você descompactou o arquivo Ajax Control Toolkit.;

5- Você deverá ver uma pasta chamada SampleWebSite, e sob esta pasta outra pasta chamada Bin. Abra a pasta Bin;

6- No interior da pasta Bin selecione o arquivo AjaxControlToolkit.dll e clique no botão Open e a seguir voltando a janela anterior clique em OK;

7- Você deverá ver na aba AJAX Extensions (figura ao lado) uma grande quantidade de novos controles disponíveis para utilização em suas página ASP.NET.

Para instalar o template AJAX Control Toolkit localize a pasta onde você descompactou o pacote Ajax Control ToolKit e localize a pasta AjaxControlExtender;

A seguir abra a pasta e localize o arquivo  AjaxControlExtender.vsi  e clique duas vezes sobre ele para instalar;

Selecione os templates que deseja instalar e clique em Finish para instalar os templates.

Neste exemplo vamos usar o AJAX apresentando o seu lado mais amigável : o drag-and-drop (arrastar e soltar) que é arrastar e soltar os componentes AJAX em seu formulário web da mesma forma que é feito com qualquer controle ASP.NET.

Agora que temos tudo pronto vamos ao que interessa: usar o AJAX.

Usando ASP.NET AJAX

Abra o Visual Web Develeper Express(VWD) e crie um novo site web através do menu File-> New web site com o nome dragdropajaxNet2 selecionando o template ASP.NET AJAX-Enabled Web Site ,  na linguagem Visual Basic

Você notará que o VWD irá configurar o seu ambiente para suportar AJAX incluindo um objeto do tipo ScriptManager na sua página Default.aspx como podemos ver na figura abaixo no modo Design e no modo Source:

A função do Script Manager  é gerenciar a ação de todos os controles AJAX na página.

Para começar com um exemplo bem simples vamos incluir no formulário um controle TextBox, um controle Button, um controle Calendar, um controle CheckBox e um controle ListBox conforme o leiaute abaixo:

Objetivos do projeto:

- O objetivo e permitir a entrada de um nome no TextBox e habilitar o controle Button.
- Se nada for informado no TextBox o controle Button estará inativo. Quando algo for informado o controle Button estará habilitado.
- Ao clicar no botão de comando a aplicação deveria procurar pelo nome em uma base de dados (esta parte não será implementada)
- O que importa no exemplo é mostrar o efeito de um Postback que afeta toda a página e seus controles , mesmo um simples evento Click.
- Os demais controles servem apenas para ressaltar o efeito do Postback da página

Para habilitar o controle Button(btnProcurar) quando algo for informado no controle TextBox(txtNome) devemos incluir o seguinte código no evento TextChanged do controle TextBox:

Protected Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles txtNome.TextChanged

     btnProcurar.Enabled = txtNome.Text.Length > 0

End Sub

Quando o usuário clicar no botão de comando uma ação de busca no banco de dados deverá ser feita. No nosso exemplo iremos apenas limpar o TextBox e desabilitar o botão de comando. Para isso usamos o seguinte código no evento Click do controle btnProcurar:

Protected Sub btnProcurar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnProcurar.Click

   txtNome.Text = String.Empty
    btnProcurar.Enabled = False

End Sub

Você não deve esquecer de definir a propriedade AutoPostBack do controle TextBox como sendo igual a True de forma a permitir o PostBack do controle.

Defina também a propriedade Enabled do botão de comando - btnProcurar - como sendo igual a False.

Se você executar o projeto no servidor embutido ASP.NET (Cassini) pressionando F5. Irá notar o seguinte comportamento:

Perfeito. Exatamente como queríamos , exceto por um pequeno inconveniente. Você notou que cada operação de PostBack afeta a página inteira e todos os controles nela contidos ?  Como podemos evitar este efeito ?

Elementar meu caro Watson : "Usando AJAX , mais especificamente , usando o controle UpdatePanel."

A partir da ToolBox , na aba AJAX Extensions , arraste e solte o controle UpdatePanel na página Default.aspx e coloque os controles TextBox e Button usados no interior do controle UpdatePanel conforme figura abaixo:

Se olhar o código fonte gerado para esta operação no modo Source iremos ver (estou mostrando somente o código referente ao controle AJAX)

...........
<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

      <br />Informe o nome para Busca
     <asp:TextBox ID="txtNome" runat="server" AutoPostBack="True"></asp:TextBox>
      <asp:Button  ID="btnProcurar" runat="server" Enabled="False" Text="Procurar" />

</ContentTemplate>

</asp:UpdatePanel>

....

Além de incluir um ContentTemplate para você os controles TextBox e Button estão no interior do UpdatePanel sem alteração alguma.  O controle AJAX não alterou nenhum controle ASP.NET apenas vai estender as suas propriedades originais.

Agora rode a aplicação e compare o resultado com o comportamento obtido anteriormente sem a utilização do ASP.NET AJAX.

Você vai notar que o PostBack é feito somente para o conteúdo do UpatePanel e não mais para a toda a página. O controle AJAX controla o PostBack e o faz de forma assíncrona somente para o seu conteúdo.

Para você 'sentir' a diferença de comportamento repliquei os controles TextBox e Button na mesma página fora do controle UpdatePanel usando o mesmo código.

E isso é apenas o básico, imagine as possibilidades ???

Pegue o projeto completo aqui: dragdropajaxNet2.zip

Veja o projeto funcionando aqui : http://www.visualbasic.mat.br/ajax1/Default.aspx   e comprove !

Eu sei é apenas , ASP.NET  AJAX  , mas eu gosto...

referências:

ASP.NET AJAX - http://ajax.asp.net/

José Carlos Macoratti