Neste tutorial, vamos exemplificar como se podem utilizar as funcionalidades Ajax da JQUERY para consumir Page Methods do ASP.NET AJAX. Os Page Methods permitem que chamemos métodos do code behind de uma página aspx através de Javascript. Deste forma podemos actualizar informação no browser do utilizador sem efectuar um refrescamento da página.
No exemplo deste tutorial vamos chamar um método simples que apenas nos vai devolver um string com a data actual no servidor. Este método não vai receber nenhum parâmetro. Num próximo tutorial explicaremos como passar parâmetros ao PageMethod.
Tutorial - JQUERY + ASP.NET AJAX + Page Methods
Primeiro criamos uma página aspx simples, com um div com o id “resultado” e com um texto exemplificativo lá dentro. Nessa página referenciamos a JQUERY. De notar que na pasta js também temos o ficheiro de documentação que nos permite ter intellisense da JQUERY no Visual Studio 2008.
Agora no code-behind da página vamos criar o método estático GetDate, que deverá ser marcado como um WebMethod.
O método anterior retorna uma string com a data actual no servidor. Para marcarmos o método como WebMethod, temos de adicionar referência ao “System.Web.Services“.
Agora vamos utilizar a JQUERY para consumir este método. Para isso, vamos adicionar um novo script no html da página, antes da tag de fecho do body. Nesse script vamos utilizar os selectors da JQUERY para associar o evento click à div resultado. E quando clicarmos sobre a div, será executado um pedido ajax ao servidor através da JQUERY.
A comunicação com o servidor será feita utilizando json. O url do método é o nome da página + o nome do método. O pedido deverá ser um POST, e o contentType terá que ser exactamente o especificado em cima.
Em caso de sucesso, vamos colocar o resultado obtido dentro da div “resultado”. Se repararem bem no código em cima, estamos a mostrar a variável msg.d. O “.d” é um mecanismo de segurança implementado apenas na versão 3.5 do ASP.NET. Por isso, se ainda estão a utilizar a versão 2.0, basta mostrarem o resultado da variável “msg”.
Agora resta-nos testar. Para isso vou utilizar o firefox, onde podemos ver o pedido e a resposta efectuada, através do plugin Firebug.
Nas imagens de cima podem ver o que acontece quando clicamos na div. Primeiro temos a mensagem que definimos, mas assim que clicamos, temos a data e hora do servidor. E sempre que clicarmos novamente a mesma é actualizada.
Vejam a informação que é trocada entre o servidor e o browser:
O pedido vai vazio, porque o método não recebe parâmetro.
E a resposta apenas devolve a string com a data.
A quantidade de informação trocada é minimizada ao máximo. 
Espero que tenham gostado. A JQUERY em conjunto com o ASP.NET AJAX fornece-nos uma plataforma de desenvolvimento web moderna e bastante potente.
Se gostaram deste artigo subscrevam a feed RSS do istomesmo, para ficarem actualizados sobre os últimos artigos.
» Subscrevam aqui a fedd RSS «
Obtenha mais informações sobre a fedd RSS aqui
Artigos que também lhe podem interessar:
Abril 6th, 2009 às 22:39
Ótimo post, mas gostaria de saber …… como faço a mesma coisa, mas retornando um dataset ou datatable ou qualquer outra coisa de um metodo na minha página … saberia me explicar ?
Abril 15th, 2009 às 0:04
@Claudio
Para a Jquery, o melhor é retornar strings ou arrays de dados, pois é mais simples trabalhar com estes.
Não existe um cast directo entre objectos ASP.NET/C# e objectos Javascript/Jquery, por isso terá de ser sempre efectuada algum tipo de conversão dos dados no cliente.
Existe um plugin para o jquery que facilita a apresentação de grandes quantidades de dados JTemplates.
Cumprimentos.
Agosto 9th, 2009 às 20:38
Excelente artigo, mas não disponibilizou o código e na imagem está ilegivel, uma pena…..
Será que teria os fontes ainda ?
Setembro 4th, 2009 às 15:19
Claudio,
Muito legal esse tutorial, está bem claro. O problema é que não consegui executar no IE 8, será que essa versão ainda não executa JQuery?
Fevereiro 9th, 2010 às 18:43
Cara vc ja conseguio enviar parametros para PageMethods usando o jquery achei muito bom esse seu post…
Gostaria muito de saber fazer ao inverso…
falow..