Redazione
a- a+

ASP.NET e Ajax

Vediamo come utilizzare il framework Ajax in ASP.NET. Codici ed esempi

ASP.NET AJAX, precedentemente chiamato “ATLAS”, è una implementazione Microsoft di un framework AJAX, creato per ASP.NET. AJAX è un acronimo e sta per Asynchronous JAvaScript e XML, che, molto semplicemente, è un modo di trasferire i dati tra il server e il client senza l'invio di tutta la pagina, e creando così un postback completo. Questo permette una interfaccia più ricca per l'utente, in quanto il caricamento di contenuti dinamici si può fare in background, senza aggiornare e ridisegnare l'intera pagina.

Per studiare e cominciare a conoscere ASP.NET AJAX procederemo per esempi, come al solito, useremo il buon vecchio "Ciao, mondo!". Iniziamo con il codice e poi daremo la spiegazione.

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

 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" > 
 < head runat ="server" > 
  <Title> Ciao, mondo! </ Title> 
 </ head > 
 <Body> 
     <Form id = "form1" runat = "server"> 
         < asp:ScriptManager ID ="MainScriptManager"  runat ="server" /> 
         < asp:UpdatePanel ID ="pnlHelloWorld"  runat ="server" >
          <ContentTemplate> 
                 <asp: Label runat = "server" ID = lblHelloWorld "Text" = "Clicca sul pulsante!"   />
                 <Br /> <br /> 
                 < asp:Button runat ="server"  ID ="btnHelloWorld"  OnClick ="btnHelloWorld_Click"  Text = "Aggiorna!"   /> 
             </ ContentTemplate >          
      </ asp:UpdatePanel > 
    </ Form> 
  </ Body> 
</ Html>

Nel codebehind file (Default.aspx.cs) non c'è nulla di nuovo rispetto ad una classica pagina ASP.NET, se non per questo evento che andiamo ad aggiungere:

protected void  btnHelloWorld_Click( object  sender, EventArgs e) 
{ 
     lblHelloWorld.Text =  "Ciao, mondo - questo è un messaggio da ASP.NET AJAX: Il tempo è:"   +  DateTime.Now.ToLongTimeString (); 
 } 

Nel file .aspx, usiamo due novità, rispetto alle normali ASP.NET: il tag ScriptManager e il tag UpdatePanel. ScriptManager consente di verificare che i file necessari ASP.NET AJAX siano inclusi, infatti questi supportano AJAX. ScriptManager deve essere incluso in ogni pagina in cui si desidera utilizzare la funzionalità AJAX. Dopo ScriptManager, incontriamo uno dei controlli più utilizzati quando si lavora con AJAX, l'UpdatePanel. Questo controllo permette a quelle parti di pagina che vogliamo che siano aggiornate, di non causare un postback reale al server. Oltre a questi due comandi, tutto il resto sono controlli standard.

Se invece si vuole vedere come questa pagina funziona senza AJAX, provate ad impostare l'attributo "EnablePartialRendering" dello ScriptManager su “false” in questo modo:

< asp:ScriptManager ID ="MainScriptManager"  runat ="server"  EnablePartialRendering ="false"/>

Questo impedirà l'uso del rendering parziale della pagina e vi mostrerà come funziona senza AJAX.
Il tag <asp:UpdatePanel> ha due “childtags” (tag figli) – ContentTemplate e il Trigger. Il tag ContentTemplate è necessario, dal momento che detiene il contenuto del pannello. Il contenuto può essere qualsiasi cosa che si mette sulla pagina, dal testo letterale ai controlli web. Il tag Trigger vi permette di definire alcuni trigger che renderanno il pannello aggiornato automaticamente nel momento che accada l'evento specificato dal trigger. Il seguente esempio mostra l'uso di entrambi i childtags.

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Default.aspx.cs "  Inherits = " _Default "  %> 
 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > 
 < html xmlns ="http://www.w3.org/1999/xhtml" > 
 < head runat ="server" >
     < title > UpdatePanel </ title > 
 </ head >
<Body> 
     < form id ="form1"  runat ="server" > 
         < asp:ScriptManager ID ="ScriptManager1"  runat ="server"  /> 
         < asp:UpdatePanel runat ="server"  id ="UpdatePanel"  updatemode ="Conditional" >
         < Triggers > 
             < asp:AsyncPostBackTrigger controlid ="UpdateButton2"  eventname ="Click"  /> 
         </ Triggers >
             < ContentTemplate > 
                 < asp:Label runat ="server"  id ="DateTimeLabel1"/> 
                 < asp:Button runat ="server"  id ="UpdateButton1"  onclick ="UpdateButton_Click"  text ="Aggiorna"  />                
             </ ContentTemplate > 
         </ asp:UpdatePanel >
         < asp:UpdatePanel runat ="server"  id ="UpdatePanel1"  updatemode ="Conditional" >            
             < ContentTemplate >
                 < asp:Label runat ="server"  id ="DateTimeLabel2"/> 
                 < asp:Button runat ="server"  id ="UpdateButton2"  onclick ="UpdateButton_Click"  text ="Update"  /> 
             </ ContentTemplate > 
         </ asp:UpdatePanel > 
     </ form > 
  </ Body>
</ Html>

Basta aggiungere il metodo seguente al file:

protected void  UpdateButton_Click( object  sender, EventArgs e) {  
     DateTimeLabel1.Text =  DateTime.Now.ToString();
     DateTimeLabel2.Text =  DateTime.Now.ToString();
 }

Come potete vedere, il primo UpdatePanel esegue un trigger che fa riferimento al secondo pulsante. Questo farà sì che il primo pannello venga aggiornato nel momento che un controllo sull'altro UpdatePanel venga utilizzato. Il tag AsyncPostBackTrigger è abbastanza semplice: il ControlID definisce un riferimento al controllo che può innescare,  eventName definisce che tipo di evento (EventType) può causare l'innesco del trigger stesso. 

Uno dei problemi con Ajax proviene dalla sua asincronicità. Con i server veloci questo non è un grosso problema, ma ogni volta che si dispone di un metodo che comporta un po' di tempo per essere elaborato ed eseguito, l'utente dovrà attendere per il risultato. Fortunatamente, ASP.NET AJAX risolve questo problema, con un bel controllo denominato UpdateProgress. Date un'occhiata al seguente esempio, che mostra il controllo in azione.

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Default.aspx.cs "  Inherits = " _Default " %> 
 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
 < html xmlns ="http://www.w3.org/1999/xhtml" > 
 < head runat ="server" >
     < title > UpdateProgress control </ title > 
 </ head > 
 < body >
<Body>     
< form id ="form1"  runat ="server" >
         < asp:ScriptManager ID ="ScriptManager1"  runat ="server" /> 
         < asp:UpdateProgress runat ="server"  id ="PageUpdateProgress" > 
             < ProgressTemplate > 
                Caricamento in corso ... 
             </ ProgressTemplate > 
         </ asp:UpdateProgress >
         < asp:UpdatePanel runat ="server"  id ="Panel" > 
             < ContentTemplate >
                 < asp:Button runat ="server"  id ="UpdateButton"  onclick ="UpdateButton_Click"  text =Aggiorna"   /> 
             </ ContentTemplate >
         </ asp:UpdatePanel >
     </ form >
 </ Body> 
 </ html >

Il seguente metodo dovrebbe essere aggiunto al file CodeBehind (il file Default.aspx.cs):

protected void  UpdateButton_Click( object  sender, EventArgs e) { 
     System.Threading.Thread.Sleep( 5000 ); 
// il tempo di attesa è espresso in millisecondi:
// 5000 corrisonde a 5 secondi
 } 

Questo semplice esempio dimostra come sia facile utilizzare il controllo UpdateProgress. Una volta che il pulsante viene premuto viene visualizzata la scritta compresa nel tag <ProgressTemplate> “Caricamento in corso…” per 5 secondi (System.Threading.Thread.Sleep (5000), l'intervallo di tempo viene espresso in millisecondi) nell'attesa che l'eventuale elaborazione termini e mostri il risultato. È possibile utilizzare qualsiasi cosa nel ProgressTemplate, compreso altri controlli. Un uso comune è una GIF animata, posizionata strategicamente sulla pagina che raffiguri una clessidra.

La proprietà DynamicLayout indica se la pagina deve riservare lo spazio per il controllo UpdateProgress. Se è impostata su true, che è l'impostazione predefinita, lo spazio è dinamico, quindi non è riservato. Se si desidera prenotare lo spazio, impostare questa proprietà su false.

Infine vediamo il controllo Timer che permette di fare il postback a determinati intervalli. Se usato insieme ad UpdatePanels, che è l'approccio più comune, permette gli aggiornamenti parziali della pagina.

Ecco un piccolo esempio di utilizzo del controllo Timer. Viene aggiornato un timestamp ogni 5 secondi.

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Default.aspx.cs "  Inherits = " _Default "%> 
 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
 < html xmlns ="http://www.w3.org/1999/xhtml" > 
 < head runat ="server" >
     < title > Timers </ title > 
 </ head >
<Body> 
     < form id ="form1"  runat ="server" >
         < asp:ScriptManager ID ="ScriptManager1"  runat ="server"  /> 
         < asp:Timer runat ="server"  id ="UpdateTimer"  interval ="5000"  ontick ="UpdateTimer_Tick"  /> 
         < asp:UpdatePanel runat ="server"  id ="TimedPanel"  updatemode ="Conditional" > 
             < Triggers > 
                 < asp:AsyncPostBackTrigger controlid ="UpdateTimer"  eventname ="Tick"  /> 
             </ Triggers > 
             < ContentTemplate >
                 < asp:Label runat ="server"  id ="DateStampLabel"  /> 
             </ ContentTemplate >
         </ asp:UpdatePanel > 
     </ form >
</ Body> 
 </ html > 

Nel CodeBehind file (Default.aspx.cs) aggiungiamo il seguente codice:

protected void  UpdateTimer_Tick( object  sender, EventArgs e) 
{ 
     DateStampLabel.Text =  DateTime.Now.ToString(); 
 } 

Abbiamo un normale UpdatePanel, che ha un riferimento Trigger al nostro nuovo controllo Timer. Come potete notare dal nostro CodeBehind, il DateStampLabel viene aggiornato ogni volta che scatta il Timer.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Pier Paolo
Condividi le tue opinioni su questo articolo!