Condividi tramite

Introduzione al controllo UpdatePanel

  • Articolo

Aggiornamento: novembre 2007

In questa esercitazione verrà aggiunto il supporto dell'aggiornamento a pagina parziale a una pagina Web utilizzando due controlli server ASP.NET AJAX: il controllo ScriptManager e il controllo UpdatePanel. Questi controlli rimuovono il requisito di aggiornamento dell'intera pagina con ogni postback migliorando l'esperienza utente. Per ulteriori informazioni di base sugli aggiornamenti a pagina parziale, vedere Cenni preliminari sul rendering 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.

Per utilizzare un controllo UpdatePanel

  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 clic all'interno del controllo UpdatePanel, quindi dalla scheda Standard della casella degli strumenti fare doppio clic sui controlli Label e Button per aggiungerli al controllo UpdatePanel.

    Nota:

    Accertarsi di aggiungere i controlli Label e Button all'interno del controllo UpdatePanel.

  5. Impostare la proprietà Text del controllo Label su Pannello creato.

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

  7. Aggiungere al gestore Click, che imposta il valore dell'etichetta nel pannello sulla posizione corrente, il codice seguente.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

  8. Salvare le modifiche e premere CTRL+F5 per visualizzare la pagina in un browser.

  9. Fare clic sul pulsante.

    Il testo nel pannello cambia per visualizzare l'ora dell'ultimo aggiornamento del contenuto del pannello. Questo testo viene impostato nel gestore eventi Click del pulsante.

    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)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</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="Panel created."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" />
                </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)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div style="padding-top: 10px">
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        </div>

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

    Il contenuto del pannello cambia ogni volta che si fa clic sul pulsante, ma non viene aggiornata l'intera pagina. Per impostazione predefinita, la proprietà ChildrenAsTriggers di un controllo UpdatePanel è true. Quando questa proprietà è impostata su true, i controlli all'interno del pannello partecipano agli aggiornamenti a pagina parziale quando un controllo nel pannello provoca un postback.

Vantaggi del controllo UpdatePanel

È possibile comprendere meglio i vantaggi del controllo UpdatePanel aggiungendo alcuni controlli alla pagina che non siano inclusi nel pannello di aggiornamento. È quindi possibile osservare come il comportamento di tali controlli differisce da quello dei controlli presenti all'interno del pannello di aggiornamento.

Per dimostrare i vantaggi dell'utilizzo del controllo UpdatePanel

  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 clic all'interno del controllo UpdatePanel, quindi dalla scheda Standard della casella degli strumenti fare doppio clic su un controllo Calendar per aggiungerlo al controllo UpdatePanel.

    Nota:

    Accertarsi di aggiungere il controllo Calendar all'interno del controllo UpdatePanel.

  5. Fare clic all'esterno del controllo UpdatePanel, quindi aggiungere un secondo controllo Calendar alla pagina.

    Questo controllo non farà parte del controllo UpdatePanel.

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

  7. Spostarsi al mese precedente o successivo nel calendario che si trova all'interno del controllo UpdatePanel.

    Il mese visualizzato viene modificato senza aggiornare l'intera pagina.

  8. Spostarsi al mese precedente o successivo nel calendario che si trova all'esterno del controllo UpdatePanel.

    Viene aggiornata l'intera pagina.

    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 >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" ></asp:Calendar>    
    </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 >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" ></asp:Calendar>    
    </div>
    </form>
</body>
</html>

Aggiornamento di un controllo UpdatePanel con un pulsante esterno

Per impostazione predefinita, un controllo di postback, ad esempio un pulsante, all'interno di un controllo UpdatePanel causa un aggiornamento a pagina parziale. Per impostazione predefinita, un pulsante o un altro controllo all'esterno di un controllo UpdatePanel causa l'aggiornamento dell'intera pagina, come è stato illustrato.

È inoltre possibile configurare un controllo all'esterno del pannello di aggiornamento in modo da fungere da trigger per aggiornare solo il pannello di aggiornamento.

Per aggiornare un controllo UpdatePanel con un pulsante esterno

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

  2. Nella scheda Estensioni AJAX della casella degli strumenti, fare doppio clic sui controlli ScriptManager e UpdatePanel per aggiungerli alla pagina.

  3. Fare clic all'interno del controllo UpdatePanel, quindi nella scheda Standard della casella degli strumenti fare doppio clic sul controllo Label per aggiungerlo al controllo UpdatePanel.

  4. Impostare la proprietà Text dell'etichetta su Pannello creato.

  5. Fare clic all'esterno del controllo UpdatePanel, quindi aggiungere un controllo Button.

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

  7. Aggiungere al gestore Click, che imposta il valore dell'etichetta nel pannello sulla posizione corrente, il codice seguente.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

  8. Passare alla visualizzazione Progettazione, selezionare il controllo UpdatePanel, quindi visualizzare la finestra Proprietà.

    Nota:

    Se la finestra Proprietà non viene visualizzata, premere F4.

  9. Nel campo Trigger fare doppio clic sul pulsante con i puntini di sospensione (…).

    Verrà visualizzata la finestra di dialogo Editor dell'insieme UpdatePanelTrigger.

  10. Fare clic su Aggiungi per aggiungere un nuovo trigger.

  11. Nel campo ControlID delle proprietà del trigger utilizzare l'elenco a discesa per selezionare Button1.

    In questo esempio la proprietà EventName del trigger non è stata specificata. Pertanto, l'evento predefinito del pulsante (l'evento Click) attiverà l'aggiornamento del controllo UpdatePanel.

  12. Fare clic su OK nell'editor dell'insieme.

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

  14. Fare clic sul pulsante.

    Il testo nel pannello cambia per visualizzare l'ora in cui è stato aggiornato il contenuto del pannello.

  15. Fare clic sul pulsante più volte.

    L'ora cambia, ma l'intera pagina non viene aggiornata.

    Se si fa clic sul pulsante all'esterno del controllo UpdatePanel, viene aggiornato il contenuto del pannello poiché il pulsante è stato configurato come trigger per il controllo UpdatePanel. Un pulsante che funge da trigger esegue un postback asincrono quando si fa clic su di esso e causa un aggiornamento del pannello di aggiornamento associato. Questo comportamento è analogo al comportamento del primo esempio di questa esercitazione, dove il pulsante si trovava all'interno del controllo UpdatePanel.

    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)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </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="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" /></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)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </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="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" /></div>
    </form>
</body>
</html>

Verifica

In questa esercitazione sono stati introdotti i concetti di base dell'utilizzo di un controllo UpdatePanel per consentire aggiornamenti a pagina parziale. È necessario aggiungere sempre un controllo ScriptManager e quindi un controllo UpdatePanel. Per impostazione predefinita, i controlli all'interno del pannello causano l'aggiornamento del pannello quando eseguono un postback. I controlli esterni causano l'aggiornamento di un controllo UpdatePanel se sono stati configurati come trigger per il pannello.

Nel passaggio successivo viene illustrato come aggiungere più controlli UpdatePanel alla pagina. Per ulteriori informazioni, vedere Creazione di una pagina ASP.NET semplice con più controlli UpdatePanel.

Vedere anche

Concetti

Cenni preliminari sul rendering a pagina parziale

Riferimenti

UpdatePanel

ScriptManager