Usando JQuery AJAX com ASP.NET

Bom pessoal quem nunca quis buscar alguma informação em um site sem que a pagina toda fosse atualizada ? Sem aquela coisa chata de refresh da página, para atrasar ainda mais a nossa vida, bom a ideia desse post é mostrar uma das técnicas (bem claro, UMA DAS) de AJAX para atualização dinâmica de paginas. Bons antes de iniciar vocês devem estar se perguntando mais o que é AJAX? AJAX ou Asynchronous Javascript And XML é o uso associado de tecnologias de XML e Javascript, que sao reconhecida por navegadores para tornar as páginas web mais interativas e dinâmicas para o usuário atraves da chamada assincrona (apenas fragmentos de pagina) para que nao ocorram os refreshs. A ideia é que o servidor forneça apenas os dados para a aplicação e que a renderização seja mais controlada para não haver excesso de carga na rede. Quando trabalhamos com ASP.NET temos recursos “prontos” chamados de ASP.NET AJAX, que provêm para o desenvolvedor todos os recurso ali como um componente da paleta de componentes. Bom mais o titulo é AJAX com JQuery , o que é isso ? JQuery é um framework ou uma plataforma com scripts javascript que agilizam, simplificam e minimizam o tempo do desenvolvedor pondendo este se concentrar na logica da aplicação. Bom passado as explicações vamos a aplicação , o que eu vou estar demonstrando aqui para vocês é simples um formulario que tem um botão que quando clicado busca a hora e data no servidor sem atualizar a pagina, a ideia é a mesma para buscar de dados , a mesma, sendo alterado o método responsavel por isso.
Bom a primeira coisa a se fazer é baixar os arquivos do JQuery que estao disponivel aqui (http://jquery.com/) depois disso criamos um projeto novo em ASP.NET e adicionamos a nossa pasta de scripts o script do JQuery. Passado a preparação vamos para a criação no head da pagina colocamos a chamada do script:


<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

Pronto, a mágica esta feita. Agora vamos criar o nosso método no codebehind da aplicação. Quando efetuamos chamadas por AJAX os dados são trocados via XML , então nosso metodo deve ter a assinatura informando que estamos criando um WEB Service que vai prover as informações via XML. Feito isso trabalharemos normalmente como se não tivessemos colocado nada na assinatura.


//Informando que é um metodo de webservice que vai prover dados via XML

[System.Web.Services.WebMethod]
 public static string getDataHora()
 {
 //Processamento do metodo , aqui colocamos acesso a dados , regra de negocios, ORM, etc. De acordo com o que for presciso
 return DateTime.Now.ToString();
 }

Feito isso conseguimos obter do servidor o data e a hora. Agora vamos a chamada do método através da pagina ASP.NET. Agora vamos implementar via javascript (JQuery) o método que vai acessar o método e usufruir do retorno.


<script type="text/javascript">
 $(document).ready(function () {
 $("#ver").click(function () {
 $.ajax({
 type: "POST",
 url: "Ajax.aspx/getDataHora",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (msg) {
 $("#resultado").text(msg.d);
 }
 });
 });
 });
 </script>

Trocando em miúdos criamos um script que toda vez que a pagina é carregada (load) [$(document).ready(function () {] , ela embute no método click do objeto de nome “ver” [$(“#ver”).click(function () { ] a função seguinte. Atenção nessa hora, por que o nome colocado dentro do $(“#…”) deve existir no DOM da pagina senão nossa aplicação não terá efeito. Logo após iniciamos o método, linha a linha temos a definição de que é um método AJAX [$.ajax({ ] , depois temos a definição dos atributos do método o tipo dele : POST , [ type: “POST”] , agora vamos a um ponto importante aqui informamos a pagina/método de onde vamos buscar as informações , não necessariamente temos que chamar métodos da mesma pagina [url: “WebForm1.aspx/Teste” ] , depois definimos que o retorno será json , que é uma notação para troca de dados, muito usual e leve. Depois dizemos que caso haja sucesso chamaremos a função seguinte [success: function (msg) { ] , nesse exemplo eu insiro no text de uma div o texto retornado (no caso a data/hora).

Para ficar mais claro segue abaixo o código da pagina (.ASPX) completa:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Intranet.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <title></title>
 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $("#ver").click(function () {
 $.ajax({
 type: "POST",
 url: "Ajax.aspx/getDataHora",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (msg) {
 $("#resultado").text(msg.d);
 }
 });
 });
 });
 </script>
 </head>
 <body>

<form id="form1" runat="server">
 <div>
 <input type="button" id="ver" />
 <div id="resultado"></div>
 </div>
 </form>

</body>
 </html>

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s