ASP.NET Tutorial 5

Espero que tenham acompanhado os guias anteriores e que os tenham percebido, hoje, neste tutorial vou-vos falar de jQUERY – a nova coqueluche para desenvolvimento de aplicações WEB.

O que é?

jQuery é uma biblioteca Open Source de javascript muito leve, rápida, intuitiva e que rapidamente (nasceu em 2006) se tornou numa das mais populares bibliotecas para programar na WEB.

Com esta biblioteca melhoramos e simplificamos de forma significativa a interacção entre Javascript e HTML. Outra das suas grandes vantagens é ser compatível com todos os Browsers existentes.

Em muito menos linhas de código conseguimos obter resultados que em Javascript dariam para preencher várias folhas A4.

Uma das principais características é o facto de podermos encadear comandos.

O slogan é “Write less, do more”.

Selectors?

Como o nome indica servem para seleccionar um elemento da DOM para assim poder ser manipulado.

Existem várias formas de chegar a um elemento:

1. $(document); Procura um objecto DOM (neste caso o document) 2. $(’#mydiv’) Procura um div que tenha o id “mydiv” 3. $(’p.first’) Procura todas as tags < p > com a classe “first”.

jQuery e ASP.NET?

Em 2008 e pela primeira vez a Microsoft adoptou e distribuiu na sua Framework uma biblioteca Open Source. Esta união trouxe grandes benefícios aos developers ASP.NET que assim passam a ter intellisense de jQUERY no Visual Studio e as novas versões do ASP.NET AJAX vão passar a utilizar jQUERY.

Utilização?

Para utilizar a biblioteca basta fazer o download da ultima versão de jQUERY e adicionar o script no header da nossa página:

A sintaxe começa sempre com o símbolo $ (dólar) que é uma função para o objecto jQUERY.

$(document).ready(function()
 {
 alert('Hello World');
 });

$(document).ready() Esta é a função que é chamada quando o documento foi carregado. Tem como argumento uma função anónima (muito utilizado em jQUERY) que é chamada depois de carregar o documento

$("div").css("border","9px solid red"); Nesta função procuramos todos os div aplicamos um estilo em que a border ficará com a cor vermelha.

$("#myDiv").css("border","3px solid red"); Nesta função procuramos um div com o id “myDiv” e aplicamos um estilo em que a border ficará com a cor vermelha.

PageMethods por jQUERY:

Code-Behind:

public partial class _Default : Page
{
[WebMethod]
public static string GetDate()
{
return DateTime.Now.ToString();
}
}

jQUERY:

$.ajax({
type: "POST",
url: "Default.aspx/GetDate",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert(msg.d);
}
});

WebServices por jQUERY:

$.ajax({
type: "POST",
url: "NomeWebService.asmx/método",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert(msg.d);
}
});

O funcionamento é igual a um PageMethod a única diferença é no url, em que colocamos o nome do webservice e o método ao invés do nome da página e o método.

Conclusão:

Depois de muitos anos no esquecimento o código do lado do cliente voltou em grande força, sendo um dos grandes impulsionadores o Ajax. Desde o seu regresso muitos criaram formas de melhorar a escrita de código em Javascript mas o jQUERY é de longe a melhor biblioteca para desenvolver, fácil, intuitiva, prática e muito poderosa esta biblioteca vai ajudar-nos a criar sites muito dinâmicos. A inclusão na Framework .NET vem a facilitar ainda mais a sua utilização.

Por hoje é tudo, para a semana iremos começar a desenvolver o nosso site para um clube de vídeo.

Links: jQUERY and Microsoft Homepage: jQUERY