Condividi tramite


Informazioni sugli aggiornamenti delle pagine parziali con ASP.NET AJAX

di Scott Cate

Forse la funzionalità più visibile della ASP.NET AJAX Extensions è la possibilità di eseguire aggiornamenti di pagina parziali o incrementali senza eseguire un postback completo al server, senza modifiche al 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 riscontra lo sfarfallio solitamente associato a un postback.

Introduzione

La tecnologia di ASP.NET Microsoft offre un modello di programmazione orientato agli oggetti e basato su 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 una richiesta di ritorno al server, che necessita di un aggiornamento della pagina.
  • I viaggi di andata e ritorno non mantengono gli effetti generati da Javascript o da altre tecnologie client-side (ad esempio Adobe Flash)
  • Durante il postback, i browser diversi da Microsoft Internet Explorer non supportano il ripristino automatico della posizione di scorrimento. E anche in Internet Explorer, c'è ancora uno sfarfallio mentre la pagina viene aggiornata.
  • I postback possono comportare un elevato consumo di larghezza di banda perché il campo del 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 AJAX ASP.NET di Microsoft. AJAX, che è l'acronimo di A synchronous JavaScript A nd X ML, è un framework integrato per fornire aggiornamenti incrementali delle pagine 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 utilizzati o meno.

Questo white paper si basa sulla versione Beta 2 di Visual Studio 2008 e .NET Framework 3.5, che integra le estensioni ASP.NET AJAX nella libreria di classi di base (dove in precedenza era disponibile un componente aggiuntivo per ASP.NET 2.0). Questo white paper presuppone anche che si stia usando 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.

Aggiornamenti delle pagine parziali

Forse la funzionalità più visibile della ASP.NET AJAX Extensions è la possibilità di eseguire aggiornamenti di pagina parziali o incrementali senza eseguire un postback completo al server, senza modifiche al 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 della larghezza di banda sono ridotti e il client non riscontra lo sfarfallio di solito associato a un postback.

La possibilità di integrare il rendering parziale delle pagine è 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 sito Web ASP.NET passando a File-> Nuovo>- Sito Web e selezionando ASP.NET sito Web dalla finestra di dialogo. È possibile denominarlo in qualsiasi modo e installarlo nel file system o in Internet Information Services (IIS).
  2. Verrà visualizzata la pagina predefinita vuota con markup di base ASP.NET (un modulo lato server e una @Page direttiva). Posizionare un'etichetta denominata Label1 e un pulsante chiamato Button1 sulla pagina all'interno dell'elemento del modulo. È possibile impostare le loro proprietà di testo come desiderato.
  3. Nella Visualizzazione Progettazione fare doppio clic su Button1 per generare un gestore eventi code-behind. All'interno di questo gestore di eventi, imposta Label1.Text a Hai cliccato il pulsante! .

Elenco 1: Il markup per default.aspx prima che il rendering parziale sia abilitato

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

Listato 2: Codebehind (ridotto) 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 chiederà di aggiungere un file web.config per abilitare il debug; farlo. Quando si fa clic sul pulsante, si nota che la pagina si aggiorna, modificando il testo nell'etichetta, e vi è un breve sfarfallio quando 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 denominata Estensioni AJAX. Se questa scheda non è disponibile perché si usa una versione precedente delle estensioni AJAX o Atlas, vedere la procedura dettagliata per registrare gli elementi della casella degli strumenti delle estensioni AJAX più avanti in questo white paper o installare la versione corrente con Windows Installer scaricabile dal sito Web.

Screenshot che mostra una scheda denominata A J A X Extensions e Script Manager selezionata.

(Fare clic per visualizzare l'immagine a dimensione intera)

  1. Problema noto:Se si installa Visual Studio 2008 in un computer in cui è già installato Visual Studio 2005 con le estensioni AJAX di ASP.NET 2.0, Visual Studio 2008 importerà gli elementi della casella degli strumenti delle estensioni AJAX. È possibile determinare se questo è il caso esaminando il tooltip dei componenti; dovrebbero indicare la versione 3,5,0,0. Se dicono la versione 2.0.0.0, sono stati importati gli elementi della casella degli strumenti precedenti e sarà necessario importarli manualmente usando la finestra di dialogo Scegli elementi della 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. Trascina il tag di chiusura </asp:UpdatePanel> oltre la posizione finale dell'elemento Button, in modo che l'elemento sia correttamente formato avvolgendo i controlli Label e Button.

  4. Dopo il tag di apertura <asp:UpdatePanel> , iniziare ad aprire un nuovo tag. Si noti che IntelliSense richiede due opzioni. In questo caso, creare un <ContentTemplate> tag. Assicurarsi di inserire questo tag intorno a Label e Button in modo che il markup sia ben formato.

Screenshot che mostra un tag seguito da un tag .

(Fare clic per visualizzare l'immagine a dimensione intera)

  1. In qualsiasi punto 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 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 sito Web di ASP.NET include automaticamente tutti i riferimenti necessari alle estensioni ASP.NET AJAX e include sezioni commentate di informazioni di configurazione che possono essere annullate per abilitare funzionalità aggiuntive. Visual Studio 2005 ha modelli simili quando sono state installate ASP.NET estensioni AJAX 2.0. In Visual Studio 2008, tuttavia, le estensioni AJAX sono esplicitamente disattivate per impostazione predefinita, ovvero vengono referenziate per impostazione predefinita, ma possono essere rimosse come riferimenti.

Screenshot che mostra un browser con Pagina Senza Nome selezionata e un Blocco Note predefinito.

(Fare clic per visualizzare l'immagine a dimensione intera)

  1. Premere F5 per avviare il sito Web. Si noti che 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 ci sarà alcun sfarfallio, né vi sarà alcuna modifica nella posizione di scorrimento della pagina (questo esempio non dimostra che). Se si guardasse l'origine resa della pagina dopo aver fatto clic sul pulsante, si confermerà che in realtà non si è verificato un post-back: il testo originale dell'etichetta è ancora presente nel markup sorgente e l'etichetta è stata modificata tramite JavaScript.

Visual Studio 2008 non sembra avere un modello predefinito per un sito Web ASP.NET AJAX-Enabled. Tuttavia, tale modello era disponibile in Visual Studio 2005 se sono state installate le estensioni AJAX di Visual Studio 2005 e ASP.NET 2.0. Di conseguenza, la configurazione di un sito Web e a partire dal modello di sito Web AJAX-Enabled sarà probabilmente ancora più semplice, perché il modello deve includere un file di web.config completamente configurato (supportando tutte le estensioni AJAX ASP.NET, inclusi l'accesso ai servizi Web e la serializzazione JSON - Notazione oggetti JavaScript) e include un updatePanel e ContentTemplate all'interno della pagina Web Form principale per impostazione predefinita. Abilitare il rendering parziale con questa pagina predefinita è facile come tornare al passaggio 10 di questa guida dettagliata e posizionare i controlli sulla pagina.

Controllo ScriptManager

Informazioni di riferimento sul controllo ScriptManager

Proprietà abilitate al markup

Nome della proprietà Tipo Descrizione
AllowCustomErrors-Redirect Bool Specifica se utilizzare la sezione di errore personalizzata del file web.config per gestire gli errori.
AsyncPostBackError-Messaggio 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 tempo in cui un client deve attendere il completamento della richiesta asincrona.
EnableScript-Globalization (Abilitazione alla globalizzazione degli script) Bool Ottiene o imposta un valore che indica se la globalizzazione dello script è abilitata.
EnableScript-Localization Bool Ottiene o imposta un valore che indica se la localizzazione degli script è abilitata.
ScriptLoadTimeout Int32 Determina il numero di secondi consentiti per il caricamento degli script nel client
ScriptMode Enumerazione (Auto, Debug, Release, Eredita) 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 per la posizione dei file di script da inviare al client.

Proprietà solo codice

Nome della proprietà Tipo Descrizione
AuthenticationService AuthenticationService-Manager Ottiene informazioni dettagliate sul proxy del servizio di autenticazione ASP.NET che verrà inviato al client.
IsDebuggingEnabled Bool Ottiene un valore che indica se è abilitato il debug di script e codice.
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.
Scripts Collection<Script-Reference> Ottiene una raccolta di riferimenti a 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.
Supporta il rendering parziale 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 di codice pubblico:

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

Discendenti di markup:

Etichetta 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.
<Servizio> Fornisce riferimenti al servizio Web aggiuntivi che avranno classi proxy che verranno generate.
<asp:ServiceReference> Indica un riferimento specifico al servizio Web.

Il controllo ScriptManager è il core essenziale per le estensioni AJAX ASP.NET. Fornisce l'accesso alla libreria di script (incluso il sistema completo 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 di globalizzazione e 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 versione come risorse incorporate negli assembly a cui si fa riferimento, gli sviluppatori sono liberi di reindirizzare ScriptManager ai file di script personalizzati, oltre a registrare script aggiuntivi necessari.

Per eseguire l'override dell'associazione predefinita per gli script in genere inclusi , 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 a script (rappresentati dalla ScriptReference classe ) possono essere inclusi a livello di codice o tramite markup. A tale scopo, modificare la raccolta ScriptManager.Scripts a livello di codice o includere i tag <asp:ScriptReference> sotto il tag <Scripts>, 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 invece di usare la casella di avviso predefinita; Ad esempio, potrebbe essere necessario 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 sul 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>

In modo semplice, 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, infine indica 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, questo argomento non rientra nell'ambito di questo white paper. Per ulteriori informazioni, vedere il whitepaper su Supporto per la globalizzazione nelle estensioni AJAX di ASP.NET.

Controllo UpdatePanel

Informazioni di riferimento sul controllo UpdatePanel

Proprietà abilitate al markup

Nome della proprietà Tipo Descrizione
ChildrenAsTriggers bool Specifica se i controlli figlio richiamano automaticamente l'aggiornamento al postback.
RenderMode enum (Blocco, 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à solo codice

Nome della 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 Controllo Ottiene il modello programmatico per la richiesta di aggiornamento.
Attivatori UpdatePanel - CollezioneTrigger Ottiene l'elenco dei trigger associati all'UpdatePanel corrente.

Metodi di codice pubblico:

Nome metodo Tipo Descrizione
Aggiorna() Void Aggiorna l'oggetto UpdatePanel specificato a livello di codice. Consente a una richiesta del server di causare un rendering parziale di un UpdatePanel altrimenti inattivato.

Discendenti di markup:

Etichetta Descrizione
<ContentTemplate> Specifica il markup da utilizzare per renderizzare il risultato parziale. 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 di pagina parziale per l'oggetto UpdatePanel specificato. Questo può essere o meno un controllo in qualità di discendente di UpdatePanel in questione. Granulare per il nome dell'evento. Figlio di <Trigger>.
<asp:PostBackTrigger> Specifica un controllo che determina l'aggiornamento dell'intera pagina. Questo può essere o non essere un controllo come discendente dell'UpdatePanel in questione. Granulare relativo 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 trovarsi in una pagina e possono essere annidati. Ogni UpdatePanel è isolato, in modo che ognuno possa funzionare in modo indipendente (puoi avere due UpdatePanel in esecuzione contemporaneamente, eseguendo diverse parti 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 UpdatePanel che crea un postback viene registrato come trigger per UpdatePanel. Ciò significa che UpdatePanel può funzionare con i controlli predefiniti associati a dati (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 sulla pagina verranno aggiornati, indipendentemente dal fatto che abbiano trigger definiti per questa azione. Ad esempio, se un controllo UpdatePanel definisce un controllo Button e si fa clic su quel controllo Button, tutti i controlli UpdatePanel in tale pagina verranno aggiornati per impostazione predefinita. Ciò è dovuto al fatto che, per impostazione predefinita, la UpdateMode proprietà di UpdatePanel è impostata su Always. In alternativa, puoi 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 metodo protetto CreateChildControls() della CompositeControl classe . In questo modo, è possibile inserire un UpdatePanel tra gli elementi figlio del controllo e il mondo esterno se si determina che la pagina supporta il rendering parziale; in caso contrario, è sufficiente posizionare semplicemente i controlli figlio in un'istanza del contenitore Control.

Considerazioni su UpdatePanel

UpdatePanel funziona come una sorta di scatola nera, incapsulando i postback di ASP.NET all'interno del contesto di una richiesta XMLHttpRequest JavaScript. Tuttavia, esistono importanti considerazioni sulle prestazioni da tenere presenti, sia in termini di comportamento che di velocità. Per comprendere il funzionamento di UpdatePanel, in modo da poter decidere meglio quando il suo uso è appropriato, è necessario esaminare lo scambio AJAX. L'esempio seguente usa 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 per il codice postale, la quale dovrebbe popolare i campi per città e stato in un modulo o un controllo. Questo modulo raccoglie infine informazioni sull'appartenenza, tra cui il nome, l'indirizzo e le informazioni di contatto di un utente. Ci sono molte considerazioni di progettazione da tenere in considerazione, in base ai requisiti di un progetto specifico.

Screenshot che mostra un campo città, stato e codice postale in un modulo.

(Fare clic per visualizzare l'immagine a dimensione intera)

Screenshot che mostra un pannello con la parola Console in un tag.

(Fare clic per visualizzare l'immagine a dimensione intera)

Nell'iterazione originale di questa applicazione, è stato creato un controllo che incorporava l'intera parte dei dati di registrazione utente, inclusi il codice postale, la città e lo stato. L'intero controllo è stato avvolto all'interno di UpdatePanel ed è stato inserito in un Web Form. Quando l'utente immette il codice postale, UpdatePanel rileva l'evento (l'evento TextChanged corrispondente nel back-end, specificando i trigger o utilizzando la proprietà ChildrenAsTriggers impostata su true). AJAX pubblica tutti i campi all'interno di UpdatePanel, come acquisito da FireBug (vedi 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, vengono inviati più di 9 KB di dati, quando in realtà erano necessari solo cinque byte di dati per effettuare questa particolare richiesta. La risposta è ancora più pesante: in totale, 57 kB vengono inviati al cliente, semplicemente per aggiornare un campo di testo e un campo a discesa.

Potrebbe anche essere interessante vedere come ASP.NET AJAX aggiorna la presentazione. La parte di risposta della richiesta di aggiornamento di UpdatePanel viene visualizzata nella visualizzazione della console Firebug a sinistra; si tratta di 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. Quando il browser genera nuovamente il DOM, si verifica un lieve ritardo, a seconda della quantità di informazioni che devono essere elaborate.

La rigenerazione del DOM attiva una serie di problemi aggiuntivi:

Screenshot che mostra un pannello con Console in una scheda e un codice nella scheda Risposta.

(Fare clic per visualizzare l'immagine a dimensione intera)

  • Se l'elemento HTML attivo si trova all'interno di UpdatePanel, perderà lo stato attivo. Quindi, per gli utenti che hanno premuto Tabulazione per uscire dalla casella di testo del codice postale, la loro destinazione successiva sarebbe stata la casella di testo della Città. Tuttavia, una volta che UpdatePanel ha aggiornato la visualizzazione, 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 un tipo di script lato client personalizzato è in uso che accede agli elementi DOM, i riferimenti resi persistenti dalle funzioni possono diventare inattivi dopo un postback parziale.

UpdatePanel non è progettato per essere soluzioni catch-all. Offrono invece una soluzione rapida per determinate situazioni, tra cui prototipi, piccoli aggiornamenti dei controlli e forniscono un'interfaccia familiare per ASP.NET sviluppatori che potrebbero avere familiarità con il modello a oggetti .NET, ma meno con il 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 venisse richiamata una chiamata al servizio Web. Poiché i metodi sono statici, non è necessario alcuno stato; il chiamante dello script fornisce i parametri e il risultato viene restituito in modo asincrono.
  • Prendere in considerazione l'uso di un servizio Web e JSON se è necessario usare un singolo controllo in diverse posizioni in un'applicazione. Anche in questo caso è necessario molto poco lavoro speciale e funziona in modo asincrono.

L'incorporazione di funzionalità tramite i servizi Web o i metodi di pagina presenta anche svantaggi. Prima di tutto, gli sviluppatori di ASP.NET tendono a creare in genere piccoli componenti funzionali in 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 possono avere poco o nessun legame coeso.

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 gli UpdatePanels il meno possibile, non solo all'interno di unità, ma anche tra unità di codice. Ad esempio, la presenza di un oggetto UpdatePanel in una pagina che avvolge un controllo, mentre anche quel controllo contiene un oggetto UpdatePanel, il quale a sua volta contiene un altro controllo che include un oggetto UpdatePanel, è un annidamento tra unità diverse. In questo modo è possibile mantenere chiari gli elementi da aggiornare e impedire aggiornamenti imprevisti ai controlli UpdatePanel figlio.
  • Mantenere la proprietà ChildrenAsTriggers impostata su false e impostare in modo esplicito gli eventi di attivazione. L'utilizzo della <Triggers> raccolta è un modo molto più chiaro per gestire gli eventi e può impedire comportamenti imprevisti, aiutando le attività di manutenzione e costringendo uno sviluppatore a acconsentire esplicitamente a un evento.
  • Usare l'unità più piccola possibile per ottenere funzionalità. Come indicato nella discussione del servizio di codice postale, limitarsi al wrapping del minimo indispensabile riduce il tempo di comunicazione con il server, l'elaborazione totale e l'impatto dello scambio client-server, migliorando le prestazioni.

Controllo "Update Progress"

Informazioni di riferimento sul controllo UpdateProgress

Proprietà abilitate al markup

Nome della proprietà Tipo Descrizione
AssociatedUpdate-PanelID String Specifica l'ID di UpdatePanel per cui deve essere segnalato questo aggiornamento dei progressi.
MostraDopo Intero Specifica il timeout in millisecondi prima che questo controllo venga visualizzato dopo l'inizio della richiesta asincrona.
DynamicLayout bool Specifica se il progresso è visualizzato dinamicamente.

Discendenti di markup:

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

Il controllo UpdateProgress offre una misura di feedback per mantenere l'interesse degli utenti mentre viene eseguito il lavoro necessario per il trasferimento 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 è abituata all'aggiornamento della pagina e a vedere la barra di stato illuminarsi.

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

Sommario

Le estensioni Microsoft ASP.NET AJAX sono prodotti sofisticati progettati per facilitare l'accessibilità dei contenuti Web e per offrire un'esperienza utente più completa alle applicazioni Web. Come parte delle estensioni AJAX ASP.NET, 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 con 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, gli UpdatePanels gestiscono qualsiasi postback richiamato dai relativi controlli discendenti, anche se questa funzionalità può essere regolata finemente, sia a livello dichiarativo che programmatico.

Quando si usa il controllo UpdatePanel, gli sviluppatori devono essere consapevoli dell'impatto sulle prestazioni che potrebbero verificarsi. Le potenziali 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 ignorato e che la richiesta in background è in corso mentre la pagina non compie nessuna operazione per rispondere all'input dell'utente. Include anche la possibilità di interrompere i risultati del rendering parziale.

Insieme, questi strumenti contribuiscono a creare un'esperienza utente ricca e fluida, rendendo il lavoro del server meno evidente all'utente e riducendo le interruzioni nel flusso di lavoro.

Biografia

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