Applicazione AJAX di esempio

Articolo
10/22/2014

Aggiornamento: novembre 2007

In questa esercitazione viene creata un'applicazione di esempio di base che utilizza le funzionalità AJAX di ASP.NET. Per ulteriori informazioni sulle funzionalità AJAX in ASP.NET, sui problemi tecnici risolti mediante queste funzionalità e sulla descrizione dei principali componenti AJAX, vedere i documenti introduttivi seguenti:

In questa esercitazione verrà compilata un'applicazione che visualizza le pagine di dati dei dipendenti 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.
Sito Web ASP.NET con supporto AJAX.
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).

Generazione di un sito Web ASP.NET

I siti Web creati in ASP.NET includono per impostazione predefinita il supporto delle funzionalità AJAX.

Per creare un sito Web ASP.NET con supporto AJAX

Avviare Visual Studio.
Scegliere Nuovo sito Web dal menu File.

Viene visualizzata la finestra di dialogo Nuovo sito Web.
In Modelli Visual Studio installati fare clic su Sito Web ASP.NET.
Immettere un percorso e una lingua, quindi scegliere OK.

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

Dopo aver creato un sito Web ASP.NET, 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 gli aggiornamenti a pagina parziale e identifica il contenuto aggiornato indipendentemente del resto della pagina. In questa parte dell'esercitazione 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 nel passaggio Seleziona connessione dati, quindi fare clic su Avanti.
Nel 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 aggiornata ogni volta 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 nella 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 dipendenti in corso... .
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 esercitazione. In pratica, non si introduce un ritardo. Il ritardo invece è 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.

<%@ Page Language="VB" %>

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

<script >

    Protected Sub GridView1_PageIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        'Include three second delay for example only.
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:GridView ID="GridView1"  AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

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

<script >

    protected void GridView1_PageIndexChanged(object sender, EventArgs e)
    {
        //Include three second delay for example only.
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:GridView ID="GridView1"  AllowPaging="True" CellPadding="4" DataSourceID="SqlDataSource1"
                    ForeColor="#333333" GridLines="None" OnPageIndexChanged="GridView1_PageIndexChanged">
                    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                    <AlternatingRowStyle BackColor="White" />
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                    SelectCommand="SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName">
                </asp:SqlDataSource>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Getting employees...
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>