Javascript è un linguaggio di scripting lato client che ha permesso di fare un grosso passo in avanti nell'evoluzione delle pagine web, consentendo di passare dai semplici e spartani siti statici in puro html, a siti web dinamici ed interattivi, migliorando così l'esperienza di navigazione dell'utente rendendola anche più user friendly.
Ciò nonostante, essendo per l'appunto un linguaggio lato client, ovvero viene eseguito dal browser (il client) dell'utente, non è in grado d'interagire con il server e con i linguaggi lato server quali ad esempio ASP.NET, a meno di non usare dei trucchi che consentono di "superare" la natura stateless del web, quali ad esempio i cookies. Ci sono casi in cui per uno sviluppatore web risulterebbe davvero comodo, al verificarsi di un evento client side, quale potrebbe essere un comunissimo evento onclick su un link (tag a), poter passare allo scatenarsi di detto evento un valore dal client al server e trattarlo con un linguaggio server side, senza usare i macchinosi e più lenti cookies o altre tecniche simili.
Javascript ci viene in aiuto anche in questo caso, mette infatti a disposizione una funzione in grado di scatenare un PostBack della pagina web al verificarsi dell'evento onclick o di un qualsiasi altro evento client side con Javascript. Questa funzione prende il nome di __doPostBack, andiamo a scoprire nel dettaglio come funziona e quanto può risultare utile se usata correttamente.
Come scatenare un PostBack all'evento onclick di Javascript
Supponiamo di avere un semplice link html, nel quale desideriamo che all'evento onclick si verifichi un PostBack della pagina. In questo caso dobbiamo invocare la funzione __doPostBack all'evento onclick del tag a. Ovviamente dobbiamo inserire nell'head della pagina web lo script Javascript per la funzione __doPostBack, quindi nella pagina avremo il seguente codice:
<head>
..
<script language="javascript" type="text/javascript">
function DoPostBack() {
__doPostBack();
}
</script>
..
</head>
<body>
..
<a href="#anchor-1" onclick="DoPostBack()">Clicca sul Link</a>
..
</body>
Al verificarsi dell'evento onclick del link, viene invocata la funzione DoPostBack presente nello script javascript della sezione head, all'interno dello script a sua volta viene invocata la funzione __doPostBack che scatena il PostBack della pagina, provare per credere.
Passare dei valori alla funzione __doPostBack per consentire una comunicazione tra client e server
Il solo verificarsi del PostBack potrebbe non bastare, nella stragrande maggioranza dei casi l'esigenza è quella di consentire una comunicazione, passare un valore, tra client e server al verificarsi dell'evento onclick, non di meno è importante capire anche lato server qual'è il controllo che ha scatenato il PostBack.
La funzione Javascript __doPostBack ci viene in aiuto anche in questo caso; __doPostBack accetta infatti due parametri: __EVENTTARGET ed __EVENTARGUMENT.
-
__EVENTTARGET: è il primo parametro della funzione __doPostBack ed identifica il controllo (è l'ID) che ha scatenato l'evento
-
__EVENTARGUMENT: il secondo parametro di __doPostBack può essere un qualsivoglia valore che passiamo dal client al server
Quindi il codice della nostra pagina html può essere modificato in:
<head>
..
<script language="javascript" type="text/javascript">
function DoPostBack(myId, myArgument){
__doPostBack(myId, myArgument);
}
</script>
..
</head>
<body>
..
<a href="#anchor-1" id="MyLinkId" onclick="DoPostBack('MyLinkId', 'MyArgument')">Clicca sul Link</a>
..
</body>
Come vedete, questa volta, all'evenot onclick alla funzione DoPostBack vengono passati due parametri 'MyLinkId' che è l'id del controllo, e ''MyArgument" che può essere un qualsiasi valore (in questo caso una stringa) che desideriamo passare per trattarlo successivamente lato server. Nello script vengono ricevuti questi parametri nelle variabili omonime, che in questo caso essendo Javascript non tipizzato vengono convertite automaticamente in stringhe e __doPostBack sarà invocata con i parametri associati. __doPostBack non solo scatenerà il PostBack della pagina ma inserirà nel suo codice due campi nascosti (hidden) contenenti i valori dei parametri __EVENTTARGET ed __EVENTARGUMENT, i quali potranno essere comodamente usati lato server.
Recuperare i paramentri passati della funzione __doPostBack lato server
Una volta che __doPostBack ha svolto il suo lavoro, i valori dei suoi due parametri, il nome del controllo che ha scatenato l'evento ed un valore associato, si rendono disponibili per essere catturati e trattati server side. Come fare però? Beh, davvero semplice, dobbiamo usare un linguaggio lato server, io per l'esempio mi riferisco ad ASP.NET con C# che è il linguaggio che prediligo ma potete usare anche PHP, JSP o quello che preferite.
Poniamoci quindi nel codebehind della pagina aspx, e più precisamente nell'evento Page_Load (potete sfruttarlo anche in altri eventi), e per catturare i parametri della __DoPostBack li andiamo a cercare nella collection dei parametri della richiesta, indicando come Key per l'indice proprio i nomi dei paramentri, in C# scriveremo quindi:
protected void Page_Load(object sender, EventArgs e)
{
string passedTargetId = string.Empty;
string passedArgument = string.Empty;
if (Page.IsPostBack)
{
passedTargetId = Request.Params.Get("__EVENTTARGET");
passedArgument = Request.Params.Get("__EVENTARGUMENT");
}
}
Tramite Request.Params.Get("Key") possiamo recuperare sia __EVENTTARGET e sapere qual'è il controllo che ha scatenato l'evento, e sia __EVENTARGUMENT acquisendo il valore passato dal client al server. Una volta acquisiti i due parametri possiamo farne ciò che vogliamo. Nel codice C# ho aggiunto un controllo "if(Page.IsPostBack)" per ottimizzare il codice ed evitare ricerche ed assegnazioni inutili nel caso in cui la richiesta della pagina non sia originata da un PostBack.
Conclusioni su __doPostBack e PostBack in ASP.NET
La funzione __doPostBack con i suoi parametri ritorna veramente utile, consentendo di andare al di là dei limiti di Javascript e permettendo così una comunicazione tra un evento lato client ed il server. Bisogna dire per completezza che ASP.NET con i suoi controlli di per sè implementa in modo completo il meccanismo illustrato con la funzione __doPostBack, se prendiamo in considerazione ad es. un LinkButton e gli associamo un evento OnClick, questo automaticamente scatena il postback (il linkbutton è un controllo server side con la proprietà runat="server"), ed è possibile passare sia l'ID del controllo che un qualsivoglia valore, per mezzo delle sue proprietà CommandName e CommandArgument che non sono altro che i corrispondenti parametri __EVENTTARGET ed __EVENTARGUMENT di __doPostBack. Superfluo aggiungere che in caso di DataBinding e/o DataSet la comodità e la potenza messa a disposizione di ASP.NET in questo contesto risulta davvero utile ed efficace.
Chiunque voglia aggiungere qualcosa o chiedere ulteriori chiarimenti su Scatenare un PostBack all'evento onclick Javascript con __doPostBack può farlo liberamente tramite i commenti, ogni vostro contributo alla discussione sarà ben accetto.