ASP.NET 2.0 - AJAX para cá, AJAX para lá. Vá de Atlas Framework

Depois do AJAX, a Web não é mais a mesma. Agora é possível construir aplicações que antes eram consideras impossíveis ou muito complexas, permitindo então se construir interfaces mais interativas e ricas em conjunto com DHTML...

por Ramon Durães

Você está curioso para conhecer o AJAX ? Conheça AJAX na Figura 1.

Figura 1 - Figura ilustrativa do AJAX

Já pararam para se perguntar porque somente agora, todo o mercado está faminto para usar o AJAX? O que realmente tem de tão saboroso no Asynchronous Javascript and XML? Para quem não sabe, essa tecnologia já existe faz um grande tempo. O AJAX está baseado no XMLHTTP e já foi proposto pela Microsoft, porém, era considerado "não padrão" até que em 2005 explodiu seu uso, ganhando compatibilidade nos mais diversos browsers do mercado. Prepare-se para essa nova era! Você certamente já o está utilizando e nem sabe.

Depois do AJAX, a Web não é mais a mesma. Agora é possível construir aplicações que antes eram consideras impossíveis ou muito complexas, permitindo então se construir interfaces mais interativas e ricas em conjunto com DHTML; confira na Figura 02.


Figura 2 - Figura ilustrativa para aplicações ricas.

Agora você consegue implementar aplicações Web que efetuam maior processamento no cliente sem a necessidade de efetuar POST / GET no servidor, reduzindo em até 100% (a depender do caso) a necessidade de fazer reload na página. Isso para o usuário transmite um efeito muito agradável, pois o modelo Web passa a ter funcionamento similar ao modelo Windows que o usuário está acostumado, sem as idas e vindas no servidor.

Acompanhando esse momento do mercado de tecnologia, já temos vários Frameworks que visam facilitar o uso do AJAX em conjunto com ASP.NET. Podemos citar: MagicAjax e o AJAX.NET, dentre outros que estão surgindo a cada dia. Basta fazer uma simples busca por "AJAX" em qualquer site de busca.

Acredito que você deve estar mais curioso ainda para conhecer a implementação do AJAX em uma página Web. Confira agora uma lista rápida de exemplos on-line do MagicAjax clicando aqui.

Para utilizar o MagicAjax, você precisa adicionar a referência para o MagicAjax.dll em seu projeto e algumas referências no Web.config. Depois isso, é só colocar o <AJAX:AjaxPanel> no HTML(conforme Listagem 01) e começar a desfrutar dessa fabulosa tecnologia.

Dentro do AjaxPanel, você coloca os controles do ASP.NET e automaticamente, eles terão suporte do AJAX. Conferindo o exemplo na Listagem 01, vamos montar um exemplo simples do tipo Hello World para, quando o usuário clicar no botão, o mesmo mostrar no label a data/hora do servidor. Para codificar o clique do botão, confira o código da Listagem 02.

Uma operação dessas realmente é muito simples, porém, requer quea página seja enviada ao servidor para o processamento. Com o uso do AJAX o resultado vai aparecer no Label sem que essa página seja enviada ao servidor. Ou seja, sem reload. Adeus "PostBack"! Chame seu chefe agora mesmo para lhe acompanhar nos próximos trechos... Deixe ele viver essa emoção junto com você.

MagicAjax<ajax:ajaxpanel ID="Ajaxpanel1" runat="server">
<!-- Coloque aqui seus controles do ASP.NET para teste -->
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Consulta Data Servidor" />
<br /><br />
<asp:Label ID="lblResultado" runat="server"></asp:Label>
<br />
<!-- Fim -->
</ajax:ajaxpanel> Listagem 01 - Código html para implementação dos controles.

Código protected void Button1_Click(object sender, EventArgs e)
{
this.lblResultado.Text = System.DateTime.Now.ToString();
} Listagem 02 - Código ASP.NET no servidor.

Ao testar essa aplicação, você vai ter uma página que consulta o servidor sem necessidade de postar todo o conteúdo. E o grande detalhe é que você não implementou nenhuma linha adicional em JavaScript. Ou seja, você vai continuar fazendo o código que já está acostumado.

O papel do MagicAjax nesse processo é encapsular para você todas as chamadas XMLHTTP, deixando o processo transparente. Ao clicar no botão apresentado na Figura 03, automaticamente o AJAX é acionado e a requisição é disparada no servidor, porém, a página continua parada.


Figura 03 - Utilizando MagicAjax consultando servidor.

Muito emocionante esse nosso primeiro exemplo! Espero que tenha gostado. O seu chefe nesse momento já deve estar cheio de idéias na cabeça. Muitas coisas que não eram possíveis já vão ressurgir com força total. Preste bastante atenção no exemplo, pois é a sua base para entender o processo. Como você já deve ter percebido, é realmente muito fácil a implementação por meio de um Framework.

De olho nessa reestruturação do mercado Web, a Microsoft está preparando uma atualização para o ASP.NET 2.0, conhecida atualmente como "ATLAS FRAMEWORK", cujo objetivo é ser um Framework complementar para a utilização do AJAX, muito parecido até com o MagicAjax, porém, garantindo diversas funções adicionais como integração a WebServices, Membership, Profile e principalmente um conjunto de classes para utilização do JavaScript, baseando-se nos conceitos de POO a que você já está acostumado. Confira um preview na Figura 04.


Figura 04 - Microsoft Atlas Framework

Imagine agora você implementando uma aplicação que tem um Textbox com função de auto completar, sendo que, medida que você vai digitando uma letra, é realizada uma consulta no servidor que retorna os dados do WebServices para o cliente sem que a página seja postada conforme se vê na Figura 05. Se fosse a alguns anos atrás, diríamos que era impossível, ou no mínimo muito complicado. Agora não duvide mais de nada.



Figura 05 - Textbox consultando WebServices.

Confira na Listagem 03 dois itens interessantes do Atlas que vale de imediato um comentário. Começaremos pelo UpdatePanel que vai substituir a necessidade de ter controles específicos ATLAS UI. Agora qualquer controle que estiver introduzido no Panel do Atlas será compatível. O ControlExtender vai expandir as funcionalidades de alguns controles como o TextBox para ter AutoComplete apresentado na Figura 05. O ScriptManager é usado para controlar os scripts no cliente.
Atlas HTML <atlas:ScriptManager ID="scriptManager" EnablePartialRendering="true" runat="server" />

<atlas:UpdatePanel ID="up1" runat="server">
</atlas:UpdatePanel>

<atlas:AutoCompleteExtender ID="Auto01">
</atlas:AutoCompleteExtender>

Listagem 03 - Atlas Control

Chegou o momento de implementar o TextBox com auto completar. Para isso confira o código HTML na Listagem 04 e posteriormente o código do WebServices na Listagem 05.

Atlas AutoCompleteExtender <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<atlas:AutoCompleteExtender ID="Extender1" runat="server">
<atlas:AutoCompleteProperties Enabled="true" TargetControlID="TextBox1" ServiceMethod="GetCategoryList" ServicePath="Categories.asmx" />
</atlas:AutoCompleteExtender> Listagem 04 - Utilizando AutoCompleteExtender


WebServices Exemplo[WebMethod]
public string[] GetCategoryList(string prefixText, int count){
List<string> results=new List<string>();

results.Add("Ramon");
results.Add("2PC");
results.Add("Artigo");

/*Nesse trecho pode ser feita uma consulta
* ao BD e retornar dados de acordo com o
* filtro passado em prefixText
*/

return results.ToArray();
}

Listagem 05 - WebServices exemplo


Ao comparar os dois códigos você já deve ter visto o quanto é fácil implementar um recurso tão interessante como o apresentado na Figura 05. Na Listagem 04 temos um TextBox normal e um <Atlas:AutoCompleteExtender>, que vai habilitar no TextBox a função de Autocompletar. Então basta configurar qual WebServices será utilizado na consulta por meio da propriedade ServiceMethod e começar a usar. Continua emocionado depois de ver esse TextBox consultando um WebServices? Vamos agora conferir um exemplo, utilizando o <Atlas:UpdatePanel> para fazer um exemplo comum no nosso cotidiano, que é dois controles Dropdowns, sendo que ao selecionar o primeiro, o segundo será carregado conforme Figura 06. O diferencial oferecido pelo Atlas é que vamos selecionar um item no primeiro, gerar uma consulta ao servidor que vai trazer os dados para carregar o segundo e a página vai continuar estática. Todo esse processo vai acontecer sem escrever código JavaScript ou outra codificação especial. Confira a Listagem 05 e verá que basta colocar o Atlas UpdatePanel.


DropDown<atlas:UpdatePanel ID="up1" runat="server">

<ContentTemplate>
Estado:<br />

<asp:DropDownList ID="dpEstado" runat="server" AutoPostBack="True" OnSelectedIndexChanged="dpEstado_SelectedIndexChanged">

<asp:ListItem Value="-1">-=Selecione=-</asp:ListItem>
<asp:ListItem Value="BA">Bahia</asp:ListItem>
<asp:ListItem Value="SP">São Paulo</asp:ListItem>
</asp:DropDownList><br />

<br />Cidades:<br />

<asp:DropDownList ID="dpCidades" runat="server" Enabled="False">
</asp:DropDownList>

</ContentTemplate>
</atlas:UpdatePanel>

Listagem 05 - WebServices exemplo



Listagem 06 - DropDown carregando sem postar pagina.
Código protected void dpEstado_SelectedIndexChanged(object sender, EventArgs e)
{
if (!this.dpEstado.SelectedValue.Equals("-1"))
{
CarregaCidades(this.dpEstado.SelectedValue);
}

else
{
ConfiguraCidades(false);
}
}

protected void ConfiguraCidades(bool Configura)

{
dpCidades.Enabled = Configura ;
dpCidades.Items.Clear();
}

protected void CarregaCidades(string UFs)

{

ConfiguraCidades(true);

if (UFs.Equals("BA"))

{
dpCidades.Items.Add(new ListItem("-=Selecione=-", "-1"));
dpCidades.Items.Add(new ListItem("Salvador", "Salvador"));
dpCidades.Items.Add(new ListItem("Feira", "Feira"));
}

else

{
dpCidades.Items.Add(new ListItem("-=Selecione=-", "-1"));
dpCidades.Items.Add(new ListItem("São Paulo", "São Paulo"));
}
}

Listagem 06 - Código no servidor, apenas para carregar dados.

Se você observar atentamente, verá que tanto o código html quanto o código no servidor não diferem do que você está costumado a fazer. Porém, ao executar a página e selecionar o item no primeiro DropDown ,os itens do segundo vão ser carregados sem postar a página. Gostou !!

Referências

- http://atlas.asp.net
- http://www.magicAjax.com

Finalizando

Imagine o que você pode fazer agora! Divirta-se! Suas aplicações não serão mais as mesmas.

[Codigo em MagicAjax] [Código em Atlas]

O que você gostaria saber?
Aguardo seu comentário! Ele é muito importante. Participe!!! Até o próximo artigo!
Visite meu blog: http://www.ramonduraes.com.br

Nota: Marcas e produtos citados pertencem a seus respectivos detentores.