Patrocínio Natura

AJAX com ASP.Net – Criando uma aplicação em poucos minutos

10 de outubro de 2007

Olá pessoal! Neste artigo iremos abordar de forma prática um assunto muito na moda. Trata-se do AJAX. O AJAX (Asynchronous Javascript and XML) é uma metodologia antiga para acesso assíncrono a páginas Web. Ele já vem sendo utilizado arduamente há anos por programadores ASP, PHP e etc, utilizando uma mistura de JavaScript e XML.

Tentarei mostrar como ASP.Net simplifica (e muito) a implementação de AJAX em suas páginas.

Simplificando, as linguagens de programação Web (como ASP, PHP e até mesmo ASP.net) são processadas no servidor. Isso significa que cada vez que o usuário clica em um botão, a página é enviada de volta ao servidor, e recarregada. A utilização do AJAX permite que esse processamento seja assíncrono, evitando que a página seja recarregada, dando ao usuário uma sensação muito mais confortável. É uma ferramenta maravilhosa, quando bem utilizada.

O exemplo mais bem sucedido que conheço da utilização de AJAX é o Gmail. Quando você navega pelo Gmail, as páginas não são diretamente carregadas. Ao invés disso, é mostrada uma mensagem na lateral superior direita, informando que a página está sendo carregada e enquanto isso podemos continuar a usá-la.

Vamos criar uma aplicação bem simples, para inclusão, exclusão e acesso à dados de uma Lista Telefônica, com nome, cidade, e-mail e telefone. Um exemplo simples, pra que você entenda o funcionamento do Ajax.

Antes de começar, veja aqui o exemplo rodando e baixe aqui o código completo.

Irei utilizar a biblioteca MagicAjax, que, na minha opinião, é a mais fácil de usar, e é OpenSource. Você pode baixá-la em http://www.magicajax.net. Usarei o Visual Web Developer 2005 (.Net 2.0), mas nada impede que você codifique manualmente.

1 – Configurando o MagicAjax em nossa aplicação

Pois bem. Baixe o MagicAjax e copie para a pasta de sua aplicação as pastas “bin” e “core”. Na pasta bin está o arquivo MagicAjax.dll, a biblioteca que usaremos para construir nossa aplicação, e na pasta core estão os scripts usados pelo MagicAjax.

Primeiramente, temos que definir em nossa aplicação que iremos utilizar a biblioteca do MagicAjax. Isso é feito através de algumas linhas de código no Web.config.

Então, crie um arquivo chamado Web.config e neste arquivo, digite o código abaixo:



       
             

2 – Criando o arquivo de dados

Agora, crie o arquivo XML/XSD que irá conter nossos dados, chamado “dados.xml”. Iremos usar os dados provenientes desse arquivo. Nada impede que você use um banco de dados. No arquivo dados.xml, copie o texto abaixo:



  
    
      
        
          
            
              
                
                
                
                
                                
              
            
          
        
      
    
  
  
    1
    Walter V. S. de Amorim
    Barra Mansa/RJ
    nao.faca.spam@walteram.com.br
    (24)9999-0000
  
  
    2
    Fulano
    Volta Redonda/RJ
    teste@teste.com
    (21)9990-0123
     
 

Os detalhes do arquivo XML não são importantes. São apenas os dados usados por nossa aplicação.

3 – Exibindo os dados

Agora crie um arquivo chamado “default.aspx”. Essa página irá exibir os dados provenientes do arquivo XML criado, através de um DataGrid, e nos permitirá filtrar os itens.

No arquivo, copie o código abaixo:

<%@ Page Language="VB" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="MagicAjax" Namespace="MagicAjax.UI.Controls" TagPrefix="ajax" %>

  

Mostrando os Dados


    
Filtrar:         
Para Adicionar um ítem, clique aqui.

Salve a página e execute-a. Você verá o seguinte:

Imagem

Tente digitar algum texto no campo “Filtrar”. Você verá que os dados serão filtrados sem recarregar a página.

Observe também que quando você faz o filtro, ou exclui um item, aparece um pequeno quadro com o texto “Loading”, no canto superior direito, bem parecido com o que acontece com o Gmail:

Imagem

Mais à frente, você verá como alterar o texto “Loading”.

O código da página, como você pode ver, não tem nada de incrível, à não ser por dois pequenos trechos. O primeiro, no início da página, é:

<%@ Register Assembly="MagicAjax" Namespace="MagicAjax.UI.Controls" TagPrefix="AJAX" %> 

Nesta linha registramos os controles do MagicAjax. Assim podemos usar todos os recursos dessa biblioteca.

Um outro trecho importante:


  
Filtrar: 
  
  
       ... 
  

Neste trecho, utilizamos o AjaxPanel para controlar os eventos de nossa aplicação. Tudo que estiver dentro desse controle irá atuar sobre as regras do MagicAjax. E tudo que estiver fora do AjaxPanel, irá atuar da forma normal.

Dentro desse controle está o KeyClientEventWrapper. Este outro controle, que também vêm com a biblioteca MagicAjax, é responsável por capturar as teclas digitadas. Dentro dele temos um TextBox comum. Quando uma tecla é digitada neste TextBox, o KeyClientEventWrapper chama a função CapturarTecla_KeyUp, que carrega os dados novamente.

Dentro do AjaxPanel está também o DataGrid, que exibe os dados e permite-nos excluir um item. O DataGrid tem ainda um link para editar os dados. Essa será a próxima etapa.

Em nosso caso, usamos os controles AjaxPanel e KeyClientEventWrapper. Sugiro que você consulte a documentação do MagicAjax (disponível no download) que contém uma explicação geral de cada controle disponível na biblioteca.

Você pode ver que é bem simples implementar o AJAX em suas páginas. Tudo que tem que fazer é colocar seus controles dentro da tag AjaxPanel.

4 – Alterando os Dados da Lista Telefônica

A próxima etapa em nosso exemplo é criar a página que irá nos possibilitar a edição dos dados. Nesta, como você verá, não há nada de extraordinário.

Crie uma página chamada “editar.aspx”, e nela cole o código abaixo.

<%@ Page Language="VB" Debug="true" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="MagicAjax" Namespace="MagicAjax.UI.Controls" TagPrefix="ajax" %>


Editando os Dados

    
        
Código:
Nome:
Cidade:
E-mail:
Telefone:
                     

Novamente, utilizamos o AjaxPanel. Mas, desta vez, apenas nos botões Salvar e Cancelar.

Você deve ter notado que utilizamos a função MagicAjax.AjaxCallHelper.Redirect. Esta função atua de forma quase que idêntica ao Response.Redirect, mas utiliza Ajax. A biblioteca MagicAjax possui diversas funções interessantes, como essa.

5 – Adicionando Dados à Lista

A última etapa em nossa pequena aplicação é criar a página onde poderemos adicionar dados.
Então, crie uma página chamada “adicionar.aspx” e cole o código abaixo:

<%@ Page Language="VB" Debug="true" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="MagicAjax" Namespace="MagicAjax.UI.Controls" TagPrefix="ajax" %>



    Adicionando Dados


    
  
Nome:
Cidade:
E-mail:
Telefone:

6 – Alterando o texto “Loading”

Conforme prometi, irei mostrar como alterar o texto “Loading”. Pois bem. Abra o arquivo “AjaxCallObject.js” (dentro da pasta core/script). Lá no final do arquivo (+- linha 1051), você verá o código:

function CreateWaitElement() {
var elem = document.getElementById('__AjaxCall_Wait');
if (!elem) {
elem = document.createElement("div");
elem.id = '__AjaxCall_Wait';
elem.style.position = 'absolute';
elem.style.height = 17;
elem.style.paddingLeft = "3px";
elem.style.paddingRight = "3px";
elem.style.fontSize = "11px";
elem.style.fontFamily = 'Arial, Verdana, Tahoma';
elem.style.border = "#000000 1px solid";
elem.style.backgroundColor = "DimGray";
elem.style.color = "#ffffff";
elem.innerHTML = 'Loading ...'; 
elem.style.visibility = 'hidden';
document.body.insertBefore(elem, document.body.firstChild);
}
waitElement = elem;
}
// end wait element

Altere o texto (por exemplo, para ‘Aguarde…’). Você pode também definir a cor de fundo, altura, borda, e etc.
Quando terminar, salve o arquivo e execute novamente. Pronto:

Imagem

7 – Concluindo

É isso aí. Agora você está pronto pra começar a desenvolver suas próprias aplicações em Ajax.
Como você viu, tudo que tem de fazer é definir o Web.Config, registrar o MagicAjax no topo das páginas que for usar, e colocar os seus controles dentro do AjaxPanel. Simples, não?!

Nos próximos artigos irei me aprofundar mais nesse assunto tão importante. E por hoje é só. Não deixe de baixar o exemplo e brincar um pouco. E em caso de dúvidas, mande um e-mail.

Um Abraço!

Walter Amorim

Compatilhe esse artigo!

Nenhum Comentário

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

This site uses Akismet to reduce spam. Learn how your comment data is processed.