iMasters | Por uma internet mais criativa e dinâmica

Quarta-feira, 18/01/2006 - 13:00 - Por Ramon Durães
Seções relacionadas:

• Ajax
• ASP .net

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 5 comentários

Artigo recomendado para Visual Studio 2005; MagicAjax ; Atlas Framework CTP Dezembro.

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 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 que a 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 - Listagem 01 - Código html para implementação dos controles.

< ajax : ajaxpanel ID ="Ajaxpanel1" runat ="server">

< asp : Button ID ="Button1" runat ="server" OnClick ="Button1_Click" Text ="Consulta Data Servidor" />
< br />< br />
< asp : Label ID ="lblResultado" runat ="server">
< br />

Código - Listagem 02 - Código ASP.NET no servidor.

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

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 - Listagem 03 - Atlas Control

< atlas : ScriptManager ID ="scriptManager" EnablePartialRendering ="true" runat ="server" />

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

< atlas : AutoCompleteExtender ID ="Auto01">

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 - Listagem 04 - Utilizando AutoCompleteExtender

< asp : TextBox ID ="TextBox1" runat ="server">

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

WebServices Exemplo - Listagem 05 - 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();
}

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 , 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 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 - Listagem 05 - WebServices exemplo

< 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 Value ="BA"> Bahia
< asp : ListItem Value ="SP"> São Paulo
< br />

< br /> Cidades: < br />

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

Listagem 06 - DropDown carregando  sem postar pagina.

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

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" ));
  }
}

Referências

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

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 também meu blog: http://www.ramonduraes.com.br

Todos os artigos de Ramon Durães

10/11/2008 - Primeiros passos no Visual Studio Team System 05/08/2008 - Explorando o ASP.NET AJAX 23/07/2008 - Perguntas e respostas no Visual Studio Team System 16/07/2008 - Gerenciando banco de dados usando Visual Studio Team System 25/06/2008 - Explorando o Visual Studio Team System 16/06/2008 - Estudando o ADO.NET Entity Framework 03/06/2008 - Explorando o ASP.NET 3.5 Dynamic Data Controls 29/01/2008 - Acessando o código fonte do .NET Framework 08/10/2007 - Introdução LINQ to SQL 01/10/2007 - Explorando o Visual Studio 2008 24/07/2007 - ADO.NET 2.0 - Copiando dados usando Bulk Copy 18/07/2007 - Explorando ASP.NET 2.0 RSS Toolkit 12/07/2007 - Documentando código .NET 02/05/2007 - Introdução ao Microsoft Silverlight 13/03/2007 - Criando urls pra web 2.0 15/08/2006 - Controle para votação em artigos baseado no Atlas 28/07/2006 - Adicionando Atlas no Toolbox 05/07/2006 - Data Access Layer com TableAdapter 07/06/2006 - Paginando dados com SQLServer (2000/2005) 23/05/2006 - Atlas Framework Toolkit 19/05/2006 - VSTS - Instalação do Visual Studio Team Foundation Server 04/05/2006 - Criando um PostBack 28/03/2006 - ASP.Net 2.0 - Atlas Framework 18/01/2006 - AJAX para cá, AJAX para lá. Vá de Atlas Framework! 05/01/2006 - Recursos de localização - Parte 01 22/09/2005 - SiteMapPath 13/09/2005 - Web Services para iniciantes 05/09/2005 - .NET 2.0 - Instalando facilmente SmartClient com ClickOnce 31/08/2005 - ASP.NET 2.0 - Client Callback dando mais inteligência no cliente 20/07/2005 - ASP.NET 2.0 - Utilizando XmlDataSource 13/05/2005 - .NET 2.0 - Introdução ao Generics (Whidbey) 29/11/2004 - ASP.Net 2.0 - Introdução a WebParts 27/10/2004 - ASP.Net 2.0 - Visual Studio 2005 (Whidbey) 19/08/2004 - ASP.Net 2.0 - GRIDVIEW Visual Studio 2005 12/08/2004 - .NET Class Libary - Expanda as funcionalidades com seu Framework 14/05/2004 - DataGrid com checkbox e paginação 03/05/2004 - Escolhendo VB.Net ou C# 14/04/2004 - Componente Exportador Excel (*.xls) 08/04/2004 - Utilizando UserControls 26/02/2004 - DataGrid - Master Details com edição do Details 17/02/2004 - TreeView IE WebControl com banco de dados 06/02/2004 - DataGrid - Adicionando rolagem (Scroll) 03/02/2004 - DataGrid - Tornando Linha sensível ao clique do mouse 29/01/2004 - Ganhe agilidade em operações com Strings 27/01/2004 - Utilizando SSL (Secure Socket Layer)

5 comentários publicados

• 1. AJAX para cá, AJAX para lá

  Quarta-feira, 18/01/2006, por Lino Soares
  

  Excelente!

  Responder comentário

• 2. Muito bom!

  Quarta-feira, 18/01/2006, por Rogério Louzada
  

  Fora os risos no início da matéria, com a aplicação rica e a figura do Ajax, a matéria é excelente! Interessante a Microsoft já ter indicado o Ajax anteriormente. Parabéns!

  Responder comentário

• 3. Boa

  Sexta-feira, 20/01/2006, por Igor Costa
  

  Bom, realmente o Atlas veio para ajudar e colocar mais um parafuso para desenvolvedores .net que querem resultados imediatos. Porém, também existe outras alternativas mais abrangentes e com um maior número de requisitos pós e contras ao atlas já ouviu falar do backbase ? Eles tem um framework mais completo que já vi. O Atlas acredito que esteja ainda em beta e tende a melhorar e muito. Mas dessa vez a Microsoft acertou em lançar isso.
  Tomara que engaje o quanto antes.

  Responder comentário

• 4. So uma coisa

  Sexta-feira, 27/01/2006, por Robert de Azevedo Lima
  

  Não sei se foi pq eu testei no mozilla, mais no 1 link com ex básicos de ajax tds os ex deram post p/ servidor !!!!
  
  Mais muito interessante a matéria Parabéns

  Responder comentário

• 5. Parabéns

  Quarta-feira, 08/03/2006, por Júnior Silveira
  

  Mostra com exatidão o auxílio dos frameworks no desenvolvimento de aplicações que utilizam AJAX. Os links são bem elucidativos, tornando o artigo bem acessível.

  Responder comentário

Poste um comentário

(clique se não for cadastrado)

Login: Senha: Titulo: digite aqui seu comentário Site/blog: Enviar Receber notificação de novos comentários

Sobre o autor

Ramon Durães é autor da frase “Não tem que ser difícil”. Possui larga experiência em tecnologia Microsoft. É Microsoft Most Valuable Professional (MVP), Trabalha como Software Engineer na 2pc Professional Consulting onde trabalha com empresas ligadas ao desenvolvimento de software fornecendo amplo suporte na migração para .NET, arquitetura de software e adoção de Visual Studio Team System. Realiza palestras e treinamentos nos maiores eventos do Brasil. Entre em contato pelo blog (http://www.2pc.com.br/).

Indique para um amigo

Escreva aqui sua mensagem! ok

Tags relacionadas

brasil firefox linux criação lançamento mercado ti php iphone web microsoft tecnologia apple celular 3g internet seguranca twitter youtube yahoo crescimento desenvolvimento windows android mobile google

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!