Ajax com JQuery em asp.net

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (2)  (0)

Nesse artigo pretendo dar uma breve introdução ao uso de ajax com JQuery em asp.net utilizando webMethod do asp.net e jsom.

Nos últimos tempos muitos sites começaram adotar o Ajax em suas páginas não só pelo fato,Do efeito de carregar a página sem dar um POST na página o Ajax e muito mais que isso.

No artigo de hoje vou ensinar como chamar do Code Behind um método utilizando o Ajax e a linguagem JSOM.

Nesse artigo vamos aprender também algumas maneiras e boas praticas e cuidados que precisa ter quando trabalhamos com jQuery.

Vamos criar um novo projeto do tipo web, sem novidades e colocar os plugin JQuery em uma pasta scripts:
http://code.jquery.com/jquery-1.4.2.min.js

http://code.jquery.com/jquery-1.4.1-vsdoc.js

Após isso vá até o código HTML da nossa página, e coloca o seguinte código:

 ID="hlkCarregarText"  runat="server"  Text="Carregar"  CssClass="carregarAjax" />

           

Clique aqui para saber o resultado.

           

 

Depois chame nosso plugin JQuery para nossa página e coloque o seguinte código.

   

O código ajax do JQuery e muito simples na  linha 1 eu crio um evento click simples mesmo, nos proximos artigo

    vou ensinar mais sobre eventos e seletores no jQuery.

    - 2 eu chamo o instancia do objeto XMlhttpRequest que cuida dos eventos ajax da página, a biblioteca jquery

    e uma simplificação de tudo porque se nos fosse inicializar o ajax na mão precisaria invalidar todos os browser , porque    o objeto ajax não são igual para todos os browser no IE 6 Msxm12.XMLHTTp e nas proximas versão atual é  Microsoft.XMLHTTP então imagina toda

    a vez que nos precisar criar um evento ter que já ter ou criar um função para inicializar o objeto ajax do browser.

    -3 Type :  linha que tipo de requisição nos vamos fazer GET ou POST no caso vamos sempre utilizar POST.

    -4 url: url na qual vai ser requisitada e recebe na frente o nome do nosso metod que vai ser chamado.

    -5 data: as chaves são a encapsulação do que vai ser enviado para o servidor no caso o que esta retornando do nosso metodo.

    -6 contentType: o tipo de conteudo que esta sendo enviado para o servidor.

    -7 dataType: E o tipo de dados esperado pelo servidor como retorno no caso nos estamos utlizando jsom que vai estrarir  no codebehind nosso metodo

    -8 sucess:    quando nossa requisão é efetuada com sucesso o status da nossa página e 200 assim o ajax sabe
    que pode execultar ou retorna qualquer metodo para á pagina.

Após isso vamo nos codeBehind (cs) e vamo criar um metodo que vai receber no cabeçalho a tag [WeMethod] da namespace 

    System.Web.Services, e vamos criar o metodo como mostra abaixo.

      [WebMethod]

      public static string GetText()

    {

        return "Parabéns o metodo foi chamando com sucesso";

    }

        Após isso execulte o projeto e clique sobre o link, a nossa div#atenção vai trocar o texto pelo o que nosso metodo retorna   sem carregar há página, isso seria alguma das coisas que nos podemos fazer sem usar o updatepanel do asp.net e ainda trabalhar   com o retorno desse metodo em funções jQuery.  

    Dicas: sempre quando for criar algum evento usando seletores use como referencia CssClass dos controle do asp.net,   quando nos colocamos o ID do nosso controle na hora que carrega há página o asp.net renderiza nosso controle e muda o    ID assim nos acaba tendo alguns problemas.   

 

 

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?