Condividi tramite

Introduzione al controllo UpdateProgress

  • Articolo

Aggiornamento: novembre 2007

In questa esercitazione verranno utilizzati i controlli UpdateProgress per visualizzare lo stato di avanzamento degli aggiornamenti a pagina parziale. Se una pagina contiene i controlli UpdatePanel, è anche possibile includere i controlli UpdateProgress per tenere informati gli utenti sullo stato degli aggiornamenti a pagina parziale. È possibile utilizzare un controllo UpdateProgress per rappresentare lo stato di avanzamento degli aggiornamenti a pagina parziale per l'intera pagina. In alternativa, è possibile includere un controllo UpdateProgress per ogni controllo UpdatePanel. Entrambi questi pattern sono illustrati in questa esercitazione.

Prerequisiti

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

  • Microsoft Visual Studio 2005 o Visual Web Developer Express Edition.

  • Un sito Web ASP.NET compatibile con AJAX.

Utilizzo di un singolo controllo UpdateProgress

Si inizierà utilizzando un singolo controllo UpdateProgress per illustrare lo stato di avanzamento per tutti gli aggiornamenti a pagina parziale nella pagina.

Per utilizzare un singolo controllo UpdateProgress per l'intera pagina

  1. Creare una nuova pagina e passare alla visualizzazione Progettazione.

  2. Nella scheda Estensioni AJAX della casella degli strumenti fare doppio clic sul controllo ScriptManager per aggiungerlo alla pagina.

  3. Fare doppio clic sul controllo UpdatePanel per aggiungerlo alla pagina.

  4. Fare doppio clic sul controllo UpdateProgress per aggiungerlo alla pagina.

  5. Nel controllo UpdateProgress aggiungere il testo Elaborazione in corso….

  6. Nel controllo UpdatePanel aggiungere un controllo Label e un controllo Button.

  7. Impostare la proprietà Text del controllo Label su Pagina iniziale sottoposta a rendering.

  8. Fare doppio clic sul controllo Button per aggiungere un gestore per l'evento Click del pulsante.

  9. Aggiungere il codice riportato di seguito al gestore Click. Viene creato artificialmente un ritardo di tre secondi, quindi viene visualizzata l'ora corrente.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}
    Nota:

    Il gestore per l'evento Click introduce intenzionalmente un ritardo per questa esercitazione. In pratica, non si introduce un ritardo. Quest’ultimo sarebbe invece il risultato del traffico del server o del codice server che richiede tempi di elaborazione lunghi, ad esempio una query di database a esecuzione prolungata.

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

  11. Fare clic sul pulsante.

    Dopo un breve ritardo, verrà visualizzato il messaggio di stato. Quando il gestore per l'evento Click ha terminato l’operazione, il messaggio di stato viene nascosto e l'ora visualizzata nel riquadro viene aggiornata.

    L'esempio è concepito per illustrare meglio l'area della pagina rappresentata dal controllo UpdatePanel.

    <%@ 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 Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
            </ProgressTemplate>
        </asp:UpdateProgress>

    </div>
    </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 Button1_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "Page refreshed at " +
            DateTime.Now.ToString();       
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
            </ProgressTemplate>
        </asp:UpdateProgress>

    </div>
    </form>
</body>
</html>

Utilizzo di più controlli UpdateProgress

In un controllo UpdateProgress nella pagina può essere visualizzato un messaggio di stato per tutti i controlli UpdatePanel nella pagina. I postback asincroni creati in un controllo UpdatePanel determinano la visualizzazione del messaggio relativo da parte del controllo UpdateProgress. Anche nei postback da controlli che rappresentano trigger per il pannello viene visualizzato il messaggio.

È possibile associare il controllo UpdateProgress con un singolo controllo UpdatePanel impostando la proprietà AssociatedUpdatePanelID del controllo di stato. In tal caso, nel controllo UpdateProgress viene visualizzato un messaggio solo quando viene creato un postback nel controllo UpdatePanel associato.

Nella procedura successiva, due controlli UpdateProgress vengono aggiunti a una pagina, ciascuno associato a un controllo UpdatePanel diverso.

Per utilizzare più controlli UpdateProgress in una pagina

  1. Creare una nuova pagina e passare alla visualizzazione Progettazione.

  2. Nella scheda Estensioni AJAX della casella degli strumenti fare doppio clic sul controllo ScriptManager per aggiungerlo alla pagina.

  3. Fare doppio clic sul controllo UpdatePanel per due volte per aggiungere due istanze del controllo alla pagina.

  4. In ogni controllo UpdatePanel, aggiungere un controllo Label e un controllo Button.

  5. Impostare la proprietà Text di entrambi i controlli Label su Pannello inizialmente sottoposto a rendering.

  6. Fare doppio clic su ogni controllo Button per aggiungere un gestore per l'evento Click di ogni pulsante.

  7. Aggiungere il codice riportato di seguito a ciascun gestore Click. Viene creato artificialmente un ritardo di tre secondi, quindi viene visualizzata l'ora corrente.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}

protected void Button2_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label2.Text = "Page refreshed at " +
        DateTime.Now.ToString();       

}

  8. Passare alla visualizzazione Progettazione.

  9. Fare clic all'interno del primo controllo UpdatePanel, quindi aggiungere un controllo UpdateProgress.

  10. Nel controllo UpdateProgress aggiungere il testo Aggiornamento di Panel1.

    In questo modo viene impostata la proprietà ProgressTemplate.

  11. Selezionare il controllo UpdateProgress, quindi nella finestra Proprietà impostare la proprietà AssociatedUpdatePanelID su UpdatePanel.

  12. Fare clic all'interno del secondo controllo UpdatePanel, quindi aggiungere un secondo controllo UpdateProgress.

  13. Impostare il testo del controllo UpdateProgress su Aggiornamento di Panel2, quindi impostare la relativa proprietà AssociatedUpdatePanelID su UpdatePanel2.

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

  15. Fare clic sul pulsante nel primo pannello.

    Dopo un breve ritardo, verrà visualizzato il messaggio di stato associato al primo pannello. L’altro controllo UpdateProgress non viene visualizzato.

  16. Fare clic sul pulsante nel secondo pannello.

    Viene visualizzato il messaggio di stato associato al secondo pannello.

    Nota:

    Per impostazione predefinita, l’avvio di un nuovo postback asincrono mentre è in corso un postback asincrono precedente annulla il primo postback. Per ulteriori informazioni, vedere la classe Assegnazione della precedenza a un postback asincrono specifico.

    L'esempio è concepito per illustrare meglio l'area della pagina rappresentata dal controllo UpdatePanel.

    <%@ 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 Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1"  Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        Panel1 updating...
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Label ID="Label2"  Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button2"  Text="Button" OnClick="Button2_Click" />
                <asp:UpdateProgress ID="UpdateProgress2"  AssociatedUpdatePanelID="UpdatePanel2">
                    <ProgressTemplate>
                        Panel2 updating....
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </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 Button1_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "Page refreshed at " +
            DateTime.Now.ToString();       
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label2.Text = "Page refreshed at " +
            DateTime.Now.ToString();       

    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1"  Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        Panel1 updating...
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Label ID="Label2"  Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button2"  Text="Button" OnClick="Button2_Click" />
                <asp:UpdateProgress ID="UpdateProgress2"  AssociatedUpdatePanelID="UpdatePanel2">
                    <ProgressTemplate>
                        Panel2 updating....
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

Verifica

In questa esercitazione vengono introdotte due modalità per utilizzare il controllo UpdateProgress. La prima modalità consiste nell’aggiungere un controllo UpdateProgress nella pagina che non è associata a nessun controllo UpdatePanel particolare. In questo caso, nel controllo viene visualizzato un messaggio di stato per tutti i controlli UpdatePanel. La seconda modalità per utilizzare il controllo dello stato consiste nell’aggiungere più controlli UpdateProgress e nell’associare ognuno di questi controlli a un controllo UpdatePanel diverso.

Vedere anche

Attività

Introduzione al controllo UpdatePanel

Concetti

Panoramica del controllo UpdateProgress

Cenni preliminari sul rendering a pagina parziale

Riferimenti

UpdateProgress

UpdatePanel