ASP .NET - Apresentando JQuery - 'Escreva menos faça mais'

Você já ouviu falar sobre JQuery ? Ainda não !!!!

Pois este artigo vai lhe apresentar esta fantástica library e como você pode usar este recurso com ASP .NET.

JQuery é uma livraria JavaScript rápida e leve que esta em conformidade com o CSS1-CCS2 e CCS3 e dá suporte a muitos navegadores. O Framework JQuery é extensível(através de plug-ins) e efetua de forma elegante manipulações DOM , CSS, AJAX, eventos e animações, permitindo assim desenvolver aplicações para web de forma mais rápida e simples.

Um script JQuery típico usa uma variedade de métodos que a library JQuery oferece: seletores, manipulação do DOM, tratamento de eventos, etc.

DOM (Document Object Model - Modelo de Objetos de Documentos) é uma especificação da W3C, independente de plataforma e linguagem, onde pode-se dinamicamente alterar e editar a estrutura, conteúdo e estilo de um documento eletrônico. Ou seja, permitindo que o documento seja mais tarde processado e os resultados desse processamento sejam incorporados de volta no próprio documento.

A API DOM oferece uma maneira padrão de se acessar os elementos de um documento, além de se poder trabalhar com cada um desses elementos separadamente, e por esses motivos criar páginas altamente dinâmicas.

(fonte: http://pt.wikipedia.org/wiki/Modelo_de_Objeto_de_Documentos)

Mas qual a diferença entre JavaScript e JQuery ??

JavaScript é uma linguagem e JQuery é uma livraria escrita usando JavaScript.

A versão atual do JQuery é a versão 1.3.2 que você pode baixar neste link: jquery-1.3.2.min.js

Existem indicações de que a Microsoft planeja disponibilizar o JQuery junto com as futuras novas versões do Visual Studio.

No momento a Microsoft disponibilizou um arquivo para permitir o suporte ao recurso do Intellisense ao JQuery no Visual Studio 2008. Pegue o arquivo aqui :jquery-1.2.6-vsdoc.js

Além disso a Microsoft também disponibilizou um hotfix para suportar todos os arquivos JavaScript incluindo o intellisense para o VS 2008 SP1. Faça o download do hotfix aqui : KB958502-JScript Editor support for “-vsdoc.js” IntelliSense documentation files

Então para poder usar o JQuery com aplicações ASP .NET temos que ter instalados os seguintes recursos:

  1. A versão atual do JQuery - jquery-1.3.2.min.js;
  2. A jQuery VS 2008 IntelliSense documentation : jquery-1.2.6-vsdoc.js;
  3. O hotfix que dá suporte ao intelliSense no VS 2008 SP1 - KB958502-JScript Editor support for “-vsdoc.js” IntelliSense documentation files

Conceitos bem básicos sobre o JQuery

A seguir vou apresentar conceitos básicos sobre o JQuery compilados dos links citados nas referências deste artigo. Naturalmente você vai precisar ter noções de JavaScript.

Para entender melhor JQuery é bom que você tenha noções sobre seletores usados na CSS. Abaixo um pontapé inicial para você correr atrás:

Um seletor CSS é uma declaração em um formato que "casa" com todos os elementos que sigam aquele formato na árvore do documento. Quando todas as condições estabelecidas no formato da declaração são satisfeitas o seletor "casa" com o elemento (ou elementos) no documento e as regras escritas no seletor são aplicadas. Considere a regra CSS  escrita a seguir:

  1. p { color:#f00; }

O seletor é a parte da regra CSS que está antes do sinal “{“ (chave de abertura). O seletor aqui é p, que "casa" com todos os elementos p do documento e faz com que qualquer texto dentro de um parágrafo seja na cor vermelha.

Para detalhes veja os seletores CSS 2.1 (baseada nas especificações CSS 2.1, 5.1 Pattern matching):

(fonte: http://maujor.com/tutorial/seletores_css21_parte1.php)

Primeiro vamos montar o seu ambiente para poder seguir os exemplos dados a seguir.

Após baixar o JQuery no link indicado acima você terá um arquivo com extensão .js e 118 Kb de tamanho. Eu alterei o nome do arquivo para jquery-1.3.2.js mas você pode usar o nome que desejar sem alterar a extensão .js.

Crie uma pasta na sua máquina local com um nome pertinente ao assunto. Eu criei uma pasta chamada JQuery: c:\JQuery.

A seguir copie o arquivo da biblioteca JQuery, no meu caso o arquivo será : jquery-1.3.2.js

Neste momento você deverá ter no seu sistema de arquivos a pasta C:\JQuery contendo o arquivo jquery-1.3.2.js conforme a figura abaixo:

Abra o bloco de notas ou um editor de sua preferência (Eu estou usando o NotePad++) e digite o seguinte código e salve o arquivo com o nome

O código JQuery irá ser executado logo após o carregamento da página exibindo uma janela de alerta com a mensagem: pagina HTML carregada conforme figura abaixo.

O código JavaScript equivalente poderia ser o seguinte:

window.onload = function(){ alert("pagina HTML carregada"); }

A diferença básica é que não nos preocupamos em manipular o evento onload da página.

Vamos agora criar usar o famoso exemplo "Olá Mundo" usando JQuery.

O JQuery trabalha lendo ou manipulando um modelo de objeto de documento: o DOM. Então, quando começamos a usar o JQuery precisamos verificar se estamos adicionando eventos tão logo o DOM esteja pronto para ser usado.

Fazemos isso registrando o evento ready(pronto) para o documento da seguinte forma:

$(document).ready (function() {
     //faça algo quando o DOM estiver pronto
});

Vamos criar um novo arquivo html usando o seguinte código:

Declaramos a função Ready e criamos uma função Click de forma que o alert será exibido assim que o usuário clicar no link da página. Conforme a figura abaixo:

Mas o que significa $("a") ?

JQuery trabalha com seletores,  e $("a") é um seletor do JQuery que seleciona todos os elementos a, onde símbolo $ é um alias para a 'classe' JQuery, e $() constrói um novo objeto JQuery.

A função Click chamada em seguida é um método do objeto JQuery que liga o evento clicar a todos os elementos selecionados (o elemento a), e, executa a função fornecida quando o evento ocorre.

Em javascript o código similar seria : <a href="#" onclick="alert("Olá Mundo")>Clique aqui para testar ALo Mundo</a>

(trecho adaptado de uma tradução de Carlos Pires)

Então porque usar JQuery ao invés de JavaScript ?

Se você gasta boa parte da sua tarefa de desenvolvimento tentando adicionar conteúdo dinâmico as suas páginas deve ter percebido que você constantemente lida com padrões de seleção de elementos ou grupo de elementos para efetuar operações entre eles.

A linguagem JavaScript permite que você faça esta tarefa mas através de muitas linhas de código. O JQuery tem o objetivo de fornecer uma library que permite realizar as tarefas mais comuns com poucas linhas de código.

Para conseguir um efeito zebrado em uma tabela usando JavaScript você vai ter que usar no mínimo umas 10 linhas de código; usando JQuery você só precisa usar uma linha de código : $("table tr:nth-child(even)").addClass("striped");

A princípio o código pode parecer estranho e indecifrável, mas com algumas horas de estudo você vai compreender como usar os recursos básicos do JQuery tornando assim a sua vida de desenvolvedor web mais fácil pois...

Usando JQuery com o Visual Studio 2008 SP1

Antes de começar é bom lembrar que você deve estar usando o Visual Studio 2008 com service pack 1 e ter aplicado o hotfix instalando o arquivo disponibilizado pela Microsoft de forma que você não vai precisar referenciar manualmente o arquivo jquery-1.2.6-vsdoc.js em sua página, pois a referência já foi incluída, e, o VS 2008 irá procurar automaticamente pelo arquivo vsdoc carregando-o.

Abra o Visual Studio 2008 e no menu File escolha New Web Site e em Templates selecione ASP .NET Web Site; escolha a linguagem VB (pode ser C#) e informe o nome JqueryDemo e clique em OK;

Na janela Solution explorer clique com o botão direito sobre o nome do web site e selecione New Folder e informe o nome Scripts para o folder;

Agora clique com o botão direito do mouse sobre a pasta Scripts e selecione Add Existing Item e localize onde você copiou o arquivos da JQuery e o arquivo que da suporte ao Intellisense, selecione-os e clique em Add para incluí-los na pasta Scripts;

Agora selecione o arquivo jquery-1.3.2.js e arraste-o para a sua página para criar uma referência ao arquivo conforme abaixo:

Vamos testar primeiro a Intellisense incluindo um bloco <script> e a chave $ seguida de parentesis : $(.

Se tudo estiver corretamente configurado você deverá ver o Intellisense do JQuery no VS 2008 similar ao mostrado na figura abaixo evidenciado que a referência e a localização da biblioteca JQuery estão corretas.

Já que estamos com o ambiente ajustado vou mostrar alguns exemplos de uso do JQuery em páginas ASP .NET.

Usando JQuery : exemplos básicos

1- Exibindo uma aviso em um evento Click de um controle Button

Ainda usando o web site JqueryDemo criado anteriormente abra a página Default.aspx e inclua um controle Button;

<asp:Button ID="Button1" runat="server" Text="Clique aqui para usar JQuery" />

A seguir defina o script JQuery abaixo na mesma página:

<script type="text/javascript">
        $(document).ready(function() {
             $("#Button1").click(function() {
                alert("Meur primeiro exemplo usando JQuery com ASP .NET !");
             });
        });
 </script>

O código completo da página deve estar assim:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#Button1").click(function() {
                alert("Meu primeiro exemplo usando JQuery com ASP .NET!");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Clique aqui para usar JQuery" />     
    </div>
    </form>
</body>
</html>

Visualizando a página iremos obter:

2-  Obtendo a hora do Servidor

Ainda usando o projeto JqueryDemo criado acima vamos obter a hora do servidor usando JQuery.

Inclua um novo formulário web via menu WebSite -> Add New Item, selecionando o Template Web Form e informando o nome HoraServidor.aspx;

A seguir inclua a referência a biblioteca JQuery nesta página:  <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

Inclua uma linha usando um comando <href> conforme abaixo:

<a href="#" id="exemplo1">Obter a Hora do Servidor</a>

Agora inclua o script JQuery que irá realizar a tarefa desejada:

<script type="text/javascript">
    $(function() {
       //este codigo é executado quando o evento onload da pagina é ativado
       $("a#exemplo1").click(function() {
         $.get("getHora.aspx", function(response) {
            alert(response);
         });
      });
   });
</script>

O código completo da página deverá estar assim:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="HoraServidor.aspx.vb" Inherits="HoraServidor" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Obtendo a hora do servidor</title>
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
       //este codigo é executado quando o evento onload da pagina é ativado
       $("a#exemplo1").click(function() {
         $.get("getHora.aspx", function(response) {
            alert(response);
         });
      });
   });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a href="#" id="exemplo1">Obter a Hora do Servidor</a>
    </div>
    </form>
</body>
</html>

 

Agora precisamos incluir um novo formulário web chamado getHora.aspx a partir do menu WebSite-> Add New Item;

Podemos remover todo o código HTML do formulário deixando apenas a primeira linha da página:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="getHora.aspx.vb" Inherits="getHora" %>

Em seguida vamos incluir o seguinte código no evento Load da página getHora.aspx:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

   Response.Expires = -1

   'Requerido para manter a p gina no cache do navegador

   Response.ContentType = "text/plain"

   Response.Write(DateTime.Now.ToString())

   Response.End()

End Sub

Executando o web site após definir a página HoraServidor.aspx como a página inicial. (Clique sobre a página com o botão direito e selecione : Set As Start Page.). Após o usuário clicar no link teremos:

A linha de código  Response.Expires = -1 é essencial pois uma chamada Response de um "GET" fica em cache por padrão, então para obter a hora atualizada quando o link for clicado usamos este código.

3-  Usando animação com JQuery   

Vamos usar um efeito de animação de um controle Panel usando o evento Click de um controle Button.

Inclua uma nova página no web site JqueryDemo chamada Default2.aspx e inclua a referência a biblioteca JQuery;

<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

A seguir inclua um HTML Button e um controle Panel na página conforme mostrada abaixo:

A seguir vamos incluir o script JQuery na página usando o código abaixo:

    <script type="text/javascript">
        $(document).ready(function() {
            $("#btnAnimacao").click(function() {
                $("#Panel1").animate(
            {
                width: "550px",
                opacity: 0.5,
                fontSize: "20px"
            }, 2500);
            });
        });
 </script>

Estamos usando a função animate que atua alterando as propriedades da  largura, opacidade e fonte quando o botão for clicado. O valor 2500 representa o número de milisegundos para rodar a animação.

Executando o projeto teremos:

Com isso creio que você já teve uma boa noção sobre JQuery e como ela facilita o desenvolvimento com JavaScript; se realmente o assunto lhe interessar sugiro que aprofunde os seus estudos sobre o assunto usando como ponto de partida as referências abaixo.

Pretendo também publicar mais artigos sobre a utilização do JQuery com ASP .NET.

Pegue o projeto completo aqui : JqueryDemo.zip

Até breve.

Referências:

José Carlos Macoratti