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

5.1. Introduzione

La tecnologia AJAX (Asynchronous JavaScript and XML) combina una serie di tecnologie:

• JavaScript: una pagina HTML visualizzata in un browser può incorporare codice JavaScript. Questo codice viene eseguito dal browser se l'utente non ha disabilitato l'esecuzione di JavaScript nel proprio browser. Questa tecnologia esiste fin dagli albori del web e ha visto una rinascita di interesse dal 2005 grazie ad 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 nell'albero. Il codice JavaScript può modificare il documento visualizzato modificando il DOM. Ad esempio, può cambiare il testo visualizzato in un campo di immissione tramite il nodo DOM che rappresenta quel campo.

AJAX utilizza JavaScript per eseguire scambi browser/server in background. Per rispondere a un evento come il clic su un pulsante, il codice JavaScript viene eseguito dal browser per inviare una richiesta HTTP al server. Questa richiesta contiene parametri che indicano al server cosa fare. Il server esegue quindi l'azione richiesta. In risposta, invia al browser un flusso HTTP contenente dati che consentono un aggiornamento parziale della pagina attualmente visualizzata. Ciò avviene tramite il DOM del documento e l'esecuzione del codice JavaScript incorporato nel documento. I dati restituiti dal server possono essere in vari formati: XML, HTML, JSON, testo semplice, ecc.

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, con conseguente risposta più veloce
• un'interfaccia grafica più fluida da utilizzare, poiché le azioni dell'utente non provocano un ricaricamento completo della pagina.

In una intranet in cui il traffico di rete è veloce, AJAX consente la creazione di applicazioni web che si comportano in modo simile alle interfacce tradizionali di Windows. È possibile gestire eventi come un 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 web, dove i tempi di risposta possono essere lunghi, la tecnologia AJAX rimane utilizzabile, ma la fluidità percepita dipende dalle prestazioni della rete.

La sfida principale con AJAX è il linguaggio JavaScript. Creato agli albori del web,

• si rivela poco pratico per la programmazione orientata agli oggetti. Ad esempio, non è un linguaggio tipizzato. Non si dichiara il tipo dei dati che vengono manipolati. Sotto questo aspetto, è simile a linguaggi come Perl o PHP.
• Non esiste uno standard accettato da tutti i browser. Ogni browser ha le proprie estensioni JavaScript proprietarie, il che significa che il codice JavaScript scritto per Internet Explorer potrebbe non funzionare in Mozilla Firefox e viceversa.
• È difficile da debuggare, poiché i browser non offrono strumenti potenti per il debug del codice JavaScript che eseguono.

Tutte queste carenze di JavaScript facevano sì che fosse usato raramente prima dell’avvento di AJAX. Una volta compreso il valore dell’esecuzione del codice JavaScript in background — per effettuare richieste HTTP al server web e utilizzare la sua risposta per eseguire, tramite il DOM, un aggiornamento parziale del documento visualizzato — i team di sviluppo si sono messi al lavoro e hanno proposto framework che consentono l’uso di AJAX senza richiedere allo sviluppatore di scrivere codice JavaScript. Per ottenere questo risultato, sono state sviluppate librerie JavaScript in grado di adattarsi al browser client. L'inserimento del codice JavaScript nella pagina HTML inviata al browser viene eseguito sul lato server, utilizzando tecniche che variano a seconda del framework AJAX utilizzato. I framework AJAX sono disponibili per Java, .NET, PHP, Ruby e altri. AJAX è integrato in Visual Web Developer 2008.

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

La nuova versione viene creata duplicando la versione precedente. Verrà modificata solo la pagina [Default.aspx].

• In [1], utilizzando Windows Explorer, duplicare la cartella del progetto [pam-v1-adonet] e rinominarla [pam-v2-adonet-ajax]. Quindi, utilizzando Visual Web Developer, aprire il progetto (File / Apri progetto) da questa nuova cartella [2]
• In [3], rinominarla

• Nelle proprietà del nuovo progetto, modificare il nome dell'assembly [4] e lo spazio dei nomi predefinito [5].

Una volta fatto ciò, sostituisci lo spazio dei nomi [pam_v1] con lo spazio dei nomi [pam_v2] nei file [Default.aspx, Default.aspx.cs, Default.aspx.designer.cs, Global.asax, Global.asax.cs] 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 al modulo [Default.aspx] (vedere [2] sopra).
  • 2A: Il componente <asp:ScriptManager> è necessario per qualsiasi progetto AJAX
  • 2B: Il componente <asp:UpdatePanel> viene utilizzato per definire l'area da aggiornare quando l'utente invia una richiesta POST. Questo componente impedisce il ricaricamento dell'intera pagina.
  • 2C: Il componente <asp:UpdateProgress> viene utilizzato per visualizzare del testo o un'immagine durante l'aggiornamento per informare l'utente, come mostrato di seguito:

• (continua)
  • 2D: Un controllo Label denominato LabelHeureLoad che visualizzerà l'ora in cui viene eseguito il gestore di eventi Load della pagina.
  • 2E: Un Label denominato LabelHeureSalaire che visualizzerà l'ora in cui viene eseguito il gestore dell'evento Click per il pulsante [Salaire]. Vogliamo dimostrare che Ajax non ricarica l'intera pagina quando si fa clic sul pulsante [Salaire]. Ciò è mostrato nella schermata precedente, dove si possono vedere due orari diversi nei due Label.

La precedente Ajaxificazione 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: Qualsiasi modulo abilitato per Ajax deve includere il tag <asp:ScriptManager>. Questo tag consente l'uso di nuovi componenti Ajax:

• Il tag <asp:ScriptManager> può essere aggiunto facendo doppio clic sul componente [ScriptManager] sopra riportato. Assicurarsi di verificare che questo tag sia contenuto all'interno del tag <form> nel codice sorgente. L'attributo [EnablePartialRendering="true"] alla riga 8 è assente per impostazione predefinita. Poiché "true" è il suo valore predefinito, non è strettamente necessario.

• Riga 9: Il tag <asp:UpdatePanel> viene utilizzato per delimitare le aree della pagina che devono essere aggiornate durante un aggiornamento parziale della pagina. L'attributo [UpdateMode="Conditional"] indica che l'area deve essere aggiornata solo in risposta a un evento AJAX proveniente da un componente all'interno dell'area. L'altro valore è [UpdateMode="Always"], che è quello predefinito. Con questo attributo, l'area UpdatePanel viene aggiornata sistematicamente anche se l'evento AJAX verificatosi ha avuto origine da un componente in un'altra area UpdatePanel. In genere, questo comportamento non è auspicabile.

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

• I tag <asp:ContentTemplate> alle righe 10 e 53 definiscono l'area della pagina da aggiornare parzialmente.
• Righe 27–33: un componente Ajax <asp:UpdateProgress> che visualizza del testo durante il processo di aggiornamento della pagina. Ad esempio, facendo clic sul pulsante [Salary] si attiva una richiesta POST in background. Il browser non visualizza l'icona a clessidra, quindi l'utente potrebbe essere tentato di continuare a utilizzare il modulo. Il tag <asp:UpdateProgress> visualizza un testo che indica che la pagina è in fase di aggiornamento. È possibile visualizzare anche un'immagine. In questo caso, vengono visualizzati un'immagine animata (riga 29) e del testo (righe 30-31):

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

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

    protected void Page_Load(object sender, System.EventArgs e)
    {
        // time of each page load
        LabelHeureLoad.Text = DateTime.Now.ToString("hh:mm:ss");
        // initial request processing
        if (!IsPostBack)
        {
....
}

• Riga 4: Aggiorna il tempo di caricamento della pagina

   protected void ButtonSalaire_Click(object sender, System.EventArgs e)
    {
        // hourly wage calculation
        LabelHeureSalaire.Text = DateTime.Now.ToString("hh:mm:ss");
        // data verification
....
}

• riga 4: aggiornare l'ora di calcolo dello stipendio

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

            <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>

Utilizzando Windows Explorer, aggiungiamo il file [images/indicator.gif] alla cartella del progetto [1]:

• In [2], visualizziamo tutti i file del progetto
• In [3], selezioniamo la cartella [images]
• In [4], includiamo la cartella [images] nel progetto

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

5.3. Test della soluzione Ajax

Quando si esegue il progetto (CTRL-F5), viene visualizzata la seguente pagina:

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

Prova l'applicazione e verifica che il pulsante [Salario] non provochi il ricaricamento completo della pagina. Puoi verificarlo confrontando il tempo visualizzato per l'elaborazione del clic sul pulsante [Salario] [2], che non corrisponde al tempo impiegato per il caricamento iniziale della pagina [3]:

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

Si noti che il comportamento ora è simile a quello di una pagina non AJAX. La pagina si ricarica completamente quando si fa clic sul pulsante [Stipendio]. Ripetere i test utilizzando un browser diverso. Lo scopo dei test cross-browser è dimostrare che il codice JavaScript generato dai componenti server ASP/AJAX viene interpretato correttamente dai diversi browser.

Infine, evidenziamo il ruolo del tag <asp:UpdateProgress>. Nel codice della procedura [ButtonSalaire_Click] in [Default.aspx.cs], aggiungi un'istruzione che mette in pausa la procedura per 3 secondi:

using System.Threading;
   ...
protected void ButtonSalaire_Click(object sender, System.EventArgs e)
    {
        // hourly wage calculation
        LabelHeureSalaire.Text = DateTime.Now.ToString("hh:mm:ss");
        // waiting 
        Thread.Sleep(3000);
        // data verification
....
}

La riga 8 fa sì che il thread che esegue la procedura [ButtonSalaire_Click] rimanga in attesa per 5 secondi. Una volta fatto ciò, eseguiamo nuovamente i test (dopo aver impostato la proprietà EnablePartialRendering del componente ScriptManager1 su True). Questa volta, mentre lo stipendio viene calcolato, vediamo sia il testo di [UpdateProgress] sia l'immagine animata:

5.4. Conclusione

Lo studio precedente ci ha mostrato che è possibile aggiungere funzionalità AJAX alle applicazioni ASP.NET esistenti. Le estensioni ASP.NET AJAX vanno oltre ciò che abbiamo appena visto. Invitiamo i lettori a visitare il sito web [http://ajax.asp.net].