Creazione di una pagina ASP.NET semplice con più controlli UpdatePanel

Articolo
10/22/2014

Aggiornamento: novembre 2007

In questa esercitazione si utilizzeranno più controlli UpdatePanel in una pagina. Con l'utilizzo i più controlli UpdatePanel in una pagina è possibile aggiornare in modo incrementale aree della pagina separatamente o in combinazione. Per ulteriori informazioni sugli aggiornamenti a pagina parziale, vedere Cenni preliminari sul rendering a pagina parziale e Introduzione al controllo UpdatePanel.

Prerequisiti

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

Microsoft Visual Studio 2005 o Microsoft Visual Web Developer Express Edition.
Un sito Web ASP.NET con supporto AJAX.

Per creare una pagina con due aree ad aggiornamento indipendente

Creare una nuova pagina e passare alla visualizzazione Progettazione.
Nella scheda Estensioni AJAX della casella degli strumenti, fare doppio clic sul controllo ScriptManager per aggiungerlo alla pagina.
Fare doppio clic sul controllo UpdatePanel nella casella degli strumento per due volte per aggiungere due controlli UpdatePanel alla pagina.
Nella finestra Proprietà impostare la proprietà UpdateMode di entrambi i controlli UpdatePanel() su Conditional.
In uno dei controlli UpdatePanel aggiungere un controllo Label e impostarne la proprietà Text su Pannello creato.
Nello stesso controllo UpdatePanel aggiungere un controllo Button e impostarne la proprietà Text su Aggiorna pannello.
Nell'altro controllo UpdatePanel aggiungere un controllo Calendar.
Fare doppio clic sul pulsante Aggiorna pannello per aggiungere un gestore eventi per l' evento Click.

Aggiungere al gestore il codice seguente, che imposta il controllo Label sull'ora corrente.

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

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

Salvare le modifiche e premere CTRL+F5 per visualizzare la pagina in un browser.
Fare clic sul pulsante.

Il testo nel pannello cambia per visualizzare l'ora dell'ultimo aggiornamento del contenuto del pannello.

Nel calendario, spostarsi su un mese diverso.

L'ora nell'altro pannello non cambia. Il contenuto di entrambi i pannelli viene aggiornato in modo indipendente.

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 = "Panel 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, #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 Created"></asp:Label><br />
                <asp:Button ID="Button1"  Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </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 = "Panel refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel 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 Created"></asp:Label><br />
                <asp:Button ID="Button1"  Text="Refresh Panel 1" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

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

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 qualsiasi controllo nel pannello provoca un postback.

Nidificazione dei controlli UpdatePanel

In alcuni scenari, la nidificazione dei controlli UpdatePanel consente di fornire funzionalità dell'interfaccia utente che sarebbero difficili da fornire altrimenti. I pannelli nidificati sono utili quando si vuole essere in grado di aggiornare separatamente aree specifiche della pagina e aggiornare più aree contemporaneamente. È possibile compiere queste operazioni impostando la proprietà UpdateMode dei controlli esterni e dei controlli nidificati su Conditional. In questo modo l'area della pagina nel pannello esterno non viene aggiornata se è in corso di aggiornamento solo il pannello interno. Tuttavia, se il pannello esterno viene aggiornato, anche i pannelli nidificati vengono aggiornati.

Nell'esempio seguente viene data una dimostrazione semplificata di questo concetto.

Per nidificare controlli UpdatePanel

Creare una nuova pagina e passare alla visualizzazione Progettazione.
Nella scheda Estensioni AJAX della casella degli strumenti, fare doppio clic sul controllo ScriptManager per aggiungerlo alla pagina.
Fare doppio clic sul controllo UpdatePanel nella casella degli strumenti per aggiungere un controllo UpdatePanel alla pagina.
Fare clic all'interno del controllo UpdatePanel, quindi dalla scheda Standard della casella degli strumenti fare doppio clic su un controllo Button per aggiungerlo al controllo UpdatePanel.
Impostare la proprietà Text del pulsante su Aggiorna pannello esterno.
Nella finestra Proprietà, impostare la proprietà UpdateMode del controllo UpdatePanel() su Conditional.
Passare alla visualizzazione Origine e aggiungere il codice seguente all'interno dell'elemento <ContentTemplate> dell'elemento <asp:UpdatePanel>.
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```
Il codice visualizza l'ora e viene utilizzato per indicare l'ultimo rendering del markup.
Passare a visualizzazione Progettazione, fare clic nel controllo UpdatePanel, quindi aggiungere un secondo controllo UpdatePanel nel primo pannello.
Nella finestra Proprietà impostare la proprietà UpdateMode del controllo UpdatePanel() nidificato su Conditional.
Aggiungere un controllo Calendar all'interno del controllo UpdatePanel nidificato.
Passare alla visualizzazione Origine e aggiungere il codice seguente all'interno dell'elemento <ContentTemplate> dell'elemento <asp:UpdatePanel> nidificato.
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```
```
Last refresh <%=DateTime.Now.ToString() %> <br />
```

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

Quando si ci sposta al mese precedente o successivo nel calendario nel controllo UpdatePanel nidificato, l'ora del pannello esterno non cambia perché non viene nuovamente eseguito il rendering del contenuto. In contrasto, quando si fa clic sul pulsante nel pannello esterno, l'ora nel pannello interno viene aggiornata. Il calendario non cambia perché per impostazione predefinita la proprietà EnableViewState è true per il controllo Calendar.

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">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager id="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" >
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1"  Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" >
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" ></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </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">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel2  {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager id="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" >
            <ContentTemplate>
                <fieldset>
                <legend>Parent UpdatePanel</legend>
                Last refresh <%=DateTime.Now.ToString() %> <br />
                <asp:Button ID="Button1"  Text="Refresh Outer Panel" />
                <asp:UpdatePanel ID="UpdatePanel2" >
                    <ContentTemplate>
                        <fieldset>
                        <legend>Nested UpdatePanel</legend>
                         Last refresh <%=DateTime.Now.ToString() %> <br />
                        <asp:Calendar ID="Calendar1" ></asp:Calendar>
                        </fieldset>
                    </ContentTemplate>
                </asp:UpdatePanel>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Nota:
Il controllo Calendar non è stato aggiornato solo in apparenza. Per impostazione predefinita, quando ne viene eseguito il rendering, il calendario viene impostato sul mese e sulla data correnti. Tuttavia, in questo passaggio, quando si fa clic sul pulsante, il calendario visualizza il mese e la data selezionati precedentemente. In modo non evidente la pagina utilizza lo stato di visualizzazione del controllo Calendar per eseguire il rendering del calendario con il mese e la data selezionati. Questo comportamento evidenzia che il controllo UpdatePanel esegue la logica appropriata per assicurarsi che la pagina resti nello stato previsto dopo un postback asincrono. È possibile testare questo comportamento impostando la proprietà EnableViewState del controllo Calendar su false e rieseguire questi passaggi. In tal caso, indipendentemente dal mese su cui ci si sposta, il calendario ritornerà alla visualizzazione del mese corrente quando si fa clic sul pulsante.

Il controllo Calendar non è stato aggiornato solo in apparenza. Per impostazione predefinita, quando ne viene eseguito il rendering, il calendario viene impostato sul mese e sulla data correnti. Tuttavia, in questo passaggio, quando si fa clic sul pulsante, il calendario visualizza il mese e la data selezionati precedentemente. In modo non evidente la pagina utilizza lo stato di visualizzazione del controllo Calendar per eseguire il rendering del calendario con il mese e la data selezionati. Questo comportamento evidenzia che il controllo UpdatePanel esegue la logica appropriata per assicurarsi che la pagina resti nello stato previsto dopo un postback asincrono. È possibile testare questo comportamento impostando la proprietà EnableViewState del controllo Calendar su false e rieseguire questi passaggi. In tal caso, indipendentemente dal mese su cui ci si sposta, il calendario ritornerà alla visualizzazione del mese corrente quando si fa clic sul pulsante.

Verifica

In questa esercitazione è stato introdotto il concetto dell'utilizzo di più controlli UpdatePanel in una pagina. Quando i controlli UpdatePanel non sono nidificati è possibile aggiornare indipendentemente ogni pannello impostando la proprietà UpdateMode su Conditional. Il valore predefinito della proprietà UpdateMode è Always. Tale impostazione fa sì che il pannello venga aggiornato in risposta a qualsiasi postback asincrono.

Quando i pannelli sono nidificati, il comportamento è leggermente diverso. Se la proprietà UpdateMode viene impostata su Conditional sia per il controllo esterno sia per il controllo nidificato, il pannello interno può essere aggiornato senza aggiornare il pannello esterno. Tuttavia, se il pannello esterno viene aggiornato, anche i pannelli interni vengono aggiornati.

Vedere anche

Attività

Introduzione al controllo UpdatePanel

Concetti

Utilizzo del controllo UpdatePanel ASP.NET con più controlli con associazione a dati

Condividi tramite