AJAX Parte III . Ajax Extensions

Para o Visual Studio 2005, o Ajax Extensions traz um conjunto de controles simples, que permitem a execução de chamadas assíncronas através de controles visuais, ocultando a complexidade de se trabalhar diretamente com o objeto XMLHttpRequest.

Além disso, foi lançado também um conjunto de controles, o AJAX toolkit, com um conjunto de diversas funcionalidades já prontas.

No Visual Studio 2005 e ASP.NET 2.0 o AJAX deve ser instalado a parte, através de um instalador fornecido pela Microsoft.

AJAX no ASP.NET 3.5 e Visual Studio 2008

O AJAX já é parte integrante do .NET Framework 3.5 e do ASP.NET 3.5. Os controles AJAX Extensions, ao contrário do que ocorre com o Visual Studio 2005, já vem integrados ao Visual Studio 2008 e não requerem instalação a parte.

No Visual Studio 2005 era necessário criar uma aplicação a partir de um Templates para podermos utilizar AJAX em uma aplicação, ou alguma informações deveriam ser inseridas manualmente no arquivo Web.Config.

No Visual Studio 2008 qualquer aplicação ASP.NET já esta pronta para o AJAX, não é preciso criá-la a partir de um Templates, tampouco é necessário intervenções no Web.Config.

AJAX Extensions

O poder do AJAX esta disponível em conjunto de controles na barra de ferramentas do Visual Studio:

Antes de entrarmos na parte prática, vamos qual a função de cada controle:

         ScriptManager: O controle mais importante, ele que habilita as funcionalidades do AJAX na página. Deve existir apenas um em cada web form;

•          ScriptManagerProxy: Utilizado com a função do ScriptManager em uma página de conteúdo. No capitulo sobre Master Pages, vimos que cada página que utiliza uma página Master, é denominada página de conteúdo.  Deve funcionar em conjunto com o controle ScriptManager da página Master;
•          Timer: Este controle deve ser utilizado para executar eventos em determinados intervalos. Veremos seu uso na prática;
•          UpdatePanel: Talvez o controle mais importante, permite que partes de uma pagina sejam atualizados de forma assíncrona;
•          UpdateProgress: Se a requisição assíncrona for demorada, podemos utilizar este controle para dar “feedback” ao usuário enquanto ele aguarda, seja exibindo uma mensagem ou mesmo uma imagem animada;

Exemplo prático com Update Panel

Neste primeiro exemplo veremos como é simples e rápido criar uma aplicação simples já capaz de fazer chamadas assíncronas através do ASP.NET Ajax.

Primeiramente crie uma nova aplicação ASP.NET:

 

Na web form criado pelo Visual Studio, adicione um controle ScriptManager. Este controle deve ser o primeiro da página.

Em seguida adicione um controle UpdatePanel. Este controle é um container, ou seja, dentro dele podemos colocar outros controles. É o que vamos fazer agora, adicione dentro do UpdatePanel um controle Button e um controle Label.

Seu código deverá conter os seguintes elementos:

 

<asp:ScriptManager ID="ScriptManager1" runat="server">         </asp:ScriptManager>         <br />     </div>     <asp:UpdatePanel ID="UpdatePanel1" runat="server">         <ContentTemplate>             <asp:Button ID="Button1" runat="server" Text="Button" />             <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>         </ContentTemplate> </asp:UpdatePanel>

Hora de escrever algum código de servidor. A idéia é atualizar a hora no label. Como estaremos rodando a aplicação local e o processamento será mínimo, não teremos nenhum efeito visual das funcionalidades do AJAX, por isso, alem de atualizar o horário, vamos causar um delay no servidor.

De um duplo clique sobre o Button e escreva o seguinte código:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click         System.Threading.Thread.Sleep(1000)         Label1.Text = DateTime.Now.ToString() End Sub

protected void Button1_Click(object sender, EventArgs e)     {         System.Threading.Thread.Sleep(1000);         Label1.Text = DateTime.Now.ToString();     }

Agora coloque outro Button e outro label abaixo do UpdatePanel (do lado de fora deste). De um duplo clique sobre o novo botão e escreva o mesmo código, porém escrevendo a data no label2:

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click         System.Threading.Thread.Sleep(1000)         Label2.Text = DateTime.Now.ToString() End Sub

protected void Button2_Click(object sender, EventArgs e)     {         System.Threading.Thread.Sleep(1000);         Label2.Text = DateTime.Now.ToString();       }

Visualmente seu web form deverá estar semelhante a imagem abaixo:

<

O que teremos ao rodar a aplicação? O primeiro botão irá fazer uma requisição assíncrona, enviando uma informação mínima entre o postback. A segunda requisição fará um postback de toda a página.

Rode a aplicação, clique nos dois botões e observe os resultados.Se você acha que não pode observar nada diferente, preste mais atenção: Observe que quando você clicar no botão o navegador estará “carregando” a pagina (Se você usa o Internet Explorer 7, observe o ícone de carregar, que substitui o logo do IE na guia da página), aguardando o final do processamento.

Adicionando um UpdateProgress

Muitas vezes um postback pode ter uma grande carga de processamento e demorar mais do que gostaríamos. Em casos extremos o usuário pode ficar impaciente, ou até achar que ocorreu algum problema. O Controle UpdateProgress é forma de dar um feedback ao usuário enquanto ele aguarda o processamento. O Controle é também do tipo container, você decide o que vai colocar lá dentro: uma mensagem, um gif, uma animação etc. O único requisito para seu funcionamento é colocá-lo na página já preparada para o AJAX e conectá-lo a um UpdataPanel.

Vamos ver o funcionamento na prática. Crie uma nova aplicação ASP.NET, coloque um controle ScriptManager e um controle UpdatePanel. Dentro do UpdatePanel coloque um controle label e um controle Button. De um duplo clique sobre o Button e digite o seguinte código:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click         System.Threading.Thread.Sleep(1000)         Label1.Text = DateTime.Now.ToString() End Sub

protected void Button1_Click(object sender, EventArgs e)     { System.Threading.Thread.Sleep(1000);        Label1.Text = DateTime.Now.ToString();     }

Note que voltamos a colocar um código para causar um atraso na aplicação, a fim de podermos ter uma visualização do efeito. Agora coloque um controle UpdateProgress, defina a propriedade AssociatedUpdatePanelID como UpdatePanel1, dentro do container do controle escreva uma mensagem como “Aguarde...processando!”:

Rode a aplicação, clique sobre o botão e observe o resultado:

Triggers

 No exemplo anterior  colocamos o botão que dispara o evento, e o label que mostra a data, dentro de um elemento ContentTemplate. Isto significa que a requisição assíncrona envio informações de ambos os controles no postback. Através de um elemento trigger podemos separar o conteúdo que será atualizado do conteúdo que dispara o evento, otimizando o postback.

Vamos ver o funcionamento na prática. Crie uma nova aplicação ASP.NET, coloque um controle ScriptManager e um controle UpdatePanel. Dentro do UpdatePanel coloque um controle label, abaixo e fora do container do UpdatePanel um controle Button. De um duplo clique sobre o Button e digite o seguinte código:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click         Label1.Text = DateTime.Now.ToString() End Sub

protected void Button1_Click(object sender, EventArgs e)     {         Label1.Text = DateTime.Now.ToString();     }

Agora devemos informar o controle que vai disparar o evento. Selecione o UpdatePanel, na janela de propriedades clique em Triggers. Esta é uma coleção de eventos que podem disparar a atualização do conteúdo do UpdatePanel. Clique em Add. Informe em ControlID Button1, em EventName Clik, conforme imagem abaixo:

Observe agora o código gerado pelo VS, compare com os exemplos anteriores:

 

<asp:UpdatePanel ID="UpdatePanel1" runat="server">   <ContentTemplate>         <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>         </ContentTemplate>         <Triggers>             <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />         </Triggers> </asp:UpdatePanel>

 

   Observe que foi criado um elemento Triggers, que aponta para o controle e o evento que dispara o postback Assíncrono. Roda a aplicação e teste o resultado.

Usando um Timer

Nos exemplos anteriores utilizamos o clique de um botão para disparar a chamada assíncrona ao servidor. O controle Timer permite que chamadas sejam realizadas automaticamente, sem a necessidade da disparada de um evento pelo usuário.

Para tal, basta colocarmos um controle Timer dentro de um UpdatePanel, e em seu evento Tick escrever o código a ser executado no servidor. Através da propriedade Interval definimos o intervalo de disparo destes eventos.

Para testarmos sua funcionalidade, crie uma nova aplicação ASP.NET 3.5, adicione ao web form criado um ScriptManager e logo abaixo um UpdatePanel. Dentro do UpdatePanel coloque um controle Label e um controle Timer. Defina a propriedade Interval do Timer em 1000 milesecundos, o que equivale a 1 segundo.  De um duplo clique sobre o controle Timer e no manipulador de evento criado escreva o seguinte código:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click         Label1.Text = DateTime.Now.ToString() End Sub

protected void Timer1_Tick(object sender, EventArgs e)     {         Label1.Text = DateTime.Now.ToString();       }

Rode a aplicação e observe a atualização da data a cada segundo: