13 - ASP.NET AJAX

Antes de tentarmos entender o Ajax, é preciso conhecer a Web 2.0 e onde o Ajax se encaixa neste conceito.

Web 2.0

Embora a Web seja algo revolucionário e tecnologicamente inovador, na verdade hoje ela esta passando pela sua “pré-história”. Fazendo-se uma analogia, podemos pensar na revolução que foi a produção da TV em escala industrial lá pela década de 40, com baixíssima qualidade, preto e branca com a TV digital que esta surgindo nos dias de hoje. A Web atual é uma TV da década de 40.

Já muito se fala em Web 2.0, que seria a segunda geração de aplicações para Internet, onde a Internet passaria a ser a plataforma das aplicações, acessadas inteiramente através de navegadores: mais interativas, mas leves, mas dinâmicas...

Mas aonde o Ajax entra nisso tudo? O Ajax é a tecnologia que torna possível trazer muitos dos conceitos da Web 2.0 para as aplicações de fato. O Ajax é o responsável pela característica de interatividade e interfaces ricas e amigáveis da Web 2.0.

Ajax

Quando ensino ASP.NET para programadores que nunca criaram uma aplicação Web, noto que alguns tem dificuldades em entender o diferente modelo de funcionamento de uma aplicação Internet: O que estamos vendo no browser é o resultado de um requisição processada por uma aplicação no servidor. Em nosso navegador, cada vez que enviamos uma requisição de processamento, todo conteúdo é empacotado, enviado e processado pelo servidor e em seguida devolvido ao navegador, que trata de interpretar e exibir este resultado novamente para o usuário.

O problema é que, a cada requisição, a página inteira trafega entre o servidor e o cliente. Isto nos trás alguns problemas: Trafego desnecessário na rede, maior carga de processamento, tempo de espera pelo processamento da requisição.

A idéia do Ajax, acrônimo para Asynchronous JavaScript and XML, é permitir que apenas a parte necessária da página seja enviada e processada no servidor: é um modelo de funcionamento assíncrono: isto quer dizer que o usuário não precisa esperar o final do processamento da requisição para continuar executando a aplicação...note agora que o benefício é muito maior do que apenas evitar que a página pisque: é redução de tráfego, é aumento de desempenho, é maior interatividade.

Embora o acrônimo fale apenas em JavaScript e XML, temos diversas outras tecnologias envolvidas quando usamos Ajax: CSS, DOM e XMLHttpRequest. A requisição ao Ajax ao servidor é na forma de um objeto XMLHttpRequest. Após processada, o resultado em XML é processado pelo cliente, onde apenas as alterações são exibidas.

Nada de Novo

É curioso o fato de que muitas tecnologias já existentes a muito tempo, às vezes décadas, de repente se tornam a sensação do momento: Orientação a Objetos, infra-estrutura de Chaves Públicas etc. para citar apenas alguns.

Da mesma forma, o modelo de funcionamento do Ajax, através de chamadas assíncronas por javascript, não é novo. O objeto XMLHttpRequest surgiu no final da década de 90, lançado primeiro pela Microsoft, junto com o navegador Internet Explorer 5, na forma de um ActiveX. Mais tarde surgiu em outros navegadores, na forma de um objeto Java.

AJAX no ASP.NET 2.0 e Visual Studio 2005

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:

<div>             <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: