Newsletter
Nome:
E-mail:

Artigos

| TI24x7 Cursos Online

Chamando métodos no lado do servidor com jQuery e ASP.NET

14/03/2011

Neste artigo veremos como chamar um método do lado do servidor utilizando uma function no lado do cliente. Para isso utilizaremos jQuery e Web Services.

Existem casos em que o programador se depara com a situação de ter que resolver várias variáveis no lado do cliente sem ter que fazer uma requisição direta ao servidor através dos controles ASP.NET. Isso pode acontecer pela busca de performance na aplicação web ou para evitar PostBacks desnecessários.

Em ambos os casos pode ser necessário que o desenvolvedor necessite buscar uma variável no servidor, mas não gostaria de fazer um PostBack ou ainda nem utilizar o UpdatePanel com ScriptManager.

Então, o que fazer nessa situação?

A resposta é: jQuery + AJAX!

Para quem ainda não está por dentro dessas tecnologias, o jQuery é uma biblioteca escrita em JavaScript que tem por finalidade principal ajudar no desenvolvimento, pois ele simplifica significativamente o tamanho do código como também possui uma boa produtividade pois é simples de aprender e utilizar.

O AJAX é uma técnica de carregamento de conteúdos que utiliza o JavaScript e XML (ou qualquer outra linguagem de marcação/programação) para recuperar dados do servidor.

Para verificarmos essa funcionalidade in loco, inicialmente vamos criar um empty website no VS e em seguida, adicionaremos uma página aspx e um arquivo jQuery (eu utilizei o jquery-1.4.1.min.js mas pode ser qualquer outro posterior a este).

Na nova página criada que eu deixei com o nome padrão (Default.aspx), faça a referência do arquivo jQuery no <head> e no <body>, inclua um HTML Input Button como o código abaixo:

Código:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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="jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
     <form id="form1" runat="server">
     <div>
         <input id="btnVerificaHora" type="button" value="Verificar Hora" />
     </div>
     </form>
</body>
</html>

Sem problemas até aqui não é!!!

Agora vamos para o abracadabra da coisa e fazer a function com jQuery para chamar o método :

Are you ready?

Abracadabra!

Código

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

E no CodeBehind colocamos o seguinte método:

Código

[System.Web.Services.WebMethod]
public static string VerificaHora()
{
    return DateTime.Now.ToString();
}

"E aí esta o coelho da cartola"!

Tá bom, tá bom... você está iniciando o estudo em jQuery e não entendeu nada do que se passou.

Então vamos explicar por partes.

No CodeBehind, o atributo acima do método ([System.Web.Services.WebMethod]), quer dizer que o método é um web service para ser consumido e este web service, gera um XML.

A declaração "$(document).ready(function () { ... });" em jQuery, define que todos os métodos e funções, sejam iniciadas apenas quando o DOM estiver pronto para ser manipulado.

O seletor com o evento click ("$("#btnVerificaHora").click(function () { ... });") define uma função a ser executada quando o elemento em questão (o botão) for clicado.

A função "$.ajax({ ... });" tem por finalidade carregar uma página remota usando uma requisição HTTP. Essa função admite vários argumentos como os que foram utilizados e serão descritos a seguir.

O argumento "type: "POST", ..." define o tipo de requisição que será feita. O tipo POST é aceito em todos os navegadores e além de outros fatores, é por isso que foi escolhido.

Já o argumento "url: "Default.aspx/VerificaHora", ..." define para qual url a requisição será feita e no caso do ASP.NET, é necessário colocarmos uma barra e depois o nome do método contido no CodeBehind (este método deve ser um web service).

O argumento "data: {}, ..." são os argumentos que são enviados para o servidor. Nesse exemplo eu não utilizei argumentos mas se for necessário, você deve colocá-los da seguinte maneira: "data : { 'argumento1' : 'valor1', 'argumento2' : 'valor2', ...}". Sempre separando a chave e o valor por dois pontos (:) e os argumentos por vírgula (,).

O "contentType: "application/json; charset=utf-8", ..." é uma string que descreve o tipo de conteúdo que está sendo enviado ao servidor.

O argumento "dataType: "json"," é o tipo dos dados esperado como retorno pelo servidor. Nesse caso utilizamos o JSON que retorna o resultado como um objeto JavaScript.

E por fim o "success: ..." é a função que será executada quando a requisição se completa com sucesso.

Acreditamos que assim você conseguirá fazer requisições assíncronas usando jQuery com AJAX no ASP.NET! E lembrando que isso é só o começo, pois o jQuery vai muito além disso e está é uma ferramenta que o desenvolvedor não pode ficar sem conhecer.

Até a próxima, aperte o botão, veja o que acontece e divirta-se com as possibilidades que este método pode te oferecer.

Fim do show.



Colunista

Fabrizio Rodrigues

Graduado em Tecnologia, Análise e Desenvolvimento de Sistemas. Possui cursos Microsoft 2278/2192A, 4994A, 2956B, 2542A, 2543B, e 2544A. Trabalha com desenvolvimento de sistemas na linguagem C# e utiliza tecnologias como JavaScript, jQuery e SilverLight. Experiência em desenvolvimento de sistemas para governos na área da construção civil. Atualmente trabalha como Desenvolvedor WEB em um empresa na área de Segurança Digital Tributária.
© Copyright 2011 - Todos os direitos reservados. Proibida a reprodução parcial ou total do conteúdo deste site.
Como Funciona Formas de Pagamento Logo Ebit Compra Segura

TI 24x7 - O Maior portal de cursos online especializado em TI do Brasil