Informazioni sugli aggiornamenti parziali di pagine con ASP.NET AJAX

di Scott Cate

Forse la funzionalità più visibile delle estensioni ASP.NET AJAX è la possibilità di eseguire aggiornamenti di pagine parziali o incrementali senza eseguire un postback completo al server, senza modifiche di codice e modifiche minime di markup. I vantaggi sono estesi: lo stato dei contenuti multimediali (ad esempio Adobe Flash o Windows Media) è invariato, i costi di larghezza di banda vengono ridotti e il client non ha in genere l'esperienza del flicker associato a un postback.

Introduzione

La tecnologia ASP.NET Microsoft offre un modello di programmazione basato su oggetti ed eventi e lo unisce ai vantaggi del codice compilato. Tuttavia, il modello di elaborazione lato server presenta diversi svantaggi intrinseci nella tecnologia:

• Gli aggiornamenti delle pagine richiedono un round trip sul server, che richiede un aggiornamento di pagina.
• I round trip non persistono alcun effetto generato da Javascript o da altre tecnologie lato client (ad esempio Adobe Flash)
• Durante il postback, i browser diversi da Microsoft Internet Explorer non supportano automaticamente il ripristino della posizione di scorrimento. E anche in Internet Explorer, c'è ancora un flicker quando la pagina viene aggiornata.
• I postback possono comportare una quantità elevata di larghezza di banda perché il campo modulo __VIEWSTATE può crescere, soprattutto quando si gestiscono controlli come il controllo GridView o i ripetitori.
• Non esiste un modello unificato per l'accesso ai servizi Web tramite JavaScript o altre tecnologie lato client.

Immettere le estensioni ASP.NET AJAX di Microsoft. AJAX, che rappresenta Un AvaScript AvaScript A nd X ML, è un framework integrato per fornire aggiornamenti di pagina incrementali tramite JavaScript multipiattaforma, composto da codice lato server che comprende Microsoft AJAX Framework e un componente script denominato Microsoft AJAX Script Library. Le estensioni ASP.NET AJAX forniscono anche supporto multipiattaforma per l'accesso ai servizi Web ASP.NET tramite JavaScript.

Questo white paper esamina la funzionalità di aggiornamento parziale della pagina delle estensioni AJAX ASP.NET, che include il componente ScriptManager, il controllo UpdatePanel e il controllo UpdateProgress e considera gli scenari in cui devono essere usati o meno.

Questo white paper si basa sulla versione Beta 2 di Visual Studio 2 e .NET Framework 3.5, che integra le estensioni ASP.NET AJAX nella libreria di classi di base( in cui è stato precedentemente un componente aggiuntivo disponibile per ASP.NET 2.0). Questo white paper presuppone anche che si usi Visual Studio 2008 e non Visual Web Developer Express Edition; alcuni modelli di progetto a cui si fa riferimento potrebbero non essere disponibili per gli utenti di Visual Web Developer Express.

Pagina parziale Aggiornamenti

Forse la funzionalità più visibile delle estensioni ASP.NET AJAX è la possibilità di eseguire aggiornamenti di pagine parziali o incrementali senza eseguire un postback completo al server, senza modifiche di codice e modifiche minime di markup. I vantaggi sono estesi: lo stato dei contenuti multimediali (ad esempio Adobe Flash o Windows Media) è invariato, i costi di larghezza di banda vengono ridotti e il client non ha in genere l'esperienza del flicker associato a un postback.

La possibilità di integrare il rendering di pagine parziali è integrata in ASP.NET con modifiche minime nel progetto.

Procedura dettagliata: Integrazione del rendering parziale in un progetto esistente

1. In Microsoft Visual Studio 2008 creare un nuovo progetto di sito Web ASP.NET passando a File-> Nuovo>- Sito Web e selezionando ASP.NET sito Web dalla finestra di dialogo. È possibile assegnare un nome a qualsiasi elemento desiderato e installarlo nel file system o in Internet Information Services (IIS).
2. Verrà visualizzata la pagina predefinita vuota con il markup di base ASP.NET (un modulo lato server e una @Page direttiva). Eliminare un'etichetta denominata e un pulsante chiamato Label1Button1 nella pagina all'interno dell'elemento form. È possibile impostare le proprietà del testo su qualsiasi elemento desiderato.
3. Nella visualizzazione Progettazione fare doppio clic Button1 per generare un gestore eventi code-behind. All'interno di questo gestore eventi, impostare Label1.Text su Hai fatto clic sul pulsante! .

Elenco 1: Markup per default.aspx prima dell'abilitazione del rendering parziale

<%@ 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>Untitled Page</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <div>
 <asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
 <asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
 </div>
 </form>
 </body>
</html>

Elenco 2: Codebehind (tagliato) in default.aspx.cs

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "You clicked the button!";
    }
}

1. Premere F5 per avviare il sito Web. Visual Studio richiederà di aggiungere un file web.config per abilitare il debug; farlo. Quando si fa clic sul pulsante, si noti che la pagina viene aggiornata per modificare il testo nell'etichetta e che la pagina viene ridisegnata.
2. Dopo aver chiuso la finestra del browser, tornare a Visual Studio e alla pagina di markup. Scorrere verso il basso nella casella degli strumenti di Visual Studio e trovare la scheda etichettata estensioni AJAX. Se questa scheda non è disponibile perché si usa una versione precedente di estensioni AJAX o Atlas, vedere la procedura dettagliata per registrare gli elementi della casella degli strumenti estensioni AJAX più avanti in questo white paper o installare la versione corrente con il sito Web di Windows Installer scaricabile dal sito Web.

(Fare clic per visualizzare l'immagine full-size)

1. Problema noto:Se si installa Visual Studio 2008 in un computer che ha già installato Visual Studio 2005 con le estensioni AJAX ASP.NET 2.0 AJAX, Visual Studio 2008 importa gli elementi della casella degli strumenti estensioni AJAX. È possibile determinare se si tratta del caso esaminando la descrizione comando dei componenti; devono dire la versione 3.5.0.0. Se si dice che la versione 2.0.0.0, gli elementi della casella degli strumenti precedenti sono stati importati e sarà necessario importarli manualmente usando la finestra di dialogo Scegli elementi casella degli strumenti in Visual Studio. Non sarà possibile aggiungere controlli versione 2 tramite la finestra di progettazione.

2. Prima dell'inizio del <asp:Label> tag, creare una riga di spazi vuoti e fare doppio clic sul controllo UpdatePanel nella casella degli strumenti. Si noti che nella parte superiore della pagina è inclusa una nuova @Register direttiva, che indica che i controlli all'interno dello spazio dei nomi System.Web.UI devono essere importati usando il asp: prefisso.

3. Trascinare il tag di chiusura </asp:UpdatePanel> oltre la fine dell'elemento Button, in modo che l'elemento sia ben formato con i controlli Label e Button a capo.

4. Dopo il tag di apertura <asp:UpdatePanel> , iniziare a aprire un nuovo tag. Si noti che IntelliSense richiede due opzioni. In questo caso, creare un <ContentTemplate> tag. Assicurarsi di eseguire il wrapping di questo tag intorno all'etichetta e al pulsante in modo che il markup sia ben formato.

(Fare clic per visualizzare l'immagine full-size)

1. Ovunque all'interno dell'elemento <form> , includere un controllo ScriptManager facendo doppio clic sull'elemento ScriptManager nella casella degli strumenti.
2. Modificare il <asp:ScriptManager> tag in modo che includa l'attributo EnablePartialRendering= true.

Elenco 3: Markup per default.aspx con rendering parziale abilitato

<%@ Page Language="C#" AutoEventWireup="true"
 CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
 PublicKeyToken=31bf3856ad364e35"
 Namespace="System.Web.UI" TagPrefix="asp" %>
<!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>Untitled Page</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <asp:ScriptManager EnablePartialRendering="true"
 ID="ScriptManager1" runat="server"></asp:ScriptManager>
 <div>
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 <asp:Label ID="Label1" runat="server"
 Text="This is a label!"></asp:Label>
 <asp:Button ID="Button1" runat="server"
 Text="Click Me" OnClick="Button1_Click" />
 </ContentTemplate>
 </asp:UpdatePanel>
 </div>
 </form>
 </body>
</html>

1. Aprire il file di web.config. Si noti che Visual Studio ha aggiunto automaticamente un riferimento alla compilazione a System.Web.Extensions.dll.

2. Novità di Visual Studio 2008: il web.config fornito con i modelli di progetto del sito Web ASP.NET include automaticamente tutti i riferimenti necessari alle estensioni ASP.NET AJAX e include sezioni commentate di informazioni di configurazione che possono essere non commentate per abilitare funzionalità aggiuntive. Visual Studio 2005 aveva modelli simili quando sono stati installati ASP.NET 2.0 Estensioni AJAX. Tuttavia, in Visual Studio 2008, le estensioni AJAX sono opt-out per impostazione predefinita, ovvero sono a cui si fa riferimento per impostazione predefinita, ma possono essere rimosse come riferimenti.

(Fare clic per visualizzare l'immagine full-size)

1. Premere F5 per avviare il sito Web. Si noti come non sono state necessarie modifiche al codice sorgente per supportare il rendering parziale. Solo il markup è stato modificato.

Quando si avvia il sito Web, si noterà che il rendering parziale è ora abilitato, perché quando si fa clic sul pulsante non sarà presente alcun flicker, né vi sarà alcuna modifica nella posizione di scorrimento della pagina (questo esempio non dimostra che). Se si desidera esaminare l'origine di rendering della pagina dopo aver fatto clic sul pulsante, verrà confermato che non si è verificato un post-back: il testo dell'etichetta originale fa ancora parte del markup di origine e l'etichetta è stata modificata tramite JavaScript.

Visual Studio 2008 non viene visualizzato con un modello predefinito per un sito Web di ASP.NET AJAX-Enabled. Tuttavia, tale modello è stato disponibile in Visual Studio 2005 se sono state installate le estensioni di Visual Studio 2005 e ASP.NET 2.0 AJAX. Di conseguenza, la configurazione di un sito Web e a partire dal modello di sito Web AJAX-Enabled sarà probabilmente ancora più semplice, poiché il modello deve includere un file web.config completamente configurato (che supporta tutte le estensioni AJAX ASP.NET, inclusi l'accesso ai servizi Web e la serializzazione JSON - Notazione dell'oggetto JavaScript) e include un file UpdatePanel e ContentTemplate all'interno della pagina principale Web Forms per impostazione predefinita. L'abilitazione del rendering parziale con questa pagina predefinita è semplice come rivedere il passaggio 10 di questa procedura dettagliata e eliminare i controlli nella pagina.

Controllo ScriptManager

Informazioni di riferimento sul controllo ScriptManager

Markup-Enabled Proprietà:

Nome proprietà	Tipo	Descrizione
AllowCustomErrors-Redirect	Bool	Specifica se usare la sezione degli errori personalizzati del file web.config per gestire gli errori.
AsyncPostBackError-Message	string	Ottiene o imposta il messaggio di errore inviato al client se viene generato un errore.
AsyncPostBack-Timeout	Int32	Ottiene o imposta la quantità predefinita di un client in attesa del completamento della richiesta asincrona.
EnableScript-Globalization	Bool	Ottiene o imposta se la globalizzazione dello script è abilitata.
EnableScript-Localization	Bool	Ottiene o imposta se la localizzazione di script è abilitata.
ScriptLoadTimeout	Int32	Determina il numero di secondi consentiti per il caricamento di script nel client
ScriptMode	Enumerazione (Auto, Debug, Release, Inherit)	Ottiene o imposta un valore che indica se eseguire il rendering delle versioni di rilascio degli script
ScriptPath	string	Ottiene o imposta il percorso radice del percorso dei file di script da inviare al client.

proprietà Code-Only:

Nome proprietà	Tipo	Descrizione
Authenticationservice	AuthenticationService-Manager	Ottiene i dettagli sul proxy del servizio di autenticazione ASP.NET che verrà inviato al client.
IsDebuggingEnabled	Bool	Ottiene un valore che indica se lo script e il debug del codice sono abilitati.
IsInAsyncPostback	Bool	Ottiene un valore che indica se la pagina è attualmente in una richiesta di postback asincrona.
Profileservice	ProfileService-Manager	Ottiene informazioni dettagliate sul proxy del servizio di profilatura ASP.NET che verrà inviato al client.
Script	Riferimenti per script di raccolta<>	Ottiene una raccolta di riferimenti allo script che verranno inviati al client.
Servizi	Informazioni di riferimento sul servizio di raccolta<>	Ottiene una raccolta di riferimenti proxy del servizio Web che verranno inviati al client.
SupportsPartialRendering	Bool	Ottiene un valore che indica se il client corrente supporta il rendering parziale. Se questa proprietà restituisce false, tutte le richieste di pagina saranno postback standard.

Metodi del codice pubblico:

Nome metodo	Tipo	Descrizione
SetFocus(string)	Void	Imposta lo stato attivo del client su un determinato controllo al termine della richiesta.

Discendenti di markup:

Tag	Descrizione
<Authenticationservice>	Fornisce informazioni dettagliate sul proxy al servizio di autenticazione ASP.NET.
<Profileservice>	Fornisce informazioni dettagliate sul proxy per il servizio di profilatura ASP.NET.
<Script>	Fornisce riferimenti di script aggiuntivi.
<asp:ScriptReference>	Indica un riferimento di script specifico.
<Service>	Fornisce riferimenti aggiuntivi al servizio Web con classi proxy generate.
<asp:ServiceReference>	Indica un riferimento specifico al servizio Web.

Il controllo ScriptManager è il nucleo essenziale per le estensioni ASP.NET AJAX. Fornisce l'accesso alla libreria di script (incluso l'ampio sistema di tipi di script lato client), supporta il rendering parziale e offre un supporto completo per altri servizi di ASP.NET (ad esempio l'autenticazione e la profilatura, ma anche altri servizi Web). Il controllo ScriptManager fornisce anche il supporto per la globalizzazione e la localizzazione per gli script client.

Fornitura di script alternativi e supplementari

Anche se le estensioni AJAX di Microsoft ASP.NET 2.0 includono l'intero codice script nelle edizioni di debug e di rilascio come risorse incorporate negli assembly a cui si fa riferimento, gli sviluppatori possono reindirizzare ScriptManager ai file di script personalizzati, nonché registrare script aggiuntivi necessari.

Per eseguire l'override dell'associazione predefinita per gli script inclusi in genere, ad esempio quelli che supportano lo spazio dei nomi Sys.WebForms e il sistema di digitazione personalizzato, è possibile registrarsi per l'evento ResolveScriptReference della classe ScriptManager. Quando questo metodo viene chiamato, il gestore eventi ha la possibilità di modificare il percorso del file di script in questione; Lo script manager invierà quindi una copia diversa o personalizzata degli script al client.

Inoltre, i riferimenti agli script (rappresentati dalla ScriptReference classe) possono essere inclusi a livello di codice o tramite markup. A tale scopo, modificare la ScriptManager.Scripts raccolta a livello di codice o includere <asp:ScriptReference> tag sotto il <Scripts> tag , che è un elemento figlio di primo livello del controllo ScriptManager.

Gestione degli errori personalizzata per UpdatePanel

Anche se gli aggiornamenti vengono gestiti dai trigger specificati dai controlli UpdatePanel, il supporto per la gestione degli errori e i messaggi di errore personalizzati vengono gestiti dall'istanza del controllo ScriptManager di una pagina. Questa operazione viene eseguita esponendo un evento, AsyncPostBackError, alla pagina che può quindi fornire logica di gestione delle eccezioni personalizzata.

Utilizzando l'evento AsyncPostBackError, è possibile specificare la AsyncPostBackErrorMessage proprietà , che determina quindi la generazione di una casella di avviso al completamento del callback.

La personalizzazione lato client è anche possibile anziché usare la casella di avviso predefinita; Ad esempio, è possibile visualizzare un elemento personalizzato <div> anziché la finestra di dialogo modale predefinita del browser. In questo caso, è possibile gestire l'errore nello script client:

Elenco 5: Script lato client per visualizzare errori personalizzati

<script type= text/javascript >
 <!--
 Sys.WebForms.PageRequestManager.getInstance().add_EndRequest(Request_End);
 function Request_End(sender, args)
 {
 if (args.get_error() != undefined)
 {
 var errorMessage =  ;
 if (args.get_response().get_statusCode() ==  200 )
 {
 errorMessage = args.get_error().message;
 }
 else
 {
 // the server wasn't the problem...
 errorMessage =  An unknown error occurred... ;
 }
 // do something with the errorMessage here.
 // now make sure the system knows we handled the error.
 args.set_errorHandled(true);
 }
 }
 // -->
</script>

Semplicemente, lo script precedente registra un callback con il runtime AJAX sul lato client per quando la richiesta asincrona è stata completata. Verifica quindi se è stato segnalato un errore e, in tal caso, elabora i dettagli, indicando infine al runtime che l'errore è stato gestito nello script personalizzato.

Supporto per globalizzazione e localizzazione

Il controllo ScriptManager offre un supporto completo per la localizzazione di stringhe di script e componenti dell'interfaccia utente; Tuttavia, tale argomento non rientra nell'ambito di questo white paper. Per altre informazioni, vedere il white paper, Globalization Support in ASP.NET AJAX Extensions.For more information, see the white paper, Globalization Support in ASP.NET AJAX Extensions.

Controllo UpdatePanel

Informazioni di riferimento sul controllo UpdatePanel

proprietà Markup-Enabled:

Nome proprietà	Tipo	Descrizione
ChildrenAsTriggers	bool	Specifica se i controlli figlio richiamano automaticamente l'aggiornamento al postback.
Rendermode	enum (Blocca, Inline)	Specifica la modalità di presentazione visiva del contenuto.
Updatemode	enum (Sempre, Condizionale)	Specifica se UpdatePanel viene sempre aggiornato durante un rendering parziale o se viene aggiornato solo quando viene raggiunto un trigger.

proprietà Code-Only:

Nome proprietà	Tipo	Descrizione
IsInPartialRendering	bool	Ottiene un valore che indica se UpdatePanel supporta il rendering parziale per la richiesta corrente.
ContentTemplate	Itemplate	Ottiene il modello di markup per la richiesta di aggiornamento.
ContentTemplateContainer	Control	Ottiene il modello di codice per la richiesta di aggiornamento.
Trigger	UpdatePanel- TriggerCollection	Ottiene l'elenco dei trigger associati all'oggetto UpdatePanel corrente.

Metodi di codice pubblico:

Nome metodo	Tipo	Descrizione
Update()	Void	Aggiornamenti updatePanel specificato a livello di codice. Consente a una richiesta server di attivare un rendering parziale di un oggetto UpdatePanel altrimenti non elaborato.

Discendenti di markup:

Tag	Descrizione
<ContentTemplate>	Specifica il markup da utilizzare per eseguire il rendering del risultato parziale del rendering. Figlio di <asp:UpdatePanel>.
<Trigger>	Specifica una raccolta di n controlli associati all'aggiornamento di UpdatePanel. Figlio di <asp:UpdatePanel>.
<asp:AsyncPostBackTrigger>	Specifica un trigger che richiama un rendering parziale della pagina per l'oggetto UpdatePanel specificato. Questo può o non essere un controllo come discendente di UpdatePanel in questione. Granulare per il nome dell'evento. Figlio di <trigger>.
<asp:PostBackTrigger>	Specifica un controllo che causa l'aggiornamento dell'intera pagina. Questo può o non essere un controllo come discendente di UpdatePanel in questione. Granulare all'oggetto. Figlio di <trigger>.

Il UpdatePanel controllo è il controllo che delimita il contenuto lato server che parteciperà alla funzionalità di rendering parziale delle estensioni AJAX. Non esiste alcun limite al numero di controlli UpdatePanel che possono essere presenti in una pagina e possono essere annidati. Ogni UpdatePanel è isolato, in modo che ognuno possa funzionare in modo indipendente (è possibile avere due UpdatePanel in esecuzione contemporaneamente, eseguendo contemporaneamente parti diverse della pagina, indipendentemente dal postback della pagina).

Il controllo UpdatePanel gestisce principalmente i trigger di controllo: per impostazione predefinita, qualsiasi controllo contenuto all'interno di ContentTemplate un oggetto UpdatePanel che crea un postback viene registrato come trigger per UpdatePanel. Ciò significa che UpdatePanel può funzionare con i controlli associati a dati predefiniti (ad esempio GridView), con i controlli utente e possono essere programmati nello script.

Per impostazione predefinita, quando viene attivato un rendering parziale della pagina, tutti i controlli UpdatePanel nella pagina verranno aggiornati, indipendentemente dal fatto che i controlli UpdatePanel definiti per tale azione siano stati definiti. Ad esempio, se un controllo UpdatePanel definisce un controllo Button e il controllo Button viene fatto clic, tutti i controlli UpdatePanel in tale pagina verranno aggiornati per impostazione predefinita. Questo perché, per impostazione predefinita, la UpdateMode proprietà di UpdatePanel è impostata su Always. In alternativa, è possibile impostare la proprietà UpdateMode su Conditional, il che significa che UpdatePanel verrà aggiornato solo se viene raggiunto un trigger specifico.

Note di controllo personalizzate

Un UpdatePanel può essere aggiunto a qualsiasi controllo utente o controllo personalizzato; Tuttavia, la pagina in cui questi controlli sono inclusi deve includere anche un controllo ScriptManager con la proprietà EnablePartialRendering impostata su true.

Un modo in cui è possibile tenere conto di questo quando si usano Controlli personalizzati Web consiste nell'eseguire l'override del CompositeControl metodo protetto CreateChildControls() della classe. A tale scopo, è possibile inserire un UpdatePanel tra i figli del controllo e il mondo esterno se si determina il rendering parziale della pagina; in caso contrario, è possibile eseguire semplicemente il livello dei controlli figlio in un'istanza del contenitore Control .

Considerazioni su UpdatePanel

UpdatePanel funziona come elemento di una casella nera, il wrapping ASP.NET postback nel contesto di un XML JavaScriptHttpRequest. Tuttavia, esistono considerazioni significative sulle prestazioni da tenere presente, sia in termini di comportamento che di velocità. Per comprendere il funzionamento di UpdatePanel, in modo che sia possibile decidere meglio quando l'uso è appropriato, è necessario esaminare lo scambio AJAX. Nell'esempio seguente viene usato un sito esistente e Mozilla Firefox con l'estensione Firebug (Firebug acquisisce i dati XMLHttpRequest).

Si consideri un modulo che, tra le altre cose, ha una casella di testo codice postale che dovrebbe popolare un campo città e stato su una maschera o un controllo. Questo modulo raccoglie infine informazioni sull'appartenenza, tra cui il nome, l'indirizzo e le informazioni di contatto dell'utente. Esistono molte considerazioni di progettazione da tenere in considerazione, in base ai requisiti di un progetto specifico.

(Fare clic per visualizzare l'immagine full-size)

(Fare clic per visualizzare l'immagine full-size)

Nell'iterazione originale di questa applicazione è stato creato un controllo che incorporava l'intera quantità di dati di registrazione dell'utente, incluso il codice postale, la città e lo stato. L'intero controllo è stato eseguito il wrapping all'interno di un UpdatePanel ed è stato eliminato in un Web Form. Quando il codice postale viene immesso dall'utente, UpdatePanel rileva l'evento (l'evento TextChanged corrispondente nel back-end specificando trigger o usando la proprietà ChildrenAsTriggers impostata su true). AJAX pubblica tutti i campi all'interno di UpdatePanel, come acquisito da FireBug (vedere il diagramma a destra).

Come indica l'acquisizione dello schermo, i valori di ogni controllo all'interno di UpdatePanel vengono recapitati (in questo caso sono tutti vuoti), nonché il campo ViewState. Tutto detto, oltre 9 kb di dati viene inviato, quando in realtà sono stati necessari solo cinque byte di dati per effettuare questa richiesta specifica. La risposta è ancora più gonfiata: in totale, 57 kb viene inviato al client, semplicemente per aggiornare un campo di testo e un campo a discesa.

Può anche essere interessante vedere come ASP.NET AJAX aggiorna la presentazione. La parte di risposta della richiesta di aggiornamento di UpdatePanel viene visualizzata nella console Firebug a sinistra; è una stringa delimitata da pipe appositamente formulata che viene suddivisa dallo script client e quindi riassemblata nella pagina. In particolare, ASP.NET AJAX imposta la proprietà innerHTML dell'elemento HTML nel client che rappresenta UpdatePanel. Poiché il browser genera di nuovo il DOM, si verifica un lieve ritardo, a seconda della quantità di informazioni che devono essere elaborate.

La rigenerazione del DOM attiva diversi problemi aggiuntivi:

(Fare clic per visualizzare l'immagine full-size)

• Se l'elemento HTML incentrato si trova all'interno di UpdatePanel, perderà lo stato attivo. Quindi, per gli utenti che hanno premuto il tasto Tab per uscire dalla casella di testo del codice postale, la destinazione successiva sarebbe stata la casella di testo Città. Tuttavia, dopo aver aggiornato il display updatePanel, il modulo non avrebbe più avuto lo stato attivo e premendo Tab avrebbe iniziato a evidenziare gli elementi dello stato attivo (ad esempio i collegamenti).
• Se qualsiasi tipo di script lato client personalizzato è in uso che accede agli elementi DOM, i riferimenti persistenti da funzioni possono diventare disattivati dopo un postback parziale.

UpdatePanels non è destinato a soluzioni catch-all. Invece, forniscono una soluzione rapida per determinate situazioni, tra cui la prototipazione, gli aggiornamenti di controllo di piccole dimensioni e forniscono un'interfaccia familiare ASP.NET agli sviluppatori che potrebbero avere familiarità con il modello a oggetti .NET, ma meno così con DOM. Esistono diverse alternative che possono comportare prestazioni migliori, a seconda dello scenario dell'applicazione:

• Prendere in considerazione l'uso di PageMethods e JSON (JavaScript Object Notation) consente allo sviluppatore di richiamare metodi statici in una pagina come se venga richiamata una chiamata al servizio Web. Poiché i metodi sono statici, non è necessario alcun stato; il chiamante script fornisce i parametri e il risultato viene restituito in modo asincrono.
• È consigliabile usare un servizio Web e JSON se un singolo controllo deve essere usato in diverse posizioni in un'applicazione. Questo richiede ancora una volta un lavoro speciale molto piccolo e funziona in modo asincrono.

L'incorporazione di funzionalità tramite servizi Web o metodi di pagina presenta anche svantaggi. Prima di tutto, gli sviluppatori ASP.NET tendono in genere a creare piccoli componenti di funzionalità nei controlli utente (file con estensione ascx). I metodi di pagina non possono essere ospitati in questi file; devono essere ospitati all'interno della classe di pagina .aspx effettiva. I servizi Web, analogamente, devono essere ospitati all'interno della classe asmx. A seconda dell'applicazione, questa architettura può violare il principio di responsabilità singola, in quanto la funzionalità per un singolo componente è ora distribuita tra due o più componenti fisici che potrebbero avere poco o nessuna coesistenza.

Infine, se un'applicazione richiede l'uso di UpdatePanel, le linee guida seguenti devono essere utili per la risoluzione dei problemi e la manutenzione.

• Annidare UpdatePanel il più piccolo possibile, non solo all'interno di unità, ma anche tra unità di codice. Ad esempio, l'uso di UpdatePanel in una pagina che esegue il wrapping di un controllo, mentre il controllo contiene anche un oggetto UpdatePanel, che contiene un altro controllo che contiene un oggetto UpdatePanel, è annidamento incrociato. Ciò consente di mantenere chiaro quali elementi devono essere aggiornati e impedisce aggiornamenti imprevisti a UpdatePanel figlio.
• Mantenere la proprietà ChildrenAsTriggers impostata su false e impostare in modo esplicito gli eventi di attivazione. L'uso della <Triggers> raccolta è un modo molto più chiaro per gestire gli eventi e può impedire comportamenti imprevisti, aiutando con le attività di manutenzione e forzando uno sviluppatore a acconsentire esplicitamente per un evento.
• Usare l'unità più piccola possibile per ottenere funzionalità. Come indicato nella discussione del servizio codice postale, il wrapping solo il minimo minimo riduce il tempo al server, l'elaborazione totale e il footprint dello scambio client-server, migliorando le prestazioni.

Controllo UpdateProgress

Informazioni di riferimento sul controllo UpdateProgress

Markup-Enabled Proprietà:

Nome proprietà	Tipo	Descrizione
AssociatedUpdate-PanelID	string	Specifica l'ID di UpdatePanel su cui deve essere report updateProgress.
DisplayAfter	Int	Specifica il timeout in millisecondi prima che questo controllo venga visualizzato dopo l'inizio della richiesta asincrona.
DynamicLayout	bool	Specifica se il rendering dello stato di avanzamento viene eseguito in modo dinamico.

Discendenti di markup:

Tag	Descrizione
<ProgressTemplate>	Contiene il modello di controllo impostato per il contenuto che verrà visualizzato con questo controllo.

Il controllo UpdateProgress offre una misura del feedback per mantenere l'interesse degli utenti durante l'esecuzione del lavoro necessario per il trasporto al server. Ciò può aiutare gli utenti a sapere che si sta eseguendo un'operazione anche se potrebbe non essere evidente, soprattutto perché la maggior parte degli utenti viene usata per l'aggiornamento della pagina e la visualizzazione dell'evidenziazione della barra di stato.

Come nota, i controlli UpdateProgress possono essere visualizzati ovunque in una gerarchia di pagine. Tuttavia, nei casi in cui viene avviato un postback parziale da un elemento UpdatePanel figlio (in cui un UpdatePanel è annidato in un altro UpdatePanel), i postback che attivano l'elemento UpdatePanel figlio causeranno la visualizzazione dei modelli UpdateProgress per UpdatePanel figlio e per UpdatePanel padre. Tuttavia, se il trigger è un figlio diretto di UpdatePanel padre, verranno visualizzati solo i modelli UpdateProgress associati all'elemento padre.

Riepilogo

Le estensioni Microsoft ASP.NET AJAX sono prodotti sofisticati progettati per facilitare l'accessibilità dei contenuti Web e offrire un'esperienza utente più completa alle applicazioni Web. Nell'ambito delle ASP.NET estensioni AJAX, i controlli di rendering di pagina parziale, inclusi ScriptManager, UpdatePanel e UpdateProgress sono alcuni dei componenti più visibili del toolkit.

Il componente ScriptManager integra il provisioning di JavaScript client per le estensioni, nonché consente ai vari componenti lato server e client di lavorare insieme a un investimento di sviluppo minimo.

Il controllo UpdatePanel è la casella magica apparente. Il markup all'interno di UpdatePanel può avere Codebehind sul lato server e non attivare un aggiornamento della pagina. I controlli UpdatePanel possono essere annidati e possono dipendere dai controlli in altri UpdatePanel. Per impostazione predefinita, UpdatePanel gestisce qualsiasi postback richiamato dai relativi controlli discendenti, anche se questa funzionalità può essere ottimizzata correttamente, in modo dichiarativo o programmatico.

Quando si usa il controllo UpdatePanel, gli sviluppatori devono essere consapevoli dell'impatto sulle prestazioni che potrebbe verificarsi. Le possibili alternative includono i servizi Web e i metodi di pagina, anche se la progettazione dell'applicazione deve essere considerata.

Il controllo UpdateProgress consente all'utente di sapere che non viene ignorata e che la richiesta dietro le quinte viene eseguita mentre la pagina non esegue alcuna operazione per rispondere all'input dell'utente. Include anche la possibilità di interrompere i risultati di rendering parziale.

Insieme, questi strumenti consentono di creare un'esperienza utente ricca e senza problemi rendendo il server meno evidente all'utente e interrompendo il flusso di lavoro.

Biografia

Scott Cate lavora con le tecnologie Web Microsoft dal 1997 ed è presidente di myKB.com (www.myKB.com) dove si specializza nella scrittura di applicazioni basate su ASP.NET incentrate sulle soluzioni software della Knowledge Base. Scott può essere contattato tramite posta elettronica all'indirizzo scott.cate@myKB.com o al suo blog all'indirizzo ScottCate.com

Avanti