Implementare un Client Callback in ASP.NET 2.0
Il modello tradizionale delle pagine ASP.NET prevede che per eseguire un’elaborazione sul server l’utente debba interagire con la pagina, cliccare ad esempio un pulsante che effettua un postback di richiesta al server. Quest’ultimo esegue il codice associato all’evento rielabora l’intera pagina che verrà interamente “renderizzata” dal client. La natura state-less del protocollo http obbliga gli sviluppatori ASP.NET ad utilizzare la tecnica del ViewState al fine di mantenere lo stato dei controlli ad ogni postback. Il viewstate altro non è che un campo nascosto all’interno della webform dove viene serializzato lo stato dei controlli.
Il sogno di ogni sviluppatore web è evitare questo meccanismo che incrementa i tempi di risposta da parte del server e di conseguenza quelli di attesa da parte dell’utente.Questo è possibile con la nuova versione di ASP.NET 2.0 che mette a disposizione un meccanismo semplice e pronto all’uso per eseguire elaborazioni sul server tramite un Client Callback con la possibilità di riaggiornare solo i controlli interessati dall’elaborazione tramite DHTML.
Tutto questo è reso possibile dall’ActiveX “Msxml2.XMLHTTP.4.0 “ disponibile a partire da Internet Explorer 5.0 e ormai diffuso su tutti i browser di ultima generazione. L’oggetto in questione permette di eseguire una richiesta ad un url ed ottenere una risposta a seguito di una elaborazione. La funzione javascript riportata qui sotto mostra come instanziare l’ActiveX, inviare la richiesta ad una pagina ASP.NET ed ottenere il codice html della pagina come risposta. Il codice in questione non effettua un postback sul server.
|
function UseXMLRequest()
{
var http = new ActiveXObject("Msxml2.XMLHTTP.4.0");
http.Open("GET", "http://localhost/default.aspx, false);
http.Send();
return http.responseText;
}
|
Per chi volesse approfondire l’utilizzo e i metodi disponibili per l’oggetto “Msxml2.XMLHTTP.4.0 “ vi rimando a questo articolo: http://support.microsoft.com/kb/296772
Esempio di implementazione
Tutto questo è stato implementato all’interno di ASP.NET 2.0 tramite l’interfaccia System.Web.UI.ICallbackEventHandler che predispone la nostra pagina web alla ricezione di chiamate callback dal client. La pagina ASP.NET presente nell’esempio allegato implementa questa interfaccia e mostra come effettuare delle interrogazioni su un database visualizzando i risultati in una griglia a seguito di selezioni fatte dall’utente.Iniziamo con l’inserire nella nostra pagina un DropDownList che permette all’utente di effettuare il filtro sulle categorie di prodotti: il controllo è collegato ad una sorgente dati di tipo AccessDataSource e ridefinisce l’evento onchange che chiama una funzione javascript denominata Filter.
|
function Filter()
{
window.status = "Caricamento articoli";
var combo = document.form1.comboCategorie;
var id = combo.options[combo.selectedIndex].value
<%= Page.ClientScript.GetCallbackEventReference(this, "id", "ShowFilter", null) %>
}
|
La funzione in questione implementa del codice inline che richiama
la GetCallbackEventReference , la quale permette di ottenere il riferimento alla funzione WebForm_DoCallback implementata sul client. Il primo parametro identifica il controllo destinatario(la pagina), il secondo è il parametro da passare al server (la categoria selezionata), l’ultimo parametro che utilizziamo identifica la funzione javascript che verrà richiamata a seguito della risposta da parte del server.
In seguito viene riportato il risultato della chiamata alla GetCallbackEventReference:
WebForm_DoCallback('__Page',id,ShowFilter,null,null,false);
L’interfaccia System.Web.UI.ICallbackEventHandler definisce due soli metodi :
void RaiseCallbackEvent (string eventArgument);
string GetCallbackResult();
|
void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
{
DataTable table = DAL.GetProducts(Convert.ToInt32(eventArgument));
this.GridView1.DataSource = table;
this.DataBind();
}
|
Il metodo RaiseCallbackEvent viene evocato a seguito della richiesta di callback da parte del client, il parametro di tipo string altro non è che il parametro passato dal client, nel nostro caso l’identificativo della scelta effettuata sul dropdownlist da parte dell’utente. La pagina richiama il metodo GetProducts() con l’id della categoria prodotti selezionata, quest’ultima effettua l’interrogazione al database ritornando una DataTable con i prodotti che verrà collegato come sorgente dati al controllo GridView.In un secondo momento verrà evocato il metodo GetCallbackResult al fine di restituire al client il risultato dell’elaborazione sul server. E’ necessario notare che per aggiornare la pagina sul client tramite DHTML dobbiamo restituire il codice HTML generato dal controllo GridView, per fare ciò ci viene in soccorso il metodo RenderControl() che tramite un oggetto HtmlTextWriter ci restituisce il codice tenendo conto della formattazione della griglia.
|
string ICallbackEventHandler.GetCallbackResult()
{
using (StringWriter writer = new StringWriter())
{
HtmlTextWriter htmlWriter = new HtmlTextWriter(writer);
this.GridView1.RenderControl(htmlWriter);
return writer.ToString();
}
}
|
A questo punto sul client verrà evocata la funzione javascript ShowFilter, non ci resta che aggiornare il controllo GridView ottenendo il tag div dove per comodità abbiamo collocato la griglia e sostituire il relativo codice html.
|
function ShowFilter(val,context)
{
document.getElementById('gridDiv').innerHTML = val;
window.status = "Caricamento eseguito con successo";
}
|
In conclusione
Con questo semplice esempio è possibile intravedere le reali potenzialità dei Client Callback. La loro implementazione è molto semplice e il loro utilizzo permette di rendere sempre più dinamiche le pagine Web portandole ad essere sempre più simili a delle Form windows..
indietro