jQuery com Asp.Net Ajax: Consumindo um Web Service

Antes de começar a falar do assunto propriamente dito, irei falar rapidamente sobre o que me motivou a começar a estudar asp.net ajax com jquery.  Atualmente, estamos desenvolvendo um sistema consideradamente grande na empresa, e fiquei responsavel por um módulo que é muito grande, onde temos fórmularios gigantes, com dados e mais dados, em vários pontos do mesmo precisamos fazer chamadas assincronas ao servidor. E qual o problema? Faziamos tudo com updatepanel e com outros controles do ajaxcontroltoolkit. Quando finalizamos o módulo, a primeira reclamação feita pelo usuário foi que as chamadas assincronas estavam lentas pois as páginas estavam muito carregadas. Não sei se vocês tiveram a curiosidade de olhar, mas o updatepanel em um request trás uma quantidade de ‘lixo’ enorme. Então começamos a estudar possiveis soluções,  uma delas foi utilizar jquery para nos ajudar no desenvolvimento, e desde o momento que decidimos utilizar jquery, a equipe não para de se fascinar a cada dia com o poder da biblioteca. E com certeza  a utilização de jquery no nosso projeto é um dos grandes motivos para o sucesso do mesmo, pois, atualmente, ele está bem rápido, dando respostas que antes aconteciam em 5s, agora em 1s.

Então, neste primeiro post vamos falar sobre como consumir um WebService em Asp.Net Ajax com jQuery.

1.O que nosso exemplo irá fazer?

Para servir como exemplo, iremos fazer um projeto onde carregaremos controles de usuarios (user controls) de maneira assincrona.
Ou seja, o usuário ira clicar em um botão “carregar”. O mesmo irá disparar uma função javascript, que esta por sua vez irá chamar um método do web service de maneira assincrona, e este irá carregar e retornar o controle para o cliente.
Então vamos ao que interessa, vamos começar a construir esta aplicação.

2. Código HTML

O código HTML será bastante simples, terá apenas um  botão HTML que tem a finalidade de carregar o user control e terá uma div que é o espaço onde será exibido o nosso user control carregado dinamicamente.

<div id="resposta">
div>
<input type="button" id="loadControl" value="carregar user control" />

3. Código JavaScript

Nesta parte é que teremos boa parte da lógica para carregar o controle. É aqui que assinamos a função que será disparada quando o botão for clicado. É daqui também que iremos chamar o web service e logo apos adicionaremos a resposta do WS na div “resposta”.

<script language="javascript" type="text/javascript">

       $(document).ready(function() {
           $("#loadControl").click(function() {
               var params = '{}';
               $.ajax({
                   type: "POST",
                   url: "UserControlsService.asmx/GetUserControl",
                   data: params,
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function(msg, status) {
                       $("#resposta").html(msg.d);
                   },
                   error: function(xhr, msg, e) {
                       alert(msg);
                   }
               });
           });
       });    

script>

Explicando a finalidade de cada propriedade:

• type: tipo da requisição, ou seja, se vai acontecer via get ou post.
• url: Caminho do web service, e método que irei acessar. No meu caso o WS é “UserControlsService.asmx” e o método que irei acessar é “GetUserControl”
• data: dados que irei passar para o método (os dados devem ser passados no formato json)
• contentType: mais informação sobre o conteúdo que estará envolvido na trasmissão de dados entre cliente e servidor.
• dataType: Logo à cima falei que os dados deveriam ser passados em json. Isto deve acontecer pois o tipo do dado definido por mim foi “json”
• success/error: o que deve ser feito quando acontecer determinada coisa, ou seja, quais as ações que serão tomadas quando a comunicação com o WS ocorrer com sucesso ou quando houver erro.
• 
  

4.Criando o WS e carregando o user control.

Antes de tudo, devemos assinar nossa classe com o atributo “ScriptService”. Após esse passo, já podemos criar nossos métodos que irão retornar ‘qualquer coisa’ para o código javascript.

No meu caso, como eu quero carregar um user control, então utilizo o seguinte código:

   [WebMethod]
   [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
   public string GetUserControl()
   {
       Page page = new Page();
       HtmlForm form = new HtmlForm();
       UcLogin login = (UcLogin)page.LoadControl("UcLogin.ascx");
       form.Controls.Add(login);
       page.Controls.Add(form);
       StringWriter sw = new StringWriter();
       HttpContext.Current.Server.Execute(page, sw, false);
       string retorno = sw.ToString();
       sw.Close();
       return LimparHtml(retorno);
   }

   private static string LimparHtml(string html)
   {
       return Regex.Replace(html, @"<[/]?(form|[ovwxp]:\w+)[^>]*?>", "", RegexOptions.IgnoreCase);
   }

Não irei fazer nenhum comentário de como eu fiz para carregar o controle, pois falarei disso em um proximo post, mas caso alguem possua alguma dúvida é só postar. Nesse post a meta é entender como consumir um web service com jquery e asp.net.

5.Criando o user control

Crie o user control, que no meu caso irá se chamar “UCLogin.ascx” , e coloque qualquer coisa como seu conteudo. No meu caso coloquei apenas duas labels e duas textbox, como o código a seguir:

<table>
    <tr>
        <td>
            Login
        td>
        <td>
            <asp:TextBox ID="txtLogin" runat="server">asp:TextBox><br />
        td>
    tr>
    <tr>
        <td>
            Senha
        td>
        <td>
            <asp:TextBox ID="txtSenha" runat="server">asp:TextBox>
        td>
    tr>
table>

6.Finalizando

Se você rodar e testar a aplicação, você verá que o user control já está sendo carregado de maneira assincrona.

Abraço a todos.

Este artigo encontra-se, também, em meu blog: http://fpimentel88.wordpress.com