Scatenare un PostBack da un evento Javascript con la funzione __doPostBack

Giorgio Borelli

Scatenare un PostBack con la funzione Javascritp __doPostBackJavascript è 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.

Categorie: ASP.NET | html | Javascript

Tags: , ,

Commenti (6) -

Cosimo Meli
Cosimo Meli says:

Ciao, volevo esprimere una mia opinione al riguardo. Intanto ti ringrazio per avermi fatto scoprire il metodo _doPostBack() di cui ignoravo l'esistenza, però trovo la sua utilità molto limitata: utilizzare il classico AJAX (l'oggetto XMLHttpRequest dunque, o JQuery in alternativa) non è più potente e versatile? Perchè dovrei preferire _doPostBack ad XMLHttpRequest?

P.S.: Ti ricordi di me?

Rispondi

Ciao Cosimo,
la tua domanda (opinione) è più che leggittima, e molto pertinente aggiungerei.

Prima e durante la scrittura di questo articolo, nel mio cervello continuava a formularsi sempre la stessa domanda, che è quella che hai posto tu, e mi chiedevo l'utilità di quello che stavo scrivendo. Perchè scrivere di __doPostBack sapendo che avrei potuto sfruttare Ajax, con tutti i vantaggi del caso: evitare il PostBack (completo), evitare il sovraccarico di dati con spreco di banda dovuto sempre al PostBack, perdere le informazioni di stato della pagina, ottimizzare le performance della pagina e migliorare l'esperienza di navigazione utente.
Di sicuro mi son detto sarà un argomento un pò datato, che di certo non affronta le ultime tecnologie e tendenze in ambito di Web Developer.

Ciò nonostante, mi sono deciso a scriverlo ugualmente, per due ragioni, anzi tre.

La prima è legata alla conoscenza, sebbene Ajax consente scenari ben più performanti consentendo il colloquio client-server in maniera asincrona, è pur sempre una "tecnologia" frutto di tecnologie pre-esistenti tra cui in primis Javascript, pertanto conoscerne le basi non può che approfondire e migliorare la conoscenza sia di Javascript che di Ajax stesso, che ricordiamo non è altro che l'acronimo di Asynchronous Javascript And XML (AJAX).

La seconda motivazione è dettata dalla semplicità, non che implementare lo stesso meccanismo in maniera asincrona sia necessariamente difficile, ma quanto meno bisogna conoscere ed implementare le funzioni di CallBack sia server-side che client-side (ricezione dei risultati) tramite l'aiuto della proprietà ClientScript e della classe ClientScriptManager di ASP.NET.

Infine la terza ed ultima motivazione, è dettata da esigenze reali di postback, ci sono scenari infatti, per i quali scatenare un postback completo della pagina è necessario, come quando ad es. si vogliono passare dati da una pagina ad un'altra, dati che poi possiamo recuperare tramite la funzionalità CrossPagePostBack.

Per concludere non posso che concordare con la tua opinione, ad oggi usare un framework come Ajax o Jquery per implementare determinate soluzioni sul web, risulta sicuramente più performante, elegante e "fico" di quanto non facciano i vecchi metodi di scambio dati client-server. Ciò nonostante ritengo che non sia stato inutile scrivere questo articolo, come dici tu stesso sei venuto a conoscenza di una funzione Javascript, la __doPostBack, di cui ignoravi l'esistenza, e questo da solo basta e avanza, ed ovviamente non è una critica al tuo commento, anzi grazie molte per averlo espresso, è stato davvero importante, è servito come spunto per fare un approfondimento, se vuoi aggiungere dell'altro io sono sempre qui.

P.S. dovrei ricordarmi? Sinceramente Cosimo non ricordo, ci siamo per caso conosciuti? Oppure ti riferisci sempre ad un contatto via web, aiutami a rinfrescare la memoria, mi farebbe davvero piacere capire chi sei.

Rispondi

Cosimo Meli
Cosimo Meli says:

Beh...googlando un pò in giro ho potuto vedere che _doPostBack è usato per lo più (anzi forse solo e soltanto) in ASP.Net, quindi per me che "uso" (il mio è solo un hobby) PHP questa funzione decade. Ma dato che ormai ci sono mi manca solo un'informazione al riguardo: _doPostBack per l'invio di dati al server usa il metodo GET, il metodo POST (ad occhio e croce direi che è questo) o altro metodo? In PHP, comunque, se usa POST o GET penso non dovrebbero esserci problemi a ricevere i dati, diversamente non saprei se esiste una variabile superglobale dedicata.
Un'altra osservazione dovuta: una cosa che penso manchi totalmente in questa funzione, che invece l'oggetto XMLHttpRequest implementa dignitosamente, è il controllo dello stato di esecuzione e le informazioni (per mezzo di codici) di eventuali errori o interruzioni. E infine una domanda che mi è appena venuta in mente riguardo AJAX: _doPostBack è sincrona o asincrona?

P.S.: Una sola frase per farmi riconoscere: sono il ragazzo che ha programmato il sistema di allarme a casa tua.

Rispondi

Eilà Cosimo! ma che sorpresa, non mi sarei mai aspettato che fossi un appassionato, mi fà davvero piacere, perchè non me lo dicevi subito.

Veniamo a noi, rispondo subito alle tue domande:
Non so che ricerche hai fatto ma __doPostBack non è legata ne ad ASP.NET ne a PHP o JSP se preferisci, la __doPostBack è implementabile via Javascript quindi puoi usarla con un semplice script anche in una semplice pagina di html puro.

Con il metodo GET passi dati al server Tramite la query string, i dati con le coppie nome=valore vengono aggiunti, attaccati (appended) all'URL dopo il punto interrogativo "?". Mentre il metodo post viene usato solitamente nei form, se vuoi specificare GET anche nei form devi esprimerlo direttamente tramite assegnando alla proprietà method="GET". Il POST a differenza del GET è più sicuro in quanto non visualizza direttamente i dati ma li passa tramite la richiesta http. In questo caso la __doPostBack crea due campi nascosti (hidden) con i valori dei parametri __EVENTTARGET ed __EVENTARGUMENT che vengono rispediti (la pagina) dal server al client tramite POST, quindi è come presupponevi tu.

Cosa intendi che XMLHttpRequest ti consente un maggiore controllo dello stato, si più chiaro, perchè qui rischiamo di entrare proprio nel cuore del ciclo di vita della pagina e forse scendiamo troppo in tecnicismi, e ci sarebbe da scrivere un libro. Invece concordo con un controllo degli errori più completo e snello. Voglio solo aggiungere di fare attenzione però, poichè in alcune versioni di browser più datati l'oggetto XMLHTTP non è supportato, a te le conclusioni.

Per quel che riguarda l'ultima domanda, se __doPostBack è sincrona o asincrona, beh! non avresti dovuta farmela, se mi parli di AJAX e PostBack, dovresti conoscere che proprio Ajax fornisce il vantaggio di far colloquiare in maniera asincrona il browser con il server senza eseguire il postback completo della pagina, implementando così quello che viene chiamato "Partial Rendering", ovviamente il solo Javascript non te lo consente.

Bene Cosimo, credo che questo sia quanto, ti faccio i miei complimenti per la tua passione che noto essere di buon livello, non mi resta che salutarti e invitarti a tornarmi a trovare e commentare quando vuoi. Ciauz!!!

Rispondi

Cosimo Meli
Cosimo Meli says:

Ciao. Hai ragione quella domanda non avrei dovuto farla, era solo delirio notturno; a tal proposito mi pare che il fuso orario del sito sia errato, penso sia impostato su UTC. Con "maggiore controllo dello stato" intendevo dire che AJAX permette di conoscere in qualunque momento lo stato di esecuzione della richiesta e il codice HTTP ricevuto al termine della suddetta, anche in questo caso non avevo considerato che il Post Back causa il refresh della pagina (lo causa giusto? Perchè a tal proposito non sono riuscito a far funzionare il __doPostBack in un mio sito di prova).

Rispondi

Bentornato Cosimo,
vedo che l'argomento ti appassiona, passo allora a rispondere alle tue domande:

Codice HTTP? Forse volevi dire codice HTML, o al massimo richiesta HTTP, credo che tu abbia fatto un pò di confusione, HTTP è un protocollo. Comunque, apparte l'errore che forse è di battitura, perchè insisti con questo controllo dello stato di Ajax, a cosa ti serve in questo caso? Anche con una richiesta classica conosci il codice HTML ricevuto al termine della suddetta. Non serve usare paroloni se poi non ti servono o non sai come usarli.

Certo che la __doPostBack causa un PostBack con conseguente reinvio della pagina, sul fatto che non ti funzioni non saprei dirti, dovrei vedere cosa hai scritto. Attenzione però, non vorrei che mi sono espresso male nel commento precedente, la __doPostBack la puoi implementare anche in PHP, poichè lo fai tramite script Javascript e puoi realizzare così lo stesso effetto, ma non puoi invocarla direttamente come ho fatto io nell'esempio che è relativo ad una pagina aspx (ASP.NET).

Io sono sempre qui, ciao e alla prossima.

P.S. perchè dici che l'orario è sbagliato, da cosa lo rilevi, fammi sapere e ad ogni modo grazie per la segnalazione.

Rispondi

Pingbacks and trackbacks (1)+

Aggiungi Commento

biuquote
Loading