Nossa aplicação será bem simples, ela calculará a idade com base na data informado, porém este cálculo será feito assincronamente, utlizando um WebMethod sendo acionado por JQUERY.
Para o exemplo precisaremos apenas do Visual Studio 2010;
Será usada a linguagem C# com ASP.NET.
Crie um novo projeto no Visual studio do tipo Web Application.
Preencha o nome do seu projeto, no exemplo utilizei o nome “TesteJQueryWebMethod”;
Após clicar em “OK”, o Visual Studio criará a seguinte estrutura para seu projeto:
Observe na pasta Scripts que o Visual Studio já traz para você os arquivos necessários para trabalhar com JQuery.
Para nosso exemplo vamos utilizar a página Default.aspx já criada pelo Visual Studio.
Substitua o código da HTML/ ASPX da CONTENT chamado “BodyContent” seguinte trecho:
Note que nos controles ASP.NET que serão usados no JQUERY estou usando a nova propriedade do .NET Framework 4.0, que é o clientIDMode no exemplo defini como “Static”, para que nossos controles fiquem com os ids inalterados no cliente, para facilitar a manipulação com o JQUERY.
Seu layout ficará assim conforme a figura abaixo:
Até aqui sem muitas novidades agora começamos vamos partir para a criação do nosso WebMethod.
No CodeBehind da página Default.aspx crie o seguinte método.
Note o atributo [WebMethod], apenas colocando este atributo já tornamos nosso método um WebMethod.
Finalmente vamos para o código JQUERY para chamada de nosso WebMethod.
No Content chamado “HeaderContent” coloque o seguinte trecho:
JQUERY nada mais é do que uma biblioteca javascript, por isso deve rodar dentro das TAGs script.
Na primeira linha de nosso JQUERY, usamos o método ready do document, para registrar o evento click de nosso botão, somente quando o documento estiver “pronto” do lado do cliente.
Na segunda linha utilizamos o operador “$” para recuperar o controle de nome “btnCalcular”e registramos seu evento “click”.
No evento “click” temos logo na primeira linha a chamada para event.preventDefault, esta chamada serve para impedir o comportamento default do evento “click” do botão, que seria realizar um POST na página.
Para chamada de nosso WebMetodo utilizamos a função JQUERY, “$.ajax()”, que serve para realizar uma requisição assíncrona dada uma URL.
Entre os vários parâmetros possíveis na função “$.ajax()”, os principais que utilizamos foram:
1. URL: ao invés de se ter uma URL apontando para uma página, estamos apontando para um método, ou melhor para um WebMethod;
2. Data: usado para enviar os parâmetros necessários na assinatura de nosso WebMethod.(Trabalhar somente com parâmetros do tipo string)
3. Type: tipo do verbo HTTP(GET ou POST);
4. Success: se a execução de nosso método for bem sucedida o processamento retorna para a função que está no parâmetro success. É neste parâmetro que podemos trabalhar com o retorno de nosso método;
5. Error: como o próprio nome diz, a função presente em error, será executada caso ocorra algum erro.
Chegamos ao final, foi um exemplo bem simples, mas espero que sirva de base para necessidades mais compexas.
Até breve.
Referências:
Nenhum comentário:
Postar um comentário