3 pagine in totale: <<Indietro 1 [2] 3 Avanti >>
Il cuore: UpdatePanel
L'UpdatePanel è sicuramente la feature più importante introdotta da ASP.NET AJAX, poichè permette di abilitare scenari AJAX-based con uno sforzo davvero trascurabile.
Il concetto che sta dietro all'UpdatePanel è quello di IncrementalUpdate o PartialRendering, ovvero l'aggiornamento tramite AJAX delle sole aree interessate dalle operazioni svolte dall'utente. L'idea di fondo è quella di suddividere una pagina in più aree, ciascuna delle quali può essere aggiornata in modo indipendente con un conseguente risparmio di banda e risorse (dovuto al caricamento parziale) e un importante guadagno in termini di usabilità. Queste aree sono rappresentate dagli UpdatePanel.
Come comportamento predefinito all'interno di un UpdatePanel ogni singolo postback viene intercettato ed inviato al server sotto forma di postback asincrono; le variabili QueryString e Form, il ViewState ed ogni altro dato viene spedito al server così da simulare un postback reale. Durante il suo ciclo di vita, la pagina non si accorge minimamente che quello in atto è un postback AJAX, pertanto procede il suo corso normalmente. La vera differenza sta nel fatto che solo il contenuto dell'UpdatePanel viene inviato al client e tutto il resto viene ignorato. A questo punto sul client quello che avviene è una semplice sovrascrittura del markup contenuto nell'UpdatePanel all'interno del quale il postback si è scatenato.
La sezione principale di un UpdatePanel è ContentTemplate. Come si può facilmente intuire dal nome, questa sezione contiene il markup vero e proprio con i controlli tramite i quali l'utente interagisce. La seconda sezione è Triggers e viene illustrata più avanti.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<asp:button ID="btn" runat="server" OnClick="Click" UpdateMode="Conditional"/>
<asp:Literal ID="lit" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<script runat="server">
void Click(object sender, EventArgs e)
{
lit.Text = DateTime.Now.ToString();
}
</script>
Nell'esempio proposto il testo del controllo Literal viene aggiornato con l'ora corrente senza scatenare postback.
Un UpdatePanel può essere aggiornato in quattro modi: sempre, quando un controllo al suo interno causa un postback, dinamicamente da codice o in base ad un evento scatenato da un altro controllo. Nei primi due casi il comportamento viene deciso tramite la proprietà UpdateMode. Questa proprietà è un Enum che contiene due valori possibili:
- Always: l'aggiornamento avviene sempre, anche a fronte di un aggiornamento di uno qualsiasi degli UpdatePanel della pagina. (Default)
- Conditional: l'UpdatePanel si aggiorna solo quando uno dei controlli al suo interno scatena un postback.
Per effettuare un aggiornamento da codice è sufficiente chiamare il metodo Update dell'UpdatePanel ed il gioco è fatto. Questo metodo torna utile quando si vuole aggiornare un Panel in base al variare di uno o più dati presenti in un altro UpdatePanel.
L'ultimo caso prevede l'utilizzo della seconda sezione di un UpdatePanel, ovvero Triggers. Tramite questa sezione si può decidere di aggiornare un UpdatePanel allo scatenarsi di un determinato evento di un controllo presente nella pagina.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:button ID="btn" runat="server" OnClick="Click" />
<asp:UpdatePanel ID="upd" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Literal ID="lit" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Sfruttare i trigger è molto importante perchè permette di risparmiare banda. Quest'ultimo esempio fa sostanzialmente la stessa cosa dell'esempio precedente, con la differenza che l'aggiornamento riguarda solo il controllo Literal e non include il bottone. Questo significa che, quando il server invia il markup al client in seguito ad un postBack asincrono, i dati scambiati tra server e client sono più contenuti con un conseguente risparmio in termini di occupazione di banda. Ovviamente in questo caso il miglioramento è minimo, ma se si considera per esempio il caso di due DropDownList tra loro collegate, si osserva una netta differenza.
Esistono due tipologie di trigger:
- AsyncPostBackTrigger: indica che il postback deve essere asincrono;
- PostBackTrigger: indica che si deve eseguire un postback classico.
Una delle possibilità più interessanti è poter creare UpdatePanel annidati. Questo torna utile, ad esempio, quando si vogliono visualizzare griglie con una colonna che contiene dettagli paginati oppure quando si vogliono usare Custom Control che hanno un UpdatePanel al loro interno. In questo caso si deve decidere la modalità di aggiornamento dei vari pannelli e qui entra in ballo la proprietà booleana ChildrenAsTriggers. Tramite questa proprietà si può decidere se scatenare l'aggiornamento dell'UpdatePanel padre al postback di un figlio o meno.
<script runat="server">
void Page_Load(object sender, EventArgs e)
{
lit.Text = DateTime.Now.ToString();
}
void Click(object sender, EventArgs e)
{
lit.Text = DateTime.Now.ToString();
}
void ClickIn(object sender, EventArgs e) {
litin.Text = DateTime.Now.ToString();
}
</script>
...
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:button ID="btn" runat="server" OnClick="Click" />
<asp:UpdatePanel ID="upd" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional" >
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Literal ID="lit" runat="server" />
<asp:UpdatePanel ID="updin" runat="server">
<ContentTemplate>
<asp:button ID="btnin" runat="server" OnClick="ClickIn" />
<asp:Literal ID="litin" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
In questo esempio sono stati inseriti due UpdatePanel annidati e nel pannello contenitore è stata impostata la proprietà ChildrenAsTriggers con il valore booleano false; questo significa che ogni aggiornamento del pannello figlio non ha effetti sul padre. A sua volta un aggiornamento del padre non ha effetti sul figlio.
3 pagine in totale: <<Indietro 1 [2] 3 Avanti >>
Contenuti dell'articolo
- Galleria fotografica dinamica con ASP.NET AJAX
- Usare Search come un servizio nei tuoi siti e nei tuoi client
- Mappe nel tuo sito con Virtual Earth
- Integrare Windows Live ID, Contacts e Presence API nelle tue applicazioni
- Introduzione ai cloud based service con Windows Live Services
- Realizzare un custom extender AJAX con ASP.NET 3.5
- Tracciare le modifiche ai dati e allineare i datawarehouse con il Change Data Capture in SQL Server 2008
- Le nuove caratteristiche di IIS 7.0 per sviluppatori e sistemisti
Aggiungi un nuovo commento »»»
Per inserire un commento, devi registrarti alla nostra community.
Difficoltà
Utilità
Stampa 
Download 
10annidi.ASPItalia.com: iscriviti alla competizione e vinci fantastici premi ogni mese!