Release do jQuery 1.3 já pode ser baixada

ScreenShot002

No dia 14 de janeiro foi colocado à disposição dos desenvolvedores a nova versão do jQuery.

Não tive tempo ainda para testar e brincar com a nova versão, mas pelo o que andei lendo e vendo, o foco do time de desenvolvimento foi a PERFORMANCE.

As novidades que destaco são:

  1. Melhoria na performance dos selectors
  2. Live Events: Novo modo de tratar eventos. Onde os eventos podem se ligar à todos os elementos de modo fácil e RÁPIDO.
  3. Injeção de HTML foi rescrito: Sabe os modo de inserir HTML no documento? Pois é, todos foram rescritos com foco em PERFORMANCE. A melhoria foi absurda.
  4. Método .offset() foi rescrito: a intenção de rescrever esse método foi a performance também, que aumentou muito no jQuery 1.3.
  5. A nova versão roda em grande parte (para não dizer todos) dos browser que já existem e que ainda estão por vir.

Legal né? Pois é… Nesta versão o jQuery parece ter sofrido várias modificações para melhor, muito melhor.

Para maiores informações acessem o link:

http://docs.jquery.com/Release:jQuery_1.3

Espero que tenham gostado. Abraços!

jQuery com Asp.Net Ajax: Consumindo um Web Service

Bem, espero que esse seja um o primeiro post de uma séries sobre jquery e asp.net.

Mas 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. Bem, por hoje é apenas isso. Espero que vocês tenham entendido como consumir um web service com jquery. E o mais importante de tudo, espero que vocês tenham percevido todo o poder dessa biblioteca incrivel que é o jquery. Espero em posts futuros vir a falar um pouco mais de jquery e soluções de como melhorar o desempenho de suas aplicações asp.net.

Abraço à todos.

Código do exemplo aqui.