Microsoft ha annunciato che includerà jQuery in Visual Studio 2010 e potrà essere usato con i framework ASP.Net AJAX e ASP.Net MVC. Ciò significa poter disporre di intellisense, snippets, esempi e documentazione. Inoltre Microsoft sta sviluppando ulteriori controlli e widgets, al fine di rendere più semplice l’utilizzo di jquery nelle applicazioni .NET, anche nella parte server-side.

Sul blog di Scott Guthrie è disponibile una breve presentazione, mentre su quello di Scott Hanselman vi è un tutorial che mostra come usare jQuery con ASP.NET e come funziona ASP.NET AJAX 4.0 Client Template

Con VS 2008 SP1 è stato anticipato un free download, che aggiunge l’intellisense di jQuery a visual studio 2008 SP1. Per abilitare in VS 2008, l’Intellisense per jQuery, occorre eseguire i seguenti tre step:

1. Installare VS 2008 SP1. Aggiunge in Visual Studio, il supporto JavaScript intellisense e il completamento del codice per diverse di librerie JavaScript. Per eseguire il download di VS 2008 SP1 fare click qui
2. Installere VS 2008 Patch KB958502 per il supporto intellisense –vsdoc.js. Quando viene riferita una libreria JavaScript, Visual Studio verifica la presenza di un file opzionale –vsdoc.js. Se è presente usa questo file per alimentare la JavaScript intellisense engine. Per eseguire il download della patch fare click qui
3. Eseguire il Download dei file jQuery-1.3.2-vsdoc.js e jQuery-1.3.2.js Utilizzare questi file per poter disporre sia della libreria, sia del supporto JavaScript intellisense su jQuery. Per eseguire il download collegarsi al sito ufficiale jQuery

Per utilizzare iQuery inserire entrambi i file nel progetto come mostra l’immagine che segue:

E’ possibile riferirsi ad jQuery con lo script html, nel seguente modo:

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

Nello sviluppo di applicazioni web, Asp.Net può essere usato come un guscio in cui è possibile rinchiudere due straordinarie librerie JavaScript cross-browser Ext Framework e jQuery, il cui fine è di fornire un semplice meccanismo per interagire sugli elementi lato Client, in un modo molto simile a Flash o Silverlight. L’aspetto più interessante di queste librerie è che pur essendo in esecuzione sul lato client possono facilmente interagire con qualsiasi linguaggio lato server.
Queste due librerie possono essere downloaded ai seguenti indirizzi:

• Ext Framework SDK: http://extjs.com/products/extjs/download.php
• jQuery: http://docs.jQuery.com/Downloading_jQuery

Sono librerie object oriented, in quanto ogni metodo può restituire un oggetto che può essere concatenato con altri oggetti. Entrambe le librerie utilizzano il meccanismo document ready, in modo da assicurare che tutti gli elementi della pagina sono già stati inizializzati, prima di iniziare qualsiasi tipo di elaborazione. Inoltre, l’uso di queste librerie elimina i comuni problemi associati con DHTML e il cross browser integration.

L’elemento più importante di JavaScript è l’oggetto document, in quanto rappresenta il nodo centrale del Document Object Model (o DOM), il cui fine è di indicare il modo in cui i programmi JavaScript possono accedere alla struttura di un documento HTML o XML, per interrogarlo ed eventualmente per modificarlo. Ciò consente di rendere interattivi i documenti web che diversamente sarebbero statici.

L’oggetto document comprende diverse proprietà che si riferiscono ad array di oggetti, su cui i programmi javascript possono operare. Un esempio di array è images[] che contiene tutti gli oggetti che rappresentano le immagini del documento. In generale, ad ogni elemento di un documento corrisponde un oggetto memorizzato nel corrispondente array, che può essere riferito mediante un indice numerico oppure mediante un identificatore.

Un documento statico, per trasformarsi in interattivo, deve comprendere elementi in grado di rispondere ad eventi generati dall’utente. La gestione degli eventi consiste nell’associare ad un elemento della pagina, una o più azioni definite dall’utente, che devono essere eseguita al verificarsi di un determinato evento. Nelle funzioni associate agli eventi è possibile ottenere il riferimento all’oggetto su cui l’handler è in esecuzione, mediante la parola riservata this. Alcuni esempi di Event Handling sono onClick, onMouseOver, ecc.

Esistono diversi modi per gestire gli eventi, tuttavia i principali sono:

• gestione mediante codice di markup in cui gli Event Handling sono definiti mediante attributi degli elementi HTML, i cui valori vengono assegnati sotto forma di stringa, contente codice javascript. E’ questa la modalità più diffusa ed ha la seguente forma

          <input type="button" value="Hello" onclick="alert('Hello IDEA');" />

• gestione mediante codice JavaScript

<input type="button" value="HelloIdea" id="btnName" />
<script type="text/javascript">
document.getElementById("btnName").onclick = function()
{
    alert("Hello IDEAsoftware!");
}
</script>

Le caratteristiche fondamentali di jQuery possono essere sintetizzate nel simbolo $ e nella possibilità di concatenamento degli elementi, in quanto le funzioni jQuery ritornano lo stesso oggetto dal quale sono state attivate. Infatti, la funzione $() generalmente ritorna una serie di object, come risultato di una sequenza di operazioni, Per comprendere questo meccanismo, consideriamo i due seguenti esempi:

Nel primo esempio, supponiamo di voler modificare alcuni attributi di un tag html, mediante il seguente codice:

$("a").css("color", "navy");
$("a").css("width", "100px");
$("a").bind("click", "EventHandler");

questo codice può essere scritto anche nel seguente modo:

$("a").css({ color: "navy", width: "100px" }).bind( "click", EventHandler );

Nel secondo esempio, supponiamo di eseguire una elaborazione più articolata:

$("div.articolo").add("p.intro").html("introduzione"). fadeOut();

Questa lunga frase jQuery rappresenta una sequenza di funzioni separate dal carattere punto “.” il cui significato è il seguente: $ è sinonimo di jQuery, cioè segnala che sarà attivato jQuery, al fine di eseguire una sequenza di operazioni, che in questo esempio sono:

• individuare i div la cui classa name è articolo
• inserire un paragrafo p con la classa name intro
• aggiungere al paragrafo il testo introduzione
• eseguire le operazioni indicate nel metodo predefinito fadeout()

Per realizzare questo suo modello jQuery utilizza una delle caratteristiche più interessanti del DOM (Documento Object Model) i selectors, il cui fine è di consentire di selezionare un elemento nella struttura ad albero del DOM, in modo da poterlo manipolare, cioè applicare effetti o animazioni. Ciò significa, che conoscere come i CSS agiscono sugli elementi (x)html, vuol dire aver capito come i selectors di jQuery operano, in quanto usano la medesima sintassi.
jQuery, con i selectors e le loro concatenazioni, offre diversi modi per selezionare gli elementi (x)html. Per esempio se si desidera nascondere tutte le immagini la cui classa name è option è sufficiente scrivere la seguente istruzione:

$(‘img.option’).hide();

Quindi i selettori sono utilizzati per ottenere elementi della pagina, sotto forma di array di oggetti jQuery, mediante la selezione in base

• al suo Id, per esempio $('div#myId');
• alla sua classe, per esempio $('.myclass');
• alla sua posizione gerarchica, mediante le parole riservate: ancestor, sibling, prev, ecc.
• ai selettori posizionali, per esempio $(‘p:first);
• all’attributo o contenuti :contain, :has, :hidden, ecc.

Un elenco completo dei selettori è disponibile sul sito ufficiale di jQuery all’indirizzo:

http://docs.jquery.com/Selectors

Un programma che utilizza jquery ha la seguente struttura:

$(document).ready(function() {
      // inserire il codice jquery.
});

La funzione $(document).ready() garantisce che il codice jquery è attivato dopo che il DOM è stato inizializzato e prima che venga caricato il contenuto della pagina. Inoltre consente di inserire il codice jquery in un file separato rispetto al codice di markup e di poter disporre di tutti gli eventi prima del caricamento della pagina. Infatti tutto il codice inserito fra le parentisi graffe è disponibile subito dopo che il DOM è stato registrato dal browser.
L’esempio che segue visualizza semplicemente una Messagebox. E’ il minimo codice che occorre scrivere per usare jQuery e comprende:

• jquery-1.3.2-vsdoc.js, rende disponibile in VS 2008 SP1, l’intellisense per jQuery
• jquery-1.3.2.js, file in cui è contenuto jquery
• $(document).ready, funzione in cui inserire il codice jQuery

L’utilizzo del metodo ready() consente di eseguire tutto il codice compreso fra le parentesi graffe subito dopo che il DOM è stato registrato dal browser, in modo da poter associare i diversi eventi agli elementi contenuti nella pagina. Inoltre consente di evitare di dover inserire istruzioni javascript nei tag html, come ad esempio, mediante l’assegnamento di un valore all’attributo onload del tag .

<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title>IDEAsoftware jQuery Tutorial</title>
    <link href='StyleSheet.css' rel='stylesheet' type='text/css' />
    <script src='jquery-1.3.2-vsdoc.js' type='text/javascript'></script>
    <script src='jquery-1.3.2.js' type='text/javascript'></script>

    <script type='text/javascript'>
        $(document).ready(function() {
            alert('IDEAsoftware jQuery Tutorial');
        });
    </script>
</head>
<body>
</body>
</html>

E’ importante che la sequenza di definizione relativa ai fogli stile, jquery, ecc sia quella indicata nel precedente esempio. Quindi, occorre prima inserire le definizioni relative ai fogli di stile, poi il file vsdoc.js utilizzato da intellisense, quindi jquery.js ed infine gli script personalizzati. E' possibile inserire tutto il codice jquery, creato dall’utente, in un file separato ed includerlo come un normale blocco di codice javascript.

jQuery ha notevolmente semplificato la gestione degli eventi in javascript. Nella Slide 01 è stato descritto l’evento ready() che si attiva immediatamente dopo che il DOM è stato registrato nel browser. In questa slide vedremo come è possibile associare gli eventi del mouse ad un div e come concatenare fra loro più eventi, lasciando a jQuery il compito di gestirli. La scrittura del codice può essere suddivisa in tre parti:

• definizione dello stile da associare al div

    <style type="text/css">
        .mouse-event { width:170px; padding:30px 30px; 
                              color:White; background-color:Navy; }
    </style>

• definizione dell’elemento div a cui viene associato la classe dello stile mouse-event.

<div classa="mouse-event">IDEAsoftware</div>

• definizione del codice jQuery relativo agli eventi del mouse da associare al div. Nell’esempio si può notare che il nome dello stile ".mouse-event" è considerato da jquery un oggetto a cui vengono applicati gli eventi mouseout e mouseover.

<script type="text/javascript">
      $(document).ready(function() {
            $(".mouse-event").mouseout(function() {
                  $(this).text("IDEAsoftware Mouse Out");
                      $(this).fadeTo('normal', 1);
             }).mouseover(function() {
                  $(this).text("IDEAsoftware Mouse Over").fadeTo('normal', 0.5);
             });
      });
</script>

Un programma jquery inizia con il simbolo del dollaro $, seguito da una coppia di parentesi tonde che comprende cosa jquery deve cercare nel documento. La chiusura della parentesi tonda è seguita da un punto che precede il nome dell’evento/metodo da applicare all’oggetto della ricerca. Infine vi è il codice che sarà eseguito quando si verificherà l’evento o quando sarà attivato il metodo. Il codice mostra che un metodo (per esempio fadeTo, che modifica l’opacità) può essere concatenato al metodo che lo precede oppure può essere attivato mediante il riferimento this.

 

Interazione con aspnet.
L’aspetto più interessante di jQuery è che pur essendo in esecuzione sul lato client, può interagire con i linguaggi lato server. In questa slider viene utilizzato l’Event Model di Jquery per introdurre un valore di default in un controllo server inserito in un web form. La scrittura del codice si suddivide in due parti:

• Definizione di un controllo lato server, per esempio un TextBox

            <asp:TextBox ID="tDate" runat="server" />

• Definizione dell’Event Handler jQuery

    <script type="text/javascript">
        $(document).ready(function() {
            $('#tDate').bind('dblclick', function(event) {
                 GetDefaultDate()})
            });
        
        function GetDefaultDate() {
            var d = new Date();
            var day = d.getDate();
            var month = d.getMonth() + 1;
            var year = d.getFullYear();
            $('#tDate').val(day + "-" + month + "-" + year);
        }
    </script>

jQuery consente quindi di associare un Event Handler ad un elemento in modo dinamico mediante il metodo bind(). Nell’esempio, un doppio click sul controllo server tDate attiva la funzione GetDefaultDate() che scrive nel control la data corrente. In questo caso l’elaborazione non ha prodotto traffico verso il web server in quanto l’evento è stato gestito sul client.

Binding ai tag Html
Per associare un evento Javascript ad una immagine, si scrive il seguente codice di markup:

<img id='LogoIdea' alt='' src=’logo.jpg’ onclick=’EventOnClick’ />
<script type="text/javascript">
        function EventOnClick()  {
              alert('IDEAsoftware');
        }
</script>

E’ anche possibile associare lo stesso Evento a tutti i tag img, specificando semplicemente il nome.
               $('img’).bind('click', function(event) { EventOnClick() })

Utilizzando il metodo unbind() è possibile rimuove l’Even Handler dall’elemento