Utilizzo del controllo UpdatePanel ASP.NET con pagine master

Articolo
10/22/2014

Aggiornamento: novembre 2007

Tutte le pagine ASP.NET che includono un controllo UpdatePanel richiedono anche un controllo ScriptManager. Per utilizzare i controlli UpdatePanel con le pagine master è possibile inserire un controllo ScriptManager nella pagina master. In questo scenario, la pagina master fornisce un controllo ScriptManager per ogni pagina contenuto. Se non si desidera attivare gli aggiornamenti a pagina parziale per le singole pagine contenuto, è possibile disattivare gli aggiornamenti a pagina parziale per tali pagine.

In alternativa, è possibile inserire il controllo ScriptManager in ogni pagina contenuto. Questa operazione è possibile solo se alcune delle pagine contenuto conterranno i controlli UpdatePanel.

Prerequisiti

Per implementare le procedure nell'ambiente di sviluppo in uso, è necessario disporre dei seguenti elementi:

Visual Web Developer Express Edition o Microsoft Visual Studio 2005.
Sito Web ASP.NET compatibile AJAX.

Per aggiungere un controllo UpdatePanel a una pagina di contenuto

Creare una nuova pagina master e passare alla visualizzazione Progettazione.
Nella scheda Estensioni AJAX della casella degli strumenti, fare doppio clic sul controllo ScriptManager per aggiungerlo alla pagina. Accertarsi di aggiungere il controllo ScriptManager all'esterno del controllo ContentPlaceHolder.
All'esterno del controllo ContentPlaceHolder, aggiungere la Pagina master del testo.
Dalla scheda HTML della casella degli strumenti, trascinare un elemento Righello orizzontale dopo il testo.
Creare una pagina di contenuto per la pagina master.

In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del progetto, quindi scegliere Aggiungi nuovo elemento. Nella finestra di dialogo Aggiungi nuovo elemento, selezionare la casella di controllo Seleziona pagina master, quindi scegliere OK.
All'interno del controllo Content, digitare la Pagina contenuto del testo e quindi dalla casella degli strumenti aggiungere un controllo UpdatePanel.
Aggiungere un controllo Calendar all'interno del controllo UpdatePanel.
Salvare le modifiche e quindi premere CTRL+F5 per visualizzare la pagina in un browser.

Fare clic sui controlli di spostamento al mese precedente e successivo sul calendario.

Il calendario viene modificato senza aggiornare la pagina intera. Questo è il comportamento previsto per il calendario che si trova all'interno di un controllo UpdatePanel in una pagina non associata a una pagina master.

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

<%@ Page Language="VB" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1" >
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" ></asp:Calendar>
        </fieldset>
        </contenttemplate>
    </asp:UpdatePanel>
</asp:Content>

<%@ Page Language="C#" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1" >
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" ></asp:Calendar>
        </fieldset>
        </contenttemplate>
    </asp:UpdatePanel>
</asp:Content>

<%@ Master 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 in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

<%@ Master 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 in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

Aggiornamento del controllo UpdatePanel dalla pagina master

In questa parte dell'esercitazione alla pagina master verranno aggiunti controlli che provocano un postback asincrono e quindi verrà aggiornato il controllo UpdatePanel nella pagina contenuto.

Per attivare gli aggiornamenti a pagina parziale per tutte le pagine contenuto

Nella pagina master, passare alla visualizzazione Progettazione.
Aggiungere del testo e due pulsanti dopo il controllo ScriptManager nella pagina master.
Impostare l'ID di un pulsante su DecrementButton e il relativo valore Text su "-". Impostare l'ID dell'altro pulsante su IncrementButton e il relativo valore Text su "+".

I pulsanti incrementeranno e decrementeranno la data selezionata sul calendario nella pagina contenuto.
Selezionare il pulsante + (più), quindi fare clic sul pulsante Eventi nella barra degli strumenti della finestra Proprietà e immettere MasterButton_Click nella casella Click.
Ripetere il passaggio precedente per il pulsante - (meno).
Fare doppio clic sulla pagina all'esterno dei controlli per creare un gestore eventi Page_Load.

Aggiungere il codice seguente nel gestore per registrare i due pulsanti come controlli di postback asincroni:

Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
    ScriptManager1.RegisterAsyncPostBackControl(DecrementButton)
    ScriptManager1.RegisterAsyncPostBackControl(IncrementButton)
End Sub

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);
    ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);
}

Aggiungere il codice seguente per creare un gestore Click denominato MasterButton_Click:

Protected Sub MasterButton_Click(ByVal Sender As Object, ByVal E As EventArgs)

    Select Case Sender.ID

        Case "IncrementButton"
            Me.Offset = Me.Offset + 1
        Case "DecrementButton"
            Me.Offset = Me.Offset - 1
    End Select
    Dim upl As UpdatePanel
    upl = ContentPlaceHolder1.FindControl("UpdatePanel1")
    upl.Update()
    Dim cal As Calendar
    cal = ContentPlaceHolder1.FindControl("Calendar1")
    Dim newDateTime As DateTime
    newDateTime = DateTime.Today.Add(New TimeSpan(Offset, 0, 0, 0))
    cal.SelectedDate = newDateTime
End Sub

protected void MasterButton_Click(object sender, EventArgs e)
{   
    switch (((Control)sender).ID)
    {
        case "IncrementButton":
            this.Offset = this.Offset + 1;
            break;
        case "DecrementButton":
            this.Offset = this.Offset - 1;
            break;
    }
    ((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
    Calendar cal = ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));
    DateTime newDateTime = DateTime.Today.Add(new TimeSpan(Offset, 0, 0, 0));
    cal.SelectedDate = newDateTime;
}

Aggiungere il codice seguente per creare una proprietà pubblica denominata Offset nella pagina master che tenga traccia della differenza tra la data odierna e la data selezionata.

Public Property Offset() As Integer
    Get
        If ViewState("Offset") Is Nothing Then
            Return 0
        Else : Return ViewState("Offset")
        End If
    End Get
    Set(ByVal value As Integer)
        ViewState("Offset") = value
    End Set
End Property

public Int32 Offset
{
    get
    { return (Int32)(ViewState["Offset"] ?? 0);}
    set
    { ViewState["Offset"] = value;}
}

Nella pagina contenuto, passare alla visualizzazione Progettazione e quindi fare doppio clic sul controllo Calendar per creare un gestore eventi per l'evento SelectionChanged.

Aggiungere il codice seguente al gestore eventi SelectionChanged per impostare la proprietà Offset quando viene selezionata una data.

Protected Sub Calendar1_SelectionChanged(ByVal Sender As Object, ByVal E As EventArgs)
    Dim selectedDate As DateTime
    selectedDate = Calendar1.SelectedDate
    Master.Offset = _
       Calendar1.SelectedDate.Subtract(DateTime.Today).Days

End Sub

protected void Calendar1_SelectionChanged(object sender, 
    EventArgs e)
{
    DateTime selectedDate = Calendar1.SelectedDate;
    Master.Offset =
       ((TimeSpan)Calendar1.SelectedDate.Subtract(
       DateTime.Today)).Days;
}

Passare alla pagina contenuto e aggiungere un gestore eventi Page_Load che imposti la data selezionata del calendario sulla data corrente.

Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
    Dim newDateTime As DateTime
    newDateTime = DateTime.Today.Add(New TimeSpan(Master.Offset, 0, 0, 0))
    Calendar1.SelectedDate = newDateTime
End Sub

protected void Page_Load(object sender, EventArgs e)
{
    DateTime newDateTime = 
        DateTime.Today.Add(new 
        TimeSpan(Master.Offset, 0, 0, 0));
    Calendar1.SelectedDate = newDateTime;
}

Aggiungere una direttiva @ MasterType alla pagina in modo che sia possibile fare riferimento alla proprietà Offset della pagina master come a una proprietà fortemente tipizzata.
```
<%@ MasterType VirtualPath="MasterPage.master" %>
```
```
<%@ MasterType VirtualPath="MasterPage.master" %>
```
Nella pagina contenuto, passare alla visualizzazione Progettazione e selezionare il controllo UpdatePanel.
Nella finestra Proprietà impostare la proprietà UpdatePanelUpdateMode su Conditional.
Salvare le modifiche e quindi premere CTRL+F5 per visualizzare la pagina in un browser.
Fare clic sui controlli di spostamento al mese precedente e successivo sul calendario.

Il calendario viene modificato senza aggiornare la pagina intera.

Selezionare una data sul calendario e quindi fare clic sui pulsanti della pagina master per modificare la data selezionata.

Queste modifiche vengono apportate senza aggiornare la pagina intera.

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

<%@ Page Language="VB" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<%@ MasterType VirtualPath="MasterPage.master" %>

<script >
    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
        Dim newDateTime As DateTime
        newDateTime = DateTime.Today.Add(New TimeSpan(Master.Offset, 0, 0, 0))
        Calendar1.SelectedDate = newDateTime
    End Sub
    Protected Sub Calendar1_SelectionChanged(ByVal Sender As Object, ByVal E As EventArgs)
        Dim selectedDate As DateTime
        selectedDate = Calendar1.SelectedDate
        Master.Offset = _
           Calendar1.SelectedDate.Subtract(DateTime.Today).Days

    End Sub
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1"  UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1"  OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar> 
        </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

<%@ Page Language="C#" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<%@ MasterType VirtualPath="MasterPage.master" %>

<script >
    protected void Page_Load(object sender, EventArgs e)
    {
        DateTime newDateTime = 
            DateTime.Today.Add(new 
            TimeSpan(Master.Offset, 0, 0, 0));
        Calendar1.SelectedDate = newDateTime;
    }
    protected void Calendar1_SelectionChanged(object sender, 
        EventArgs e)
    {
        DateTime selectedDate = Calendar1.SelectedDate;
        Master.Offset =
           ((TimeSpan)Calendar1.SelectedDate.Subtract(
           DateTime.Today)).Days;
    }
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1"  UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1"  OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar> 
        </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

<%@ Master Language="VB" %>

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

<script >
    Public Property Offset() As Integer
        Get
            If ViewState("Offset") Is Nothing Then
                Return 0
            Else : Return ViewState("Offset")
            End If
        End Get
        Set(ByVal value As Integer)
            ViewState("Offset") = value
        End Set
    End Property
    Protected Sub MasterButton_Click(ByVal Sender As Object, ByVal E As EventArgs)

        Select Case Sender.ID

            Case "IncrementButton"
                Me.Offset = Me.Offset + 1
            Case "DecrementButton"
                Me.Offset = Me.Offset - 1
        End Select
        Dim upl As UpdatePanel
        upl = ContentPlaceHolder1.FindControl("UpdatePanel1")
        upl.Update()
        Dim cal As Calendar
        cal = ContentPlaceHolder1.FindControl("Calendar1")
        Dim newDateTime As DateTime
        newDateTime = DateTime.Today.Add(New TimeSpan(Offset, 0, 0, 0))
        cal.SelectedDate = newDateTime
    End Sub
    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
        ScriptManager1.RegisterAsyncPostBackControl(DecrementButton)
        ScriptManager1.RegisterAsyncPostBackControl(IncrementButton)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton"  Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton"  Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

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

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

<script >
    public Int32 Offset
    {
        get
        { return (Int32)(ViewState["Offset"] ?? 0);}
        set
        { ViewState["Offset"] = value;}
    }
    protected void MasterButton_Click(object sender, EventArgs e)
    {   
        switch (((Control)sender).ID)
        {
            case "IncrementButton":
                this.Offset = this.Offset + 1;
                break;
            case "DecrementButton":
                this.Offset = this.Offset - 1;
                break;
        }
        ((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
        Calendar cal = ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));
        DateTime newDateTime = DateTime.Today.Add(new TimeSpan(Offset, 0, 0, 0));
        cal.SelectedDate = newDateTime;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);
        ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton"  Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton"  Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

Disattivazione degli aggiornamenti a pagina parziale per una pagina contenuto

Se si aggiunge un controllo ScriptManager a una pagina master, per impostazione predefinita gli aggiornamenti a pagina parziale vengono attivati per tutte le pagine contenuto. Se non si desidera attivare gli aggiornamenti a pagina parziale per una singola pagina contenuto, è possibile disattivare tale funzione. È possibile effettuare tale operazione se la pagina contenuto contiene controlli personalizzati non compatibili con gli aggiornamenti a pagina parziale.

Per disattivare gli aggiornamenti a pagina parziale per una pagina contenuto

Nella pagina contenuto, creare un gestore per l'evento Init della pagina che imposti la proprietà EnablePartialRendering del controllo ScriptManager su false.

È necessario modificare lo stato della proprietà EnablePartialRendering durante o prima dell'evento Init della pagina contenuto.

Verifica

In questa esercitazione viene illustrato come utilizzare un controllo UpdatePanel nelle pagine master. Se esiste un controllo ScriptManager nella pagina master, è possibile utilizzare i controlli UpdatePanel nelle pagine contenuto senza dichiarare un controllo ScriptManager nella pagina contenuto.

Per disattivare il rendering a pagina parziale per una singola pagina contenuto la cui pagina master ha il rendering a pagina parziale attivato, disattivare tale rendering per la pagina contenuto.

Vedere anche

Condividi tramite

Utilizzo del controllo UpdatePanel ASP.NET con pagine master

Prerequisiti

Per aggiungere un controllo UpdatePanel a una pagina di contenuto

Aggiornamento del controllo UpdatePanel dalla pagina master

Per attivare gli aggiornamenti a pagina parziale per tutte le pagine contenuto

Disattivazione degli aggiornamenti a pagina parziale per una pagina contenuto

Per disattivare gli aggiornamenti a pagina parziale per una pagina contenuto

Verifica

Vedere anche

Attività

Concetti

Riferimenti

Risorse aggiuntive