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:
