Vue d'ensemble du rendu de page partielle

Article
10/22/2014

Mise à jour : novembre 2007

Grâce au rendu de page partielle, il n'est plus nécessaire d'actualiser une page entière suite à une publication (postback). Au lieu de cela, seules les régions de la page qui ont été modifiées sont mises à jour. Comme les utilisateurs n'assistent pas au rechargement de la page entière à chaque publication, leur interaction avec la page Web est plus transparente. ASP.NET vous permet d'ajouter le rendu de page partielle à des pages Web ASP.NET nouvelles ou existantes sans écrire de script client.

Cette rubrique contient les sections suivantes :

Scénarios
Fonctionnalités
Contexte
Exemples de code
Référence de classe

Scénarios

Vous pouvez étendre des applications ASP.NET existantes et en développer de nouvelles qui intègrent des fonctionnalités AJAX (JavaScript et XML asynchrones). Utilisez des fonctionnalités AJAX lorsque vous souhaitez effectuer les opérations suivantes :

améliorer l'expérience utilisateur avec des pages Web qui sont plus riches, qui sont plus réactives aux actions utilisateur et qui se comportent comme des applications clientes traditionnelles ;
limiter l'actualisation de pages entières et éviter le scintillement des pages ;
assurer la compatibilité entre les navigateurs sans écrire de script client ;
établir une communication client/serveur de style AJAX sans écrire de script client ;
utiliser des contrôles et des composants d'ASP.NET AJAX Control Toolkit ;
développer des contrôles ASP.NET AJAX personnalisés.

Fonctionnalités du rendu de page partielle

Le rendu de page partielle s'appuie sur des contrôles serveur dans ASP.NET et sur des fonctions clientes dans Microsoft AJAX Library. Vous n'avez pas à utiliser Microsoft AJAX Library pour activer le rendu de page partielle, car cette fonctionnalité est automatiquement fournie lorsque vous utilisez des contrôles serveur ASP.NET AJAX. Vous pouvez toutefois utiliser les API exposées dans la bibliothèque cliente pour obtenir des fonctionnalités AJAX supplémentaires.

Les principales fonctionnalités d'ASP.NET qui prennent en charge le rendu de page partielle sont les suivantes :

Un modèle déclaratif qui fonctionne comme des contrôles serveur ASP.NET. Dans de nombreux scénarios, vous pouvez spécifier le rendu de page partielle uniquement à l'aide du balisage déclaratif.
Des contrôles serveur qui effectuent les tâches sous-jacentes nécessaires à la mise à jour des pages partielles. Il s'agit notamment du contrôle ScriptManager et du contrôle UpdatePanel.
Intégration entre les contrôles serveur ASP.NET AJAX et Microsoft AJAX Library pour les tâches courantes (notamment autoriser les utilisateurs à annuler une publication, afficher des messages d'avancement personnalisés pendant une publication asynchrone et déterminer le traitement des publications asynchrones simultanées).
Options de gestion des erreurs pour le rendu de page partielle, qui vous permettent de personnaliser le mode d'affichage des erreurs dans le navigateur.
Compatibilité entre les navigateurs, qui est intégrée dans les fonctionnalités AJAX d'ASP.NET. La simple utilisation de contrôles serveur appelle automatiquement les fonctionnalités de navigateur appropriées.

Contexte

Les pages Web classiques générées avec des contrôles serveur Web ASP.NET exécutent les publications initialisées dans la page par une action utilisateur, telle qu'un clic sur un bouton. Dans la réponse, le serveur effectue un rendu d'une nouvelle page. Les contrôles et le texte qui n'ont pas changé d'une publication à une autre refont fréquemment l'objet d'un rendu.

Grâce au rendu de page partielle, vous pouvez actualiser de façon asynchrone des régions déterminées de la page et rendre ainsi la page plus réactive pour l'utilisateur. Vous pouvez implémenter le rendu de page partielle à l'aide de contrôles serveur Web ASP.NET AJAX et, si vous le souhaitez, écrire du script client qui utilise les API de Microsoft AJAX Library.

Contrôles serveur pour la mise à jour de pages partielles

Pour ajouter des fonctionnalités AJAX à des pages Web ASP.NET, identifiez des sections déterminées de la page que vous souhaitez mettre à jour. Mettez ensuite le contenu de ces sections dans des contrôles UpdatePanel. Le contenu d'un contrôle UpdatePanel peut être des contrôles HTML ou d'autres contrôles ASP.NET. Vous pouvez ajouter un contrôle UpdatePanel à la page comme vous le feriez avec tout autre contrôle. Dans Visual Studio, par exemple, vous pouvez le faire glisser de la boîte à outils vers la page Web ou vous pouvez l'ajouter à l'aide du balisage déclaratif dans la page. Le balisage d'un contrôle UpdatePanel est illustré dans l'exemple suivant.

<asp:UpdatePanel ID="UpdatePanel1" >
    <ContentTemplate>
        <!-- Place updatable markup and controls here. -->
    </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel1" >
    <ContentTemplate>
        <!-- Place updatable markup and controls here. -->
    </ContentTemplate>
</asp:UpdatePanel>

Par défaut, les publications qui proviennent de contrôles à l'intérieur du panneau de mise à jour (contrôles enfants) initialisent automatiquement des publications asynchrones et génèrent la mise à jour d'une page partielle. Vous pouvez également spécifier que les contrôles à l'extérieur du panneau de mise à jour génèrent une publication asynchrone et qu'ils actualisent le contenu du contrôle UpdatePanel. Un contrôle qui génère une publication asynchrone est appelé déclencheur. Pour plus d'informations sur les déclencheurs, consultez Création d'une page ASP.NET simple avec plusieurs contrôles UpdatePanel.

Une publication asynchrone se comporte en grande partie comme une publication synchrone. Tous les événements du cycle de vie de la page serveur se produisent, tandis que l'état d'affichage et les données de formulaire sont conservés. Au cours de la phase de rendu, seul le contenu du contrôle UpdatePanel est toutefois envoyé au navigateur. Le reste de la page demeure inchangé.

Pour prendre en charge le rendu de page partielle, vous devez placer un contrôle ScriptManager dans la page. Le contrôle ScriptManager assure le suivi de tous les panneaux de mise à jour dans la page et de leurs déclencheurs. Il coordonne le comportement de rendu de page partielle sur le serveur et détermine les sections de la page devant faire l'objet d'un rendu suite à une publication asynchrone.

Un contrôle UpdatePanel dont le contenu est actualisé chaque fois qu'une publication provient de l'intérieur du panneau est illustré dans l'exemple suivant.

<%@ 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>Partial-Page Rendering Server-Side Syntax</title>
</head>
<body>
    <form id="form1" >
    <div>
      <asp:ScriptManager ID="ScriptManager1"  />
      <asp:UpdatePanel ID="UpdatePanel1" >
      <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
        Content to update incrementally without a full
        page refresh. 
        <br />
        Last update:  <%=DateTime.Now.ToString() %>
        <br />
        <asp:Calendar ID="Calendar" />
        </fieldset>
      </ContentTemplate>
      </asp:UpdatePanel>
      <script type="text/javascript" language="javascript">
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      prm.add_pageLoaded(PageLoadedEventHandler);
      function PageLoadedEventHandler() {
         // custom script
      }
      </script>
    </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>Partial-Page Rendering Server-Side Syntax</title>
</head>
<body>
    <form id="form1" >
    <div>
      <asp:ScriptManager ID="ScriptManager1"  />
      <asp:UpdatePanel ID="UpdatePanel1" >
      <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
        Content to update incrementally without a full
        page refresh. 
        <br />
        Last update:  <%=DateTime.Now.ToString() %>
        <br />
        <asp:Calendar ID="Calendar" />
        </fieldset>
      </ContentTemplate>
      </asp:UpdatePanel>
      <script type="text/javascript" language="javascript">
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      prm.add_pageLoaded(PageLoadedEventHandler);
      function PageLoadedEventHandler() {
         // custom script
      }
      </script>
    </div>
    </form>
</body>
</html>

Pour obtenir davantage d'exemples d'utilisation de contrôles UpdatePanel en vue d'activer le rendu de page partielle, consultez les rubriques listées dans la section Exemples de code.

Utilisation d'un script client pour la mise à jour de pages partielles

La classe PageRequestManager ECMAScript (JavaScript) de Microsoft AJAX Library prend en charge la mise à jour de pages partielles. Elle s'exécute dans le navigateur pour gérer la réponse aux publications asynchrones et mettre à jour le contenu de régions déterminées. Vous n'avez aucune action à effectuer pour activer cette fonctionnalité. Elle s'exécute automatiquement lorsque vous ajoutez un ou plusieurs contrôles UpdatePanel et un contrôle ScriptManager à la page.

Vous pouvez également utiliser JavaScript et la classe PageRequestManager pour personnaliser la mise à jour de pages partielles sur une page. Par exemple, vous pouvez écrire un script en vue d'accorder la priorité à une publication asynchrone spécifique lorsque plusieurs publications sont en cours. Vous pouvez également permettre aux utilisateurs d'annuler des publications qui sont en cours.

Un script client qui fournit un gestionnaire d'événements qui est appelé lorsque la page termine son chargement est illustré dans l'exemple suivant.

<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
   // custom script
}
</script>

<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
   // custom script
}
</script>

Pour plus d'informations sur l'utilisation de Microsoft AJAX Library pour le rendu de page partielle, consultez Utilisation d'événements PageRequestManager et Vue d'ensemble de la classe PageRequestManager ASP.NET.

Activation de la prise en charge du rendu de page partielle

Pour activer ou désactiver le rendu de page partielle d'une page, définissez la propriété EnablePartialRendering du contrôle ScriptManager. Vous pouvez également spécifier si le rendu de page partielle est pris en charge pour une page en définissant la propriété SupportsPartialRendering du contrôle ScriptManager. Si vous ne définissez pas la propriété SupportsPartialRendering et si la propriété EnablePartialRendering a la valeur true (valeur par défaut), les fonctions du navigateur sont alors utilisées pour déterminer si le rendu de page partielle est pris en charge.

Si le rendu de page partielle n'est pas activé pour une page, s'il a été désactivé ou s'il n'est pas pris en charge dans un navigateur, la page utilise le comportement de secours. Les actions qui exécuteraient habituellement une publication asynchrone exécutent à la place une publication synchrone et mettent à jour la page entière. Tout contrôle UpdatePanel est ignoré dans la page et son contenu fait l'objet d'un rendu comme s'il ne figurait pas à l'intérieur d'un contrôle UpdatePanel.

Remarque :
Les pages Web ASP.NET qui sont configurées en vue d'un rendu hérité ne prennent pas en charge les fonctionnalités AJAX. Pour plus d'informations, consultez ASP.NET et XHTML.

Exemples de code

Un rendu de page partielle est concrètement illustré dans l'exemple suivant. Deux contrôles UpdatePanel sont concernés. Un contrôle prend en compte l'entrée de l'utilisateur et un autre affiche un résumé de l'entrée.

<%@ Page Language="VB" %>
<%@ Import Namespace="System.Collections.Generic" %>

<!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 id="Head1" >
    <title>Enter New Employees</title>
    <script >
        Private EmployeeList As List(Of Employee)

        Protected Sub Page_Load()
            If Not IsPostBack Then
                EmployeeList = New List(Of Employee)
                EmployeeList.Add(New Employee(1, "Jump", "Dan"))
                EmployeeList.Add(New Employee(2, "Kirwan", "Yvette"))
                ViewState("EmployeeList") = EmployeeList
            Else
                EmployeeList = CType(ViewState("EmployeeList"), List(Of Employee))
            End If

            EmployeesGridView.DataSource = EmployeeList
            EmployeesGridView.DataBind()
        End Sub

        Protected Sub InsertButton_Click(ByVal sender As Object, ByVal e As EventArgs)
            If String.IsNullOrEmpty(FirstNameTextBox.Text) Or _
               String.IsNullOrEmpty(LastNameTextBox.Text) Then Return

            Dim employeeID As Integer = EmployeeList(EmployeeList.Count - 1).EmployeeID + 1

            Dim lastName As String = Server.HtmlEncode(FirstNameTextBox.Text)
            Dim firstName As String = Server.HtmlEncode(LastNameTextBox.Text)

            FirstNameTextBox.Text = String.Empty
            LastNameTextBox.Text = String.Empty

            EmployeeList.Add(New Employee(employeeID, lastName, firstName))
            ViewState("EmployeeList") = EmployeeList

            EmployeesGridView.DataBind()
            EmployeesGridView.PageIndex = EmployeesGridView.PageCount
        End Sub

        Protected Sub CancelButton_Click(ByVal sender As Object, ByVal e As EventArgs)
            FirstNameTextBox.Text = String.Empty
            LastNameTextBox.Text = String.Empty
        End Sub

        <Serializable()> _
        Public Class Employee
            Private _employeeID As Integer
            Private _lastName As String
            Private _firstName As String

            Public ReadOnly Property EmployeeID() As Integer
                Get
                    Return _employeeID
                End Get
            End Property

            Public ReadOnly Property LastName() As String
                Get
                    Return _lastName
                End Get
            End Property

            Public ReadOnly Property FirstName() As String
                Get
                    Return _firstName
                End Get
            End Property

            Public Sub New(ByVal employeeID As Integer, ByVal lastName As String, ByVal firstName As String)
                _employeeID = employeeID
                _lastName = lastName
                _firstName = firstName
            End Sub
        End Class

    </script>
</head>
<body>
    <form id="form1" >
    <div>
        &nbsp;</div>
        <asp:ScriptManager ID="ScriptManager1"  EnablePartialRendering="true" />
        <table>
            <tr>
                <td style="height: 206px" valign="top">
                    <asp:UpdatePanel ID="InsertEmployeeUpdatePanel"  UpdateMode="Conditional">
                        <ContentTemplate>
                          <table cellpadding="2" border="0" style="background-color:#7C6F57">
                            <tr>
                              <td><asp:Label ID="FirstNameLabel"  AssociatedControlID="FirstNameTextBox" 
                                             Text="First Name" ForeColor="White" /></td>
                              <td><asp:TextBox  ID="FirstNameTextBox" /></td>
                            </tr>
                            <tr>
                              <td><asp:Label ID="LastNameLabel"  AssociatedControlID="LastNameTextBox" 
                                             Text="Last Name" ForeColor="White" /></td>
                              <td><asp:TextBox  ID="LastNameTextBox" /></td>
                            </tr>
                            <tr>
                              <td></td>
                              <td>
                                <asp:LinkButton ID="InsertButton"  Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />
                                <asp:LinkButton ID="Cancelbutton"  Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />
                              </td>
                            </tr>
                          </table>
                          <asp:Label  ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
                <td style="height: 206px" valign="top">
                    <asp:UpdatePanel ID="EmployeesUpdatePanel"  UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:GridView ID="EmployeesGridView"  BackColor="LightGoldenrodYellow" BorderColor="Tan"
                                BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">
                                <FooterStyle BackColor="Tan" />
                                <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
                                <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
                                <HeaderStyle BackColor="Tan" Font-Bold="True" />
                                <AlternatingRowStyle BackColor="PaleGoldenrod" />
                                <Columns>
                                    <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />
                                    <asp:BoundField DataField="LastName" HeaderText="Last Name" />
                                    <asp:BoundField DataField="FirstName" HeaderText="First Name" />
                                </Columns>
                                <PagerSettings PageButtonCount="5" />
                            </asp:GridView>
                            <asp:Label  ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>

<!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>Enter New Employees</title>
    <script >
        private List<Employee> EmployeeList;

        protected void Page_Load()
        {
            if (!IsPostBack)
            {
                EmployeeList = new List<Employee>();
                EmployeeList.Add(new Employee(1, "Jump", "Dan"));
                EmployeeList.Add(new Employee(2, "Kirwan", "Yvette"));
                ViewState["EmployeeList"] = EmployeeList;
            }
            else
                EmployeeList = (List<Employee>)ViewState["EmployeeList"];

            EmployeesGridView.DataSource = EmployeeList;
            EmployeesGridView.DataBind();
        }

        protected void InsertButton_Click(object sender, EventArgs e)
        {
            if (String.IsNullOrEmpty(FirstNameTextBox.Text) ||
               String.IsNullOrEmpty(LastNameTextBox.Text)) { return; }

            int employeeID = EmployeeList[EmployeeList.Count-1].EmployeeID + 1;

            string lastName = Server.HtmlEncode(FirstNameTextBox.Text);
            string firstName = Server.HtmlEncode(LastNameTextBox.Text);

            FirstNameTextBox.Text = String.Empty;
            LastNameTextBox.Text = String.Empty;

            EmployeeList.Add(new Employee(employeeID, lastName, firstName));
            ViewState["EmployeeList"] = EmployeeList;

            EmployeesGridView.DataBind();
            EmployeesGridView.PageIndex = EmployeesGridView.PageCount;
        }

        protected void CancelButton_Click(object sender, EventArgs e)
        {
            FirstNameTextBox.Text = String.Empty;
            LastNameTextBox.Text = String.Empty;
        }

        [Serializable]
        public class Employee
        {
            private int _employeeID;
            private string _lastName;
            private string _firstName;

            public int EmployeeID
            {
                get { return _employeeID; }
            }

            public string LastName
            {
                get { return _lastName; }
            }

            public string FirstName
            {
                get { return _firstName; }
            }

            public Employee(int employeeID, string lastName, string firstName)
            {
                _employeeID = employeeID;
                _lastName = lastName;
                _firstName = firstName;
            }
        }

    </script>
</head>
<body>
    <form id="form1" >
    <div>
        &nbsp;</div>
        <asp:ScriptManager ID="ScriptManager1"  EnablePartialRendering="true" />
        <table>
            <tr>
                <td style="height: 206px" valign="top">
                    <asp:UpdatePanel ID="InsertEmployeeUpdatePanel"  UpdateMode="Conditional">
                        <ContentTemplate>
                          <table cellpadding="2" border="0" style="background-color:#7C6F57">
                            <tr>
                              <td><asp:Label ID="FirstNameLabel"  AssociatedControlID="FirstNameTextBox" 
                                             Text="First Name" ForeColor="White" /></td>
                              <td><asp:TextBox  ID="FirstNameTextBox" /></td>
                            </tr>
                            <tr>
                              <td><asp:Label ID="LastNameLabel"  AssociatedControlID="LastNameTextBox" 
                                             Text="Last Name" ForeColor="White" /></td>
                              <td><asp:TextBox  ID="LastNameTextBox" /></td>
                            </tr>
                            <tr>
                              <td></td>
                              <td>
                                <asp:LinkButton ID="InsertButton"  Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />
                                <asp:LinkButton ID="Cancelbutton"  Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />
                              </td>
                            </tr>
                          </table>
                          <asp:Label  ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
                <td style="height: 206px" valign="top">
                    <asp:UpdatePanel ID="EmployeesUpdatePanel"  UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:GridView ID="EmployeesGridView"  BackColor="LightGoldenrodYellow" BorderColor="Tan"
                                BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">
                                <FooterStyle BackColor="Tan" />
                                <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
                                <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
                                <HeaderStyle BackColor="Tan" Font-Bold="True" />
                                <AlternatingRowStyle BackColor="PaleGoldenrod" />
                                <Columns>
                                    <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />
                                    <asp:BoundField DataField="LastName" HeaderText="Last Name" />
                                    <asp:BoundField DataField="FirstName" HeaderText="First Name" />
                                </Columns>
                                <PagerSettings PageButtonCount="5" />
                            </asp:GridView>
                            <asp:Label  ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Rubriques Comment et Procédure pas à pas

Référence de classe

Les principales classes serveur pour le rendu de page partielle sont listées dans le tableau suivant.

Classe	Description
UpdatePanel	Spécifie les régions de la page à mettre à jour pendant le rendu de page partielle.
ScriptManager	Gère des composants AJAX dans ASP.NET, le rendu de page partielle, les requêtes du client et les réponses du serveur sur les pages Web ASP.NET.
ScriptManagerProxy	Permet aux composants imbriqués d'ajouter du script et des références de service aux pages qui contiennent déjà un contrôle ScriptManager dans un élément parent.

La principale classe cliente pour le rendu de page partielle est listée dans le tableau suivant.

Classe	Description
Sys.WebForms.PageRequestManager, classe	Gère le rendu de page partielle client et expose des membres pour le script client personnalisé.

Voir aussi

Concepts

Vue d'ensemble du contrôle UpdatePanel

Vue d'ensemble de la classe PageRequestManager ASP.NET

Partager via