Asp.Net e Jquery - le basi

Un framework che non può mancare nello sviluppare applicazioni web è Jquery.

Per chi non lo conoscesse si sta parlando di una libreria Java-Script molto potente e versatile, capace di manipolare con facilità tutti gli elementi del DOM di una pagina web.

Tramite una serie di articoli (questo e futuri) vorrei mostrarvi come riuscire a manipolare oggetti e controlli Asp.Net tramite Jquery e viceversa, cosa che può sembrare anche banale se si pensa ad una semplice pagina web, ma che diventa più complessa se si parla di pagine dinamiche compilate lato server.

Come caricare Jquery in una pagina Asp.net

 Per caricare la libreria Jquery all'interno della nostra pagina web, prima di tutto dobbiamo scaricare l'ultima release dal sito ufficiale: http://docs.jquery.com/Downloading_jQuery#Current_Release (vi consiglio di scaricare l'ultima release per rimanere aggiornati). Vedrete che potete scaricare la versione full o minified, la differenza tra le due versioni è semplice: una è più pesante e comprende funzioni di debugging, l'altra è più leggere ed è quella che dovrà risiedere all'interno della pagina una volta on-line.

Ora basta incorporare la libreria all'interno della pagina come un semplice file Java-Script.

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

Fare interagire i controlli Asp.Net con Jquery

Tanto per comprendere, qualsiasi valore passato tramite Java-Script ad un controllo Asp.Net, viene perso al momento del post-back. Quindi com'è possibile manipolare i controlli tramite Jquery?

Basta utilizzare i controlli Asp.Net HiddenField. Infatti questi controlli possono modificare il loro contenuto in base a dei valori passati tramite Jquery e ricordarselo anche durante il post-back.
Se proviamo ad inserire un controllo HiddenField ed un controllo Button all'interno di una pagina Asp.Net possiamo capire meglio.

<form id="form1" runat="server">
	<asp:HiddenField ID="valoreCaricato" runat="server" Value="pagina appena caricata" />
	<asp:Button ID="Button1" runat="server" Text="Passa Valore" />
</form>

Ora nell'evento Load della pagina inserire questo codice:

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
	Response.Write(valoreCaricato.Value & "<br><br>")
End Sub

In questo modo la pagina scriverà il valore del campo hiddenField ad ogni su caricamento. Infatti se proviamo a cliccare più volte sul pulsante, la pagina scriverà sempre "pagina appena caricata".

Ora proviamo ad implementare la routine vista sopra in questo modo:

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
	Response.Write(valoreCaricato.Value & "<br><br>")
	Button1.OnClientClick = "javascript:$('#" & valoreCaricato.ClientID & "').val('questo è un postback'); return true;"
End Sub

In questo modo a caricamento completato cambiamo il valore del campo HiddenField e vediamo cosa succede all apressione del pulsante.
Esatto Il valore restituito è cambiato, ma cosa c'è di diverso da un classico post-back? Prima di tutto abbiamo visto come è possibile passare valori ad un campo HiddenField tramite Jquery, secondo pensate alle molteplici soluzioni che si sono aperte in questo modo.

Un esempio con una TextBox e Jquery

Inseriamo nella nostra pagina un controllo HiddenField, un controllo TextBox ed due controlli Button in questo modo:

<form id="form1" runat="server">
	<asp:HiddenField ID="registratore" runat="server" /><br />
	<asp:TextBox ID="TextBox1" runat="server">valore iniziale</asp:TextBox>
	<asp:Button ID="Button1" runat="server" Text="Cambia il testo" /><br /><br />
	<asp:Button ID="Button2" runat="server" Text="Post Back" />
</form>

nell' evento load della pagina inserite questo codice: 

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
	Button1.OnClientClick = "javascript:$('#" & TextBox1.ClientID & "').val('valore modificato'); return false;"
End Sub

praticamente associamo alla proprietà OnClientClick del controllo button una funzione Jquery per modificare il valore della TextBox. Da notare la parte finale della funzione "retutn false;". Infatti ogni volta che associamo una funzione JavaScript ad un controllo Buitton se inseriamo la dicitura return false; verrà eseguito solo il call-back e sarà negato il post-back, mentre al contrario se avessimo scritto "return true;" sarebbe stato eseguito il call-back e subito dopo il post-back..

Ora al controllo Button2 associamo questa routine:

Protected Sub Button2_Click(sender As Object, e As System.EventArgs) Handles Button2.Click
	Response.Write(TextBox1.Text)
End Sub

se proviamo a fare click prima sul Button1 (per eseguire il call-back e cambiare il valore della TextBox) poi sul Button2 (per eseguire un post-back e scrivere a video il valore della TextBox) vedremo che abbiamo manipolato una TextBox tramite Jquery è spedito il suo valore ad una esecuzione di post-back.

Un esempio già scritto degli elementi descritti sopra, potete scaricarlo da qui.

Conclusioni

Ovviamente con questo post, non pretendo di avervi fatto capire tutte le molteplici combinazioni tra Jquery ed Asp.net. Ma spero che di esservi stato utile nel farvi capire quanto, enorme sia, il campo di applicabilità delle due tecnologie.
Prossimamente scriverò altri post, tutti correlati a Jquery ed i controlli Asp.Net e vi assicuro che non vi deluderanno.