5. L'appli zione [SimuPaie] – versione 2 – AJAX / ASP.NET

5.1. Introduction

La tecnologia AJAX (Asynchronous Javascript And Xml) riunisce una serie di tecnologie:

• JavaScript: una pagina HTML visualizzata in un browser può contenere codice JavaScript. Questo codice viene eseguito dal browser se l’utente non ha disabilitato l’esecuzione del codice JavaScript sul proprio browser. Questa tecnologia è apparsa sin dagli albori del web e dal 2005 sta riscuotendo un rinnovato interesse grazie a AJAX.
• DOM: Document Object Model. Il codice JavaScript incorporato in una pagina HTML ha accesso al documento sotto forma di un albero di oggetti, il DOM. Ogni elemento del documento (un campo di immissione, un tag <div> con nome, un tag <select>, ecc.) è rappresentato da un nodo dell'albero. Il codice JavaScript può modificare il documento visualizzato modificando il DOM. Ad esempio, può modificare il testo visualizzato in un campo di immissione tramite il nodo del DOM che rappresenta tale campo.

AJAX utilizza JavaScript per effettuare scambi browser/server in background. Per rispondere a un evento, come il clic su un pulsante, il browser eseguirà del codice JavaScript per inviare una richiesta HTTP al server. Tale richiesta conterrà dei parametri che indicano al server cosa deve fare. Il server eseguirà l’azione richiesta. In risposta, invierà al browser un flusso HTTP contenente dati che consentono un aggiornamento parziale della pagina attualmente visualizzata. Tale aggiornamento verrà effettuato tramite il DOM del documento e l’esecuzione del codice JavaScript incorporato nel documento. I dati restituiti dal server possono essere in diversi formati: XML, HTML, JSON, testo non formattato, ...

Il vantaggio di questa tecnologia risiede proprio in questo aggiornamento parziale del documento visualizzato. Ciò significa:

• meno dati scambiati tra il client e il server e quindi una risposta più rapida
• un'interfaccia grafica più fluida da utilizzare, poiché le azioni dell'utente non comportano il ricaricamento completo della pagina.

In una rete intranet in cui gli scambi di rete sono rapidi, AJAX consente di creare applicazioni web con un comportamento simile a quello delle classiche interfacce Windows. È infatti possibile gestire eventi quali il cambiamento di selezione in un elenco e aggiornare immediatamente e parzialmente la pagina per riflettere tale cambiamento. Il fatto che la pagina non venga ricaricata completamente offre all’utente la stessa sensazione di fluidità che prova con le applicazioni Windows. Per le applicazioni Internet, dove i tempi di risposta possono essere lunghi, la tecnologia AJAX rimane utilizzabile, ma la sensazione di fluidità dipende da quella della rete.

La principale difficoltà in AJAX è il linguaggio JavaScript. Creato agli albori del web,

• si rivela poco pratico per la programmazione orientata agli oggetti. Non è, ad esempio, un linguaggio tipizzato. Non si dichiara il tipo dei dati manipolati. Ci si avvicina in questo caso a linguaggi come Perl o PHP.
• Non esiste uno standard accettato da tutti i browser. Ciascuno di essi ha le proprie estensioni “JavaScript” proprietarie, il che fa sì che un codice JavaScript scritto per IE possa non funzionare in Mozilla Firefox e viceversa.
• È difficile da debuggare, poiché i browser non offrono strumenti efficaci per il debug del codice JavaScript che eseguono.

Tutti questi problemi legati a JavaScript hanno fatto sì che fosse poco utilizzato prima dell’arrivo di AJAX. Una volta compreso il vantaggio di eseguire codice JavaScript in background, per inviare richieste HTTP al server web e utilizzare la risposta di quest’ultimo per effettuare, grazie al DOM, un aggiornamento parziale del documento visualizzato, i team di sviluppo si sono messi al lavoro e hanno proposto dei framework che consentono di eseguire il AJAX senza che lo sviluppatore debba scrivere codice JavaScript. A tal fine, sono state scritte librerie JavaScript in grado di adattarsi al browser client. L’inserimento del codice JavaScript nella pagina HTML inviata al browser avviene lato server, secondo tecniche che variano a seconda del framework AJAX utilizzato. Esistono framework Ajax sia per Java, .NET, PHP, Ruby, ... AJAX è integrato in Visual Web Developer 2008.

5.2. Il progetto Visual Web Developer del livello [web-ui-ajax]

La nuova versione si ottiene duplicando quella precedente. Verrà modificata solo la pagina [Default.aspx].

• in [1]: con Esplora risorse si duplica la cartella del progetto [pam-v1-adonet] e le si assegna il nome [pam-v2-adonet-ajax]. Quindi, con Visual Web Developer, si apre il progetto (File / Apri progetto) di questa nuova cartella [2]
• in [3], gli si assegna un nuovo nome

• nelle proprietà del nuovo progetto, si modifica il nome dell’assembly [4] e lo spazio dei nomi predefinito [5].

Fatto ciò, nei file [Default.aspx, Default.aspx.cs, Default.aspx.designer.cs, Global.asax, Global.asax.cs] si sostituisce lo spazio dei nomi [pam_v1] con lo spazio dei nomi [pam_v2] per garantire la coerenza con lo spazio dei nomi predefinito. Ad esempio, [Default.aspx] [6] diventa:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="pam_v2._Default" %>
...

La pagina [Default.aspx] verrà modificata come segue:

• aggiunta di componenti Ajax nel modulo [Default.aspx] (cfr. [2] sopra).
  • 2A: il componente <asp:ScriptManager> è necessario per qualsiasi progetto AJAX
  • 2B: il componente <asp:UpdatePanel> serve a delimitare l’area da aggiornare in seguito a un’azione dell’utente. Questo componente evita il ricaricamento completo della pagina.
  • 2C: il componente <asp:UpdateProgress> serve a visualizzare un testo o un'immagine durante l'aggiornamento per avvisare l'utente, come mostrato di seguito:

• (continua)
  • 2D: un tipo Label denominato LabelHeureLoad che visualizzerà l’ora in cui viene eseguito il gestore dell’evento Load della pagina.
  • 2E: un tipo Label denominato LabelHeureSalaire che visualizzerà l'ora in cui viene eseguito il gestore dell'evento Click sul pulsante [Salaire]. Vogliamo dimostrare che Ajax non ricarica l’intera pagina quando si fa clic sul pulsante [Salaire]. È quanto mostra la schermata precedente, in cui si possono vedere due orari diversi nei due Labels.

La precedente implementazione Ajax del modulo può essere effettuata direttamente nel codice sorgente di [Default.aspx] aggiungendo i tag di estensione Ajax:

...
<body style="text-align: left" bgcolor="#ffccff">
  <h3>
    Feuille de salaire
    <asp:Label ID="LabelHeureLoad" runat="server" BackColor="#C0C000"></asp:Label></h3>
  <hr />
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
    <asp:UpdatePanel runat="server" ID="UpdatePanelPam" UpdateMode="Conditional">
      <ContentTemplate>
        <div>
          <table>
            <tr>
...
            <tr>
              <td>
                <asp:DropDownList ID="ComboBoxEmployes" runat="server">
                </asp:DropDownList></td>
              <td>
                <asp:TextBox ID="TextBoxHeures" runat="server" EnableViewState="False">
                </asp:TextBox></td>
              <td>
                <asp:TextBox ID="TextBoxJours" runat="server" EnableViewState="False">
                </asp:TextBox></td>
              <td>
                <asp:Button ID="ButtonSalaire" runat="server" Text="Salaire" CausesValidation="False" /></td>
                <td>   <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                  <ProgressTemplate>
                    <img src="images/indicator.gif" />
                    <asp:Label ID="Label5" runat="server" BackColor="#FF8000" EnableViewState="False"
                      Text="Calcul en cours. Patientez ...."></asp:Label>
                  </ProgressTemplate>
                </asp:UpdateProgress>
          <asp:Label ID="LabelHeureSalaire" runat="server" BackColor="#C0C000"></asp:Label></td>
            </tr>
            <tr>
...
            </tr>
          </table>
        </div>
        <br />
....
          <table>
            <tr>
              <td>
                Salaire net à payer :
              </td>
              <td align="center" bgcolor="#C0C000" height="20px">
                <asp:Label ID="LabelSN" runat="server" EnableViewState="False"></asp:Label></td>
            </tr>
          </table>
          &nbsp;</asp:Panel>
      </ContentTemplate>
    </asp:UpdatePanel>
  </form>
</body>
</html>

• riga 8: ogni modulo con Ajax deve includere il tag <asp:ScriptManager>. È questo tag che consente l’utilizzo dei nuovi componenti Ajax:

• il tag <asp:ScriptManager> può essere ottenuto facendo doppio clic sul componente [ScriptManager] sopra indicato. È necessario assicurarsi che questo tag sia contenuto all'interno del tag <form> del codice sorgente. L'attributo [EnablePartialRendering= "true "] della riga 8 è assente per impostazione predefinita. Poiché il valore "true" è il suo valore predefinito, non è indispensabile.

• Riga 9: il tag <asp:UpdatePanel> consente di delimitare le aree della pagina che devono essere aggiornate in caso di aggiornamento parziale della pagina. L'attributo [UpdateMode="Conditional"] indica che l'area deve essere aggiornata solo in seguito a un evento AJAX di un componente dell'area. L'altro valore è [UpdateMode="Always"] ed è il valore predefinito. Con questo attributo, l'area UpdatePanel viene aggiornata sistematicamente anche se l'evento Ajax che si è verificato proviene da un componente di un'altra area UpdatePanel. In generale, questo comportamento non è auspicabile.

Il tag <asp:UpdatePanel> ammette due tag figli: <ContentTemplate> e <Triggers>.

• I tag <asp:ContentTemplate>, alle righe 10 e 53, delimitano l'area della pagina da aggiornare parzialmente.
• righe 27-33: un componente Ajax <asp:UpdateProgress> che consente di visualizzare un testo per tutta la durata dell'aggiornamento della pagina. Ad esempio, cliccando sul pulsante [Salaire] si innesca un POST in background. Il browser non visualizza quindi l’icona della clessidra e l’utente potrebbe essere indotto a continuare a utilizzare il modulo. Il tag <asp:UpdateProgress> consente di visualizzare un testo che avvisa che è in corso un aggiornamento della pagina. È anche possibile visualizzare un’immagine. In questo caso, viene visualizzata un’immagine animata (riga 29) insieme a un testo (righe 30-31):

• righe 28-32: il tag <ProgressTemplate> delimita il contenuto che verrà visualizzato per tutta la durata dell'aggiornamento dell'area UpdatePanel in cui si trova il tag UpdateProgress.
• righe 29-31: l'immagine animata e il testo che verranno visualizzati durante l'aggiornamento dell'area UpdatePanel.
• riga 5: l'etichetta LabelHeureLoad viene posizionata all'esterno dell'area AJAX
• riga 34: l'etichetta LabelHeureSalaire viene inserita nell'area gestita tramite AJAX

Il codice della pagina [Default.aspx.cs] viene modificato come segue:

    protected void Page_Load(object sender, System.EventArgs e)
    {
        // ora di ogni caricamento della pagina
        LabelHeureLoad.Text = DateTime.Now.ToString("hh:mm:ss");
        // elaborazione della richiesta iniziale
        if (!IsPostBack)
        {
....
}

• riga 4: aggiornamento dell'ora di caricamento della pagina

   protected void ButtonSalaire_Click(object sender, System.EventArgs e)
    {
        // ora del calcolo dello stipendio
        LabelHeureSalaire.Text = DateTime.Now.ToString("hh:mm:ss");
        // si verificano i dati
....
}

• riga 4: aggiornamento dell'ora di calcolo dello stipendio

Per completare la pagina [Default.aspx], dobbiamo includere l'immagine animata a cui fa riferimento la riga 4 del codice sorgente della pagina:

            <td>
              <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                  <img src="images/indicator.gif" />
                  <asp:Label ID="Label5" runat="server" BackColor="#FF8000" EnableViewState="False"
                    Text="Calcul en cours. Patientez ...."></asp:Label>
                </ProgressTemplate>
              </asp:UpdateProgress>
              <asp:Label ID="LabelHeureSalaire" runat="server" BackColor="#C0C000"></asp:Label>
</td>

Con Esplora risorse di Windows, aggiungiamo il file [images/indicator.gif] alla cartella del progetto [1]:

• in [2], visualizziamo tutti i file del progetto
• in [3], la cartella [images]
• in [4], si include la cartella [images] nel progetto

• in [5], la cartella [images] è stata inclusa nel progetto
• in [6], si nascondono i file che non fanno parte del progetto
• in [7], il nuovo progetto

5.3. Test della soluzione Ajax

Quando si avvia l’esecuzione del progetto (CTRL-F5), si ottiene la seguente pagina:

• in [1], il tempo di caricamento della pagina

Effettuate alcune prove e verificate che il pulsante [Salaire] non provochi il ricaricamento completo della pagina. Lo si può notare dall'ora visualizzata per l'elaborazione del clic sul pulsante [Salaire] [2], che non è la stessa dell'ora di caricamento iniziale della pagina [3]:

Ripetere i test impostando la proprietà EnablePartialRendering del componente ScriptManager1 su False:

Verificare che in questo caso si osservi il comportamento di una pagina non basata su AJAX. Quando si fa clic sul pulsante [Salaire], la pagina viene ricaricata completamente. Ripetere i test con un altro browser. Il test multi-browser ha lo scopo di dimostrare che il codice JavaScript generato dai componenti server ASP / AJAX viene interpretato correttamente dai diversi browser.

Infine, mettiamo in evidenza il ruolo del tag <asp:UpdateProgress>. Nel codice della procedura [ButtonSalaire_Click] di [Default.aspx.cs], aggiungiamo un’istruzione che interrompe la procedura per 3 secondi:

using System.Threading;
   ...
protected void ButtonSalaire_Click(object sender, System.EventArgs e)
    {
        // ora del calcolo dello stipendio
        LabelHeureSalaire.Text = DateTime.Now.ToString("hh:mm:ss");
        // in attesa 
        Thread.Sleep(3000);
        // verifica dei dati
....
}

La riga 8 fa attendere 5 secondi il thread che esegue la procedura [ButtonSalaire_Click]. Fatto ciò, ripetiamo i test (dopo aver reimpostato l’attributo EnablePartialRendering del componente ScriptManager1 su True). Questa volta, durante il calcolo dello stipendio, vediamo il testo di [UpdateProgress] e l’immagine animata:

5.4. Conclusion

Lo studio precedente ci ha dimostrato che era possibile rendere AJAX le applicazioni ASP.NET esistenti. Le estensioni AJAX di ASP.NET vanno oltre quanto appena visto. Si invita il lettore a consultare il sito [http://ajax.asp.net].