Início > .NET, ASP.NET > Chamando Métodos de uma Página ASPX usando JQuery e AJAX

Chamando Métodos de uma Página ASPX usando JQuery e AJAX

Logo JQueryMuitas vezes no ASP.NET queremos evitar os Postbacks, chamadas para a mesma página, no intuido de melhorar a usabilidade de algum componente ou da própria página. Para isso utilizamos artifícios providos pelo Javascript, JQuery e AJAX.

No entanto, surge um problema quando queremos utilizar, no código que roda no lado cliente (client-side), dados que são produzidos no lado do servidor (server-side). A solução para esse problema é bem simples: fazer todo o trabalho no servidor e repassar para a página apenas o resultado das operações, através de JQuery. E para que não ocorram Postbacks, devemos usar AJAX para chamar os métodos da página aspx que produzem os dados a serem exibidos.

Como faço isso?! Desse jeito:
Crie um novo projeto Web, adicione o arquivo correspondente ao JQuery e uma classe chamada Client.
Arquivo JQuery adicionado ao Projeto

A classe Client só vai possuir duas propriedades, ficando assim:

public class Client
{
    public string Name { get; set; }
    public int Age { get; set; }
}

Adicione uma página com o nome de Clients.aspx e, em seu code-behind, crie o método GetClient para retornar um objeto do tipo Client. O método precisa ser static e assinado com o atributo [WebMethod].

public partial class Clients : System.Web.UI.Page
{
	protected void Page_Load(object sender, EventArgs e)
	{
	}

	[WebMethod]
	public static Client GetClient()
	{
		Client ada = new Client { Name = "Ada", Age = 40 };
		return ada;
	}
}

Agora, no modo Design, adicione à pagina o código JQuery que irá chamar o método GetClient. Para isso, na tag head acrescente o seguinte código:

<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script><script type="text/javascript">// <![CDATA[
        $(document).ready(function () {
            $("#runJasonFromPage").click(function () {
                $.ajax({
                    type: "POST",
                    url: "Clients.aspx/GetClient",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (jasonResult) {
                        alert(jasonResult.d.Name);
                    }
                });
            });
        });
// ]]></script>

O que o código acima faz é assinar o evento de click de um elemento da página chamando o método GetClient da página Clients.aspx. O resultado obtido na chamada desse método é repassado para uma função javascript, na forma de um objeto JSON, JavaScript Object Notation. Essa função simplesmente exibe a propriedade Name desse objeto, através de um alert.

Note que não é preciso serializar o objeto Client no código da página Clients.aspx. O ASP.NET já faz essa serialização por padrão.

Agora precisamos criar o elemento que irá executar o código JQuery que escrevemos acima. Adicione, então, um botão HTML com o id runJasonFromPage à página:

<input id="runJasonFromPage" type="button" value="Run JSON From Page" />

Pronto! Sua página está chamando um método de servidor sem ser necessário Postback e sem utilizar controles de servidor.

Anúncios
Categorias:.NET, ASP.NET
  1. Elton Oliveira
    08/11/2011 às 10:48 AM

    Muito bom! Parabéns!

  2. Eduardo Melo
    08/11/2011 às 6:24 PM

    Valeu Cara !! Muito bom mesmo.

  1. No trackbacks yet.

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 )

Imagem do Twitter

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

Foto do Facebook

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

Foto do Google+

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

Conectando a %s

%d blogueiros gostam disto: