Procedura dettagliata: creazione di un sito Web con supporto AJAX

Articolo
09/12/2008

Aggiornamento: novembre 2007

Questa procedura dettagliata consente di creare un sito Web ASP.NET di base con una pagina Web che illustra alcune funzionalità della libreria ASP.NET per AJAX inclusa con Visual Studio. Verrà compilata un'applicazione che visualizza le pagine di dati del dipendente dal database di esempio AdventureWorks. L'applicazione utilizza il controllo UpdatePanel per aggiornare solo la parte della pagina modificata, senza il flash di pagina che si verifica con un postback. Questa operazione è nota come aggiornamento a pagina parziale. L'applicazione di esempio utilizza anche il controllo UpdateProgress per visualizzare un messaggio di stato durante l'elaborazione dell'aggiornamento a pagina parziale.

Prerequisiti

Per implementare le procedure nell'ambiente di sviluppo in uso è necessario:

Microsoft Visual Studio 2005 o Microsoft Visual Web Developer Express Edition.
Database di esempio AdventureWorks. È possibile scaricare e installare il database di esempio AdventureWorks dall'Area download di Microsoft. Cercare "SQL Server 2005 Samples and Sample Databases (December 2006)" (informazioni in lingua inglese).

Creazione di un sito Web

Se un sito Web è già stato creato in Visual Web Developer, ad esempio seguendo le procedure di Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer, è possibile utilizzare quel sito Web e passare alla sezione successiva Creazione di una pagina master. In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla procedura riportata di seguito.

Per creare un sito Web di file system

Aprire Visual Web Developer.
Scegliere Nuovosito Web dal menu File.

Verrà visualizzata la finestra di dialogo Nuovo sito Web.
In Modelli Visual Studio installati, fare clic su Sito Web ASP.NET.
Nella casella Percorso, immettere il nome della cartella in cui salvare le pagine del sito Web.

Digitare, ad esempio, il nome cartella C:\WebSites.
Nell'elenco Linguaggio scegliere il linguaggio di programmazione con lui lavorare.
Scegliere OK.

Visual Web Developer crea la cartella e una nuova pagina denominata Default.aspx.

Aggiunta di un controllo UpdatePanel a una pagina Web ASP.NET

Dopo aver creato un sito Web, creare una pagina Web ASP.NET che includa un controllo UpdatePanel. Prima di aggiungere un controllo UpdatePanel alla pagina, è necessario aggiungere un controllo ScriptManager. Il controllo UpdatePanel si basa sul controllo ScriptManager per gestire gli aggiornamenti a pagina parziale.

Per creare una nuova pagina Web ASP.NET

In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito, quindi scegliere Aggiungi nuovo elemento.

Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.
In Modelli Visual Studio installati selezionare Web Form.
Denominare la nuova pagina Employees.aspx e deselezionare la casella di controllo Inserisci codice in file separato.
Selezionare la lingua che si desidera utilizzare.
Scegliere Aggiungi.
Passare alla visualizzazione Progettazione.
Nella scheda Estensioni AJAX della casella degli strumenti fare doppio clic sul controllo ScriptManager per aggiungerlo alla pagina.
Trascinare un controllo UpdatePanel dalla casella degli strumenti e rilasciarlo sotto il controllo ScriptManager.

Aggiunta di contenuto a un controllo UpdatePanel

Il controllo UpdatePanel esegue aggiornamenti a pagina parziale e identifica contenuto aggiornato indipendentemente del resto della pagina. In questa parte della procedura dettagliata verrà aggiunto un controllo con associazione a dati che visualizza i dati dal database AdventureWorks.

Per aggiungere contenuto a un controllo UpdatePanel

Dalla scheda Dati della casella degli strumenti, trascinare un controllo GridView nell'area modificabile del controllo UpdatePanel.
Scegliere Formattazione automatica dal menu Attività GridView.
Nel riquadro Formattazione automatica selezionare A colori in Selezionare uno schema, quindi fare clic su OK.
Nel menu Attività GridView selezionare <Nuova origine dati> dall'elenco Scegli origine dati.

Verrà visualizzata la Configurazione guidata origine dati.
In Specificare l'origine dei dati utilizzati dall'applicazione selezionare Database, quindi fare clic su OK.
Nella Configurazione guidata origine dati configurare una connessione al database AdventureWorks per il passaggio Seleziona connessione dati, quindi fare clic su Avanti.
Per il passaggio Configura istruzione Select selezionare Specificare una stored procedure o un'istruzione SQL personalizzata, quindi fare clic su Avanti.
Nella scheda SELECT del passaggio Definisci stored procedure o istruzioni personalizzate immettere la seguente istruzione SQL:
```
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName
```
Fare clic su Avanti.
Scegliere Fine.
Nel menu Attività GridView selezionare la casella di controllo Attiva paging.
Salvare le modifiche, quindi premere CTRL+F5 per visualizzare la pagina in un browser.

Notare che quando si selezionano pagine di dati diverse non si verifica il flash di pagina poiché la pagina non esegue un postback e non viene ogni volta aggiornata l'intera pagina.

Aggiunta di un controllo UpdateProgress alla pagina

Il controllo UpdateProgress visualizza un messaggio di stato quando viene richiesto un nuovo contenuto per un controllo UpdatePanel.

Per aggiungere un controllo UpdateProgress alla pagina

Dalla scheda Estensioni AJAX della casella degli strumenti, trascinare un controllo UpdateProgress sulla pagina e rilasciarlo sotto il controllo UpdatePanel.
Selezionare il controllo UpdateProgress e nella finestra Proprietà impostare la proprietà AssociatedUpdatePanelID su UpdatePanel1.

In questo modo il controllo UpdateProgress viene associato al controllo UpdatePanel aggiunto precedentemente.
Nell'area modificabile del controllo UpdateProgress digitare Recupero di dipendenti ... ... .
Salvare le modifiche, quindi premere CTRL+F5 per visualizzare la pagina in un browser.

Se si verifica un ritardo durante l'esecuzione della query SQL e la restituzione dei dati, il controllo UpdateProgress visualizza il messaggio immesso nel controllo UpdateProgress.

Aggiunta di un ritardo all'applicazione di esempio

Se l'applicazione aggiorna rapidamente ogni pagina di dati, è possibile che il contenuto del controllo UpdateProgress non venga visualizzato nella pagina. Il controllo UpdateProgress supporta la proprietà DisplayAfter che consente di impostare un ritardo prima della visualizzazione del controllo. In questo modo si evita che il controllo lampeggi nel browser se l'aggiornamento si verifica molto velocemente. Per impostazione predefinita, il ritardo è impostato su 500 millisecondi (0,5 secondi), a indicare che il controllo UpdateProgress non verrà visualizzato se il tempo impiegato per l'aggiornamento è inferiore a mezzo secondo.

In un ambiente di sviluppo, è possibile aggiungere un ritardo artificiale all'applicazione per assicurarsi che il controllo UpdateProgress funzioni nel modo previsto. Si tratta di un passaggio facoltativo eseguito esclusivamente per il testing dell'applicazione.

Per aggiungere un ritardo all'applicazione di esempio

All'interno del controllo UpdatePanel selezionare il controllo GridView.
Nella finestra Proprietà fare clic sul pulsante Eventi.
Fare doppio clic sull'evento PageIndexChanged per creare un gestore eventi.

Aggiungere il codice riportato di seguito al gestore eventi PageIndexChanged per creare artificialmente un ritardo di tre secondi:

'Include three second delay for example only.
System.Threading.Thread.Sleep(3000)

//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);

Nota:
Il gestore per l'evento PageIndexChanged introduce intenzionalmente un ritardo per questa procedura dettagliata. In pratica, il ritardo non è introdotto dall’utente ma è il risultato del traffico del server o del codice server che richiede lunghi tempi di elaborazione, ad esempio una query di database di lunga durata.

Salvare le modifiche, quindi premere CTRL+F5 per visualizzare la pagina in un browser.

Poiché ora è stato impostato un ritardo di tre secondi ogni volta che si passa a una nuova pagina di dati, sarà possibile visualizzare il controllo UpdateProgress.