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:
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.