Nel precedente tip è stato mostrato come dialogare con il server tramite un semplice webservice asmx. Sebbene questo modo di procedere sia molto intuitivo, comporta spesso un overhead causato dal file javascript generato dal server per permettere la chiamata del servizio. Nel precedente esempio infatti potete vedere, come oltre ai normali script, venga restituito al client il file http://localhost:21963/MyService.asmx/js che contiene tutto il codice per permettere l’invocazione del webservice.
jQuery mette a disposizione modi molto più intelligenti di dialogare con il server, in particolare la funzione getJSON che permette di effettuare una chiamata ad una url che restituisce i dati in formato json. Se controllate nel sorgente potrete vedere nella cartella tip4, una pagina aspx chiamata Servicepage.aspx il cui codice è veramente semplice.
public partial class ServicePage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
Response.Write(serializer.Serialize(Membership.GetUser()));
Response.End();
}
}Come potete notare grazie alla classe JavaScriptSerializer è possibile restituire al chiamante un qualsiasi oggetto (in questo caso il MembershipUser) in formato json. Se chiamate direttamente la pagina potete infatti osservare cosa viene restituito.
{"UserName":"admin","ProviderUserKey":"5f7b1fdb-0322-4cab-96d8-c1c3771f414d","Email":"a@nablasoft.com"
,"PasswordQuestion":null,"Comment":null,"IsApproved":true,"IsLockedOut":false,"LastLockoutDate":"\/Date
(-6816268800000)\/","CreationDate":"\/Date(1242062048000)\/","LastLoginDate":"\/Date(1242470020860)\
/","LastActivityDate":"\/Date(1242470194907)\/","LastPasswordChangedDate":"\/Date(1242062048000)\/","IsOnline"
:true,"ProviderName":"SqlProvider"}Sebbene questa stringa sia di difficile lettura, è semplicemente la serializzazione json dell’oggetto MembershipUser, ecco quindi che nella pagina tip4/auth.aspx basta referenziare lo script scripts/tip4/auth.js che non fa altro che recuperare tramite jQuery tutte le info sull’utente attualmente loggato.
$(function() {
$('.askname').log('button').click(function() {
var button = this;
$.getJSON('/Tip4/ServicePage.aspx', {}, function(result) {
//Here result object has the same properties as MembershipUser
$(button).siblings('.userdata').text(
'UserName:' + result.UserName + ' Email:' + result.Email );
});
});
});Grazie alla getJSON si può invocare una pagina ed impostare come callback, una funzione anonima il cui unico parametro è l’oggetto restituito dalla pagina. L’aspetto importante è che nella callback si accede direttamente alle proprietà dell’oggetto MembershipUser come la result.UserName e result.Email. Tutto questo grazie al fatto che javascript è un linguaggio dinamico ;) e quindi può riscostruire l’oggetto dalla stringa json senza problemi.
Il vantaggio di questo approccio è evitare di passare al client file js inutili e anche in questo caso dato che la pagina che restituisce i dati è una normalissima pagina aspx, potete usare Session, Membership, proteggere la pagina con i ruoli, etc etc.
alk.
Il codice è scaricabile da qui.
Tags: jQuery
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