La potenza di jQuery risiede principalmente nel rendere semplice manipolare un oggetto complesso come il DOM. La chiave di jQuery è quindi quella di dialogare con il server, invocando operazioni ed aggiornando l’interfaccia, senza effettuare postback ed inviando solamente i dati minimali.
Esistono molti modi per dialogare con il server, ad esempio grazie ad asp.net ajax è semplicissimo invocare una funzione contenuta in un webservice .asmx. Il vantaggio di usare un asmx è che potete direttamente inserirlo nel sito, in questo modo anche la security standard di asp.net vi protegge dall’uso indesiderato. Se ad esempio chiedete il servizio con la richiesta
http://localhost:21963/Login.aspx?ReturnUrl=%2fMyService.asmx
Il server vi chiede correttamente la login perché il servizio è protetto, quindi abbiamo la stessa garanzia di sicurezza di una normale pagina. Supponiamo ora di avere nel servizio la funzione:
[WebService(Namespace = "http://blogs.ugidotnet.org/rgm/jQueryTip/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class MyService : System.Web.Services.WebService
{
[WebMethod]
public string GetLoggedUser()
{
return Membership.GetUser().UserName;
}
}Come vedete non è altro che un webservice standard che può essere chiamato da client grazie all’attributo ScriptService, e l’unica funzione presente recupera l’utente attualmente loggato, a questo punto grazie allo ScriptManager di asp.net ajax si può chiamare questa funzione da javascript , ecco il codice della pagina Auth1.aspx
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/jQuery/jquery-1.3.2.js" />
<asp:ScriptReference Path="~/jQuery/jqueryext.js" />
<asp:ScriptReference Path="~/scripts/Auth1.js" />
</Scripts>
<Services>
<asp:ServiceReference Path="~/MyService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<input type="button" class="askname" value="loggedusername" ></input>
<input type="text" class="askname" ></input>
</div>
</form>
</body>Come si può vedere ci sono solamente due controlli, un bottone ed una texbox, ma sono controlli html, senza attribute runat=”server”, e quindi sono completamente ignorati da asp.net.Ora si vuole creare una funzione che alla pressione del bottone, metta nella textbox il nome dell’utente loggato.
Notate come nello scriptmanager sia stato inserito un riferimento al webservice precedentemente mostrato e sono stati inclusi gli script javascript, i primi due sono la libreria jQuery ed una libreria di estensioni, il terzo è lo script che realizza la logica della pagina.
(function() {
$('.askname').log('button').click(function() {
SampleSite.MyService.GetLoggedUser(
function(result, context, method) {
$(context).siblings('input').val(result);
},
function(error, context, method) {
alert('Exception during the save.');
}, this);
});
});Come si può vedere basta aggiungere un handler click() al bottone, alla pressione dello bottone si chiama quindi il webservice, proprio come se la classe del webservice fosse definita nel javascript (in effetti lo script manager vi genera uno script con tutta la definizione). La chiamata accetta tutti i parametri della funzione originale (in questo caso nessuno), e di seguito tre parametr:, la funzione da chiamare in caso di successo, quella da chiamare in caso di fallimento ed un oggetto che viene ripassato alle precedenti due funzioni nel campo context. In caso di successo non si fa altro che individuare la textbox grazie alla funzione jQuery siblings, e modificarne il contenuto. Come si può vedere il bottone premuto, era stato passato come ultimo parametro alla funzione GetLoggedUser(), per cui lo ritroviamo nel parametro context delle funzioni di callback.
Il codice è contenuto qui.
Alk.
Tags: jQuery asp.net ajax