Utilisation du contrôle UpdatePanel ASP.NET avec des contrôles utilisateur
Mise à jour : novembre 2007
Vous pouvez activer des mises à jour de pages partielles pour les contrôles utilisateur comme vous le faites pour d'autres contrôles sur une page Web. Vous devez ajouter un contrôle ScriptManager à la page et affecter à sa propriété EnablePartialRendering la valeur true. Le contrôle ScriptManager gérera les mises à jour de pages partielles pour les contrôles UpdatePanel qui sont directement sur la page Web ASP.NET ou à l'intérieur d'un contrôle utilisateur.
Dans un scénario simple, vous pouvez mettre des contrôles utilisateur à l'intérieur d'un panneau de mise à jour et ils seront actualisés lorsque le contenu du panneau de mise à jour sera mis à jour. Vous pouvez également mettre un contrôle UpdatePanel à l'intérieur d'un contrôle utilisateur afin que le contrôle utilisateur prenne en charge des mises à jour de pages partielles. Toutefois, les développeurs de pages qui ajoutent le contrôle utilisateur à une page doivent ajouter explicitement un contrôle ScriptManager dans la page Web hôte.
Si vous ajoutez par programme des contrôles à votre contrôle utilisateur, vous pouvez déterminer si un contrôle ScriptManager existe dans la page. Vous pouvez vous assurer ensuite que la propriété EnablePartialRendering a la valeur true avant d'ajouter un contrôle UpdatePanel au contrôle utilisateur. Pour obtenir un exemple illustrant comment le faire dans un contrôle serveur Web, consultez Utilisation du contrôle UpdatePanel ASP.NET avec des contrôles liés aux données.
Vous pouvez avoir plusieurs contrôles utilisateur sur une page Web que vous souhaitez mettre à jour indépendamment. Dans ce cas, vous pouvez inclure un ou plusieurs contrôles UpdatePanel à l'intérieur du contrôle utilisateur et étendre le contrôle utilisateur pour exposer publiquement les fonctions des contrôles enfants UpdatePanel.
L'exemple dans ce didacticiel inclut deux contrôles utilisateur dont le contenu est à l'intérieur des contrôles UpdatePanel. Chaque contrôle utilisateur expose la propriété UpdateMode du contrôle UpdatePanel interne afin que la propriété puisse être définie explicitement pour chaque contrôle utilisateur. Chaque contrôle utilisateur expose également la méthode Update du contrôle UpdatePanel interne afin qu'une source externe puisse actualiser explicitement le contenu du contrôle utilisateur.
Création d'une page Web ASP.NET avec plusieurs contrôles utilisateur
L'exemple de ce didacticiel crée une page maître/détail d'informations sur l'employé à partir de l'exemple de base de données AdventureWorks. Un contrôle utilisateur utilise un contrôle GridView pour afficher une liste de noms d'employé et prendre en charge la sélection, la pagination et le tri. Un autre contrôle utilisateur utilise un contrôle DetailsView pour afficher les détails d'un employé sélectionné.
Le contrôle utilisateur de liste d'employés stocke l'ID de l'employé sélectionné dans l'état d'affichage. Il s'assure que seul l'employé sélectionné est mis en surbrillance dans le contrôle GridView, indépendamment de la page de données affichée ou de la façon dont la liste a été triée. Le contrôle utilisateur s'assure également que le contrôle utilisateur de détail d'employé est affiché uniquement si l'employé sélectionné est visible dans la liste d'employés.
Dans l'exemple, le contrôle utilisateur de détail d'employé contient un contrôle UpdatePanel. Le panneau de mise à jour est actualisé lorsqu'un employé est sélectionné. Il est également actualisé lorsque l'utilisateur se déplace loin de la page de contrôle GridView qui affiche l'employé sélectionné. Si l'utilisateur consulte une page du contrôle GridView qui n'inclut pas l'employé sélectionné, le contrôle utilisateur de détail d'employé n'est pas affiché et le panneau de mise à jour n'est pas mis à jour.
Insertion d'un contrôle UpdatePanel dans le contrôle utilisateur
La première étape pour créer des contrôles utilisateur qui s'actualisent indépendamment est d'inclure un contrôle UpdatePanel dans le contrôle utilisateur, comme illustré dans l'exemple suivant.
<%@ Control Language="VB" AutoEventWireup="true" CodeFile="EmployeeInfo.ascx.vb" Inherits="EmployeeInfo" %>
<asp:UpdatePanel ID="EmployeeInfoUpdatePanel" >
<ContentTemplate>
<asp:Label ID="LastUpdatedLabel" ></asp:Label>
<asp:DetailsView ID="EmployeeDetailsView" Height="50px" Width="410px" AutoGenerateRows="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataSourceID="EmployeeDataSource" ForeColor="Black" GridLines="None">
<FooterStyle BackColor="Tan" />
<EditRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<Fields>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
<asp:BoundField DataField="EmailAddress" HeaderText="E-mail Address" SortExpression="EmailAddress" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
<asp:BoundField DataField="HireDate" HeaderText="Hire Date" SortExpression="HireDate" />
<asp:BoundField DataField="VacationHours" HeaderText="Vacation Hours" SortExpression="VacationHours" />
<asp:BoundField DataField="SickLeaveHours" HeaderText="Sick Leave Hours" SortExpression="SickLeaveHours" />
</Fields>
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:DetailsView>
<asp:SqlDataSource ID="EmployeeDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT Person.Contact.LastName, Person.Contact.FirstName, Person.Contact.EmailAddress, Person.Contact.Phone, HumanResources.Employee.HireDate, HumanResources.Employee.VacationHours, HumanResources.Employee.SickLeaveHours FROM Person.Contact INNER JOIN HumanResources.Employee ON Person.Contact.ContactID = HumanResources.Employee.ContactID WHERE HumanResources.Employee.EmployeeID = @SelectedEmployeeID">
<SelectParameters>
<asp:Parameter Name="SelectedEmployeeID" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="EmployeeInfo.ascx.cs" Inherits="EmployeeInfo" %>
<asp:UpdatePanel ID="EmployeeInfoUpdatePanel" >
<ContentTemplate>
<asp:Label ID="LastUpdatedLabel" ></asp:Label>
<asp:DetailsView ID="EmployeeDetailsView" Height="50px" Width="410px" AutoGenerateRows="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataSourceID="EmployeeDataSource" ForeColor="Black" GridLines="None">
<FooterStyle BackColor="Tan" />
<EditRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<Fields>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
<asp:BoundField DataField="EmailAddress" HeaderText="E-mail Address" SortExpression="EmailAddress" />
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
<asp:BoundField DataField="HireDate" HeaderText="Hire Date" SortExpression="HireDate" />
<asp:BoundField DataField="VacationHours" HeaderText="Vacation Hours" SortExpression="VacationHours" />
<asp:BoundField DataField="SickLeaveHours" HeaderText="Sick Leave Hours" SortExpression="SickLeaveHours" />
</Fields>
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:DetailsView>
<asp:SqlDataSource ID="EmployeeDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT Person.Contact.LastName, Person.Contact.FirstName, Person.Contact.EmailAddress, Person.Contact.Phone, HumanResources.Employee.HireDate, HumanResources.Employee.VacationHours, HumanResources.Employee.SickLeaveHours FROM Person.Contact INNER JOIN HumanResources.Employee ON Person.Contact.ContactID = HumanResources.Employee.ContactID WHERE HumanResources.Employee.EmployeeID = @SelectedEmployeeID">
<SelectParameters>
<asp:Parameter Name="SelectedEmployeeID" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
Exposition des fonctions du contrôle UpdatePanel publiquement
L'étape suivante est d'exposer la propriété UpdateMode et la méthode Update du contrôle interne UpdatePanel. Cela vous permet de définir des propriétés du contrôle UpdatePanel interne de l'extérieur du contrôle utilisateur, comme illustré dans l'exemple suivant.
Public Property UpdateMode() As UpdatePanelUpdateMode
Get
Return Me.EmployeeInfoUpdatePanel.UpdateMode
End Get
Set(ByVal value As UpdatePanelUpdateMode)
Me.EmployeeInfoUpdatePanel.UpdateMode = value
End Set
End Property
Public Sub Update()
Me.EmployeeInfoUpdatePanel.Update()
End Sub
public UpdatePanelUpdateMode UpdateMode
{
get { return this.EmployeeInfoUpdatePanel.UpdateMode; }
set { this.EmployeeInfoUpdatePanel.UpdateMode = value; }
}
public void Update()
{
this.EmployeeInfoUpdatePanel.Update();
}
Ajout de contrôles utilisateur à la page Web
Vous pouvez ajouter les contrôles utilisateur à une page Web ASP.NET et définir de façon déclarative la propriété UpdateMode du contrôle interne UpdatePanel. Dans le cadre de cet exemple, la propriété UpdateMode des deux contrôles utilisateur a la valeur Conditional. Cela signifie qu'ils sont mis à jour uniquement lorsqu'une mise à jour est demandée explicitement, comme illustré dans l'exemple suivant.
<asp:ScriptManager ID="ScriptManager1"
EnablePartialRendering="true" />
<table>
<tr>
<td valign="top">
<uc2:EmployeeList ID="EmployeeList1" UpdateMode="Conditional"
OnSelectedIndexChanged="EmployeeList1_OnSelectedIndexChanged" />
</td>
<td valign="top">
<uc1:EmployeeInfo ID="EmployeeInfo1" UpdateMode="Conditional" />
</td>
</tr>
</table>
<asp:ScriptManager ID="ScriptManager1"
EnablePartialRendering="true" />
<table>
<tr>
<td valign="top">
<uc2:EmployeeList ID="EmployeeList1" UpdateMode="Conditional"
OnSelectedIndexChanged="EmployeeList1_OnSelectedIndexChanged" />
</td>
<td valign="top">
<uc1:EmployeeInfo ID="EmployeeInfo1" UpdateMode="Conditional" />
</td>
</tr>
</table>
Ajout de code pour actualiser les contrôles utilisateur
Pour mettre à jour explicitement le contrôle utilisateur, vous appelez la méthode Update du contrôle interne UpdatePanel. L'exemple suivant inclut un gestionnaire pour l'événement SelectedIndexChanged du contrôle utilisateur de la liste d'employés, déclenché lorsque l'événement SelectedIndexChanged du contrôle interne GridView est déclenché. Le code dans le gestionnaire met à jour explicitement le contrôle utilisateur de détails d'employé si un employé est sélectionné, ou si la page actuelle dans la liste d'employés n'affiche plus l'employé sélectionné.
protected void EmployeeList1_OnSelectedIndexChanged(object sender, EventArgs e)
{
if (EmployeeList1.SelectedIndex != -1)
EmployeeInfo1.EmployeeID = EmployeeList1.EmployeeID;
else
EmployeeInfo1.EmployeeID = 0;
EmployeeInfo1.Update();
}
protected void EmployeeList1_OnSelectedIndexChanged(object sender, EventArgs e)
{
if (EmployeeList1.SelectedIndex != -1)
EmployeeInfo1.EmployeeID = EmployeeList1.EmployeeID;
else
EmployeeInfo1.EmployeeID = 0;
EmployeeInfo1.Update();
}
Voir aussi
Concepts
Vue d'ensemble du contrôle UpdatePanel
Vue d'ensemble des contrôles utilisateur ASP.NET