Utilisation du contrôle UpdatePanel ASP.NET avec des pages maîtres

Article
10/22/2014

Mise à jour : novembre 2007

Toute page ASP.NET qui inclut un contrôle UpdatePanel requiert également un contrôle ScriptManager. Pour utiliser des contrôles UpdatePanel avec les pages maîtres, vous pouvez mettre un contrôle ScriptManager dans la page maître. Dans ce scénario, la page maître fournit un contrôle ScriptManager pour chaque page de contenu. Si vous ne souhaitez pas activer les mises à jour de pages partielles pour les pages de contenu individuelles, vous pouvez les désactiver pour ces pages.

Vous pouvez également mettre le contrôle ScriptManager dans chaque page de contenu. Cette possibilité est utile lorsque seules certaines pages de contenu intègrent des contrôles UpdatePanel.

Composants requis

Pour implémenter les procédures dans votre propre environnement de développement, vous avez besoin des éléments suivants :

Visual Web Developer Express ou Microsoft Visual Studio 2005.
Un site Web ASP.NET AJAX.

Pour ajouter un contrôle UpdatePanel à une page de contenu

Créez une nouvelle page maître et basculez en mode Design.
Sous l'onglet Extensions AJAX de la boîte à outils, double-cliquez sur le contrôle ScriptManager pour l'ajouter à la page. Assurez-vous que vous ajoutez le contrôle ScriptManager à l'extérieur du contrôle ContentPlaceHolder.
À l'extérieur du contrôle ContentPlaceHolder, ajoutez le texte Page maître.
Sous l'onglet HTML de la boîte à outils, faites glisser un élément Horizontal Rule après le texte.
Créez une page de contenu pour la page maître.

Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet, puis cliquez sur Ajouter un nouvel élément. Dans la boîte de dialogue Ajouter un nouvel élément, activez la case à cocher Sélectionner la page maître, puis cliquez sur OK.
À l'intérieur du contrôle Content, tapez le texte Page de contenu puis, dans la boîte à outils, ajoutez un contrôle UpdatePanel.
Ajoutez un contrôle Calendar à l'intérieur du contrôle UpdatePanel.
Enregistrez vos modifications et appuyez sur CTRL+F5 pour afficher la page dans un navigateur.

Cliquez sur les contrôles des mois suivant et précédent dans le calendrier.

Le calendrier change sans actualiser la page entière. Ce comportement est bien celui prévu lorsque le calendrier est à l'intérieur d'un contrôle UpdatePanel dans une page qui n'est pas associée à une page maître.

Un style est appliqué à l'exemple pour mettre en évidence la partie de la page représentée par le contrôle 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>

Actualisation du contrôle UpdatePanel de la page maître

Dans cette partie du didacticiel, vous allez ajouter des contrôles à la page maître pour déclencher une publication (postback) asynchrone puis actualiser le contrôle UpdatePanel dans la page de contenu.

Pour activer des mises à jour de pages partielles pour toutes les pages de contenu

Dans la page maître, basculez en mode Design.
Ajoutez du texte et deux boutons après le contrôle ScriptManager dans la page maître.
Donnez à un bouton l'ID DecrementButton et la valeur « - » à Text. Donnez à l'autre bouton l'ID IncrementButton et la valeur « + » à Text.

Les boutons augmentent et réduisent la date sélectionnée sur le calendrier dans la page de contenu.
Sélectionnez le bouton + (plus) puis, dans la barre d'outils de la fenêtre Propriétés, cliquez sur le bouton Événements et entrez MasterButton_Click dans la zone Click.
Répétez l'étape précédente pour le bouton - (moins).
Double-cliquez sur la page à l'extérieur des contrôles pour créer un gestionnaire d'événements Page_Load.

Ajoutez le code suivant dans le gestionnaire pour enregistrer les deux boutons comme contrôles de publication asynchrone :

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);
}

Ajoutez le code suivant pour créer un gestionnaire Click nommé 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;
}

Ajoutez le code suivant pour créer une propriété publique nommée Offset dans la page maître afin de suivre la différence entre la date du jour et la date sélectionnée.

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;}
}

Dans la page de contenu, basculez en mode Design et double-cliquez sur le contrôle Calendar pour créer un gestionnaire d'événements pour l'événement SelectionChanged.

Ajoutez le code suivant au gestionnaire d'événements SelectionChanged pour définir la propriété Offset lorsque l'utilisateur sélectionne une date.

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;
}

Basculez sur la page de contenu et ajoutez un gestionnaire d'événements Page_Load pour définir la date sélectionnée dans le calendrier à la date du jour.

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;
}

Ajoutez une directive @ MasterType à la page pour pouvoir faire référence à la propriété Offset de la page maître comme une propriété fortement typée.
```
<%@ MasterType VirtualPath="MasterPage.master" %>
```
```
<%@ MasterType VirtualPath="MasterPage.master" %>
```
Dans la page de contenu, basculez en mode Design et sélectionnez le contrôle UpdatePanel.
Dans la fenêtre Propriétés, affectez à la propriété UpdatePanelUpdateMode la valeur Conditional.
Enregistrez vos modifications et appuyez sur CTRL+F5 pour afficher la page dans un navigateur.
Cliquez sur les contrôles des mois suivant et précédent dans le calendrier.

Le calendrier change sans actualiser la page entière.

Sélectionnez une date sur le calendrier puis cliquez sur les boutons de la page maître pour modifier la date sélectionnée.

Ces modifications se produisent sans actualiser la page entière.

Un style est appliqué à l'exemple pour mettre en évidence la partie de la page représentée par le contrôle 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>

Désactivation des mises à jour de pages partielles pour une page de contenu

Si vous ajoutez un contrôle ScriptManager à une page maître, par défaut, les mises à jour de pages partielles sont activées pour toutes les pages de contenu. Si vous ne souhaitez pas activer les mises à jour partielles pour une page de contenu individuelle, vous pouvez désactiver cette fonction. Vous pouvez le faire si votre page de contenu intègre des contrôles personnalisés qui ne sont pas compatibles avec les mises à jour de pages partielles.

Pour désactiver les mises à jour de pages partielles d'une page de contenu

Dans la page de contenu, créez un gestionnaire pour l'événement Init de la page qui donne à la propriété ScriptManager du contrôle EnablePartialRendering la valeur false.

Vous devez modifier l'état de la propriété EnablePartialRendering pendant ou avant l'événement Init de la page de contenu.

Récapitulatif

Ce didacticiel explique comment utiliser un contrôle UpdatePanel dans les pages maîtres. S'il existe un contrôle ScriptManager dans la page maître, vous pouvez utiliser des contrôles UpdatePanel dans les pages de contenu sans déclarer de contrôle ScriptManager dans la page de contenu.

Pour désactiver le rendu de page partielle d'une page de contenu individuelle dont la page maître a, elle, le rendu de page partielle activé, désactivez par programme le rendu de page partielle pour la page de contenu.

Voir aussi

Partager via

Utilisation du contrôle UpdatePanel ASP.NET avec des pages maîtres

Composants requis

Pour ajouter un contrôle UpdatePanel à une page de contenu

Actualisation du contrôle UpdatePanel de la page maître

Pour activer des mises à jour de pages partielles pour toutes les pages de contenu

Désactivation des mises à jour de pages partielles pour une page de contenu

Pour désactiver les mises à jour de pages partielles d'une page de contenu

Récapitulatif

Voir aussi

Tâches

Concepts

Référence

Ressources supplémentaires