Vue d'ensemble du contrôle UpdatePanel
Mise à jour : novembre 2007
Les contrôles d'ASP.NET UpdatePanel vous permettent de générer de riches applications Web orientées client. En utilisant des contrôles UpdatePanel, vous pouvez actualiser des parties sélectionnées sur la page au lieu d'actualiser la page entière par publication (postback). On parle alors de mise à jour de page partielle. Une page Web ASP.NET qui contient un contrôle ScriptManager et un ou plusieurs contrôles UpdatePanel peut participer automatiquement aux mises à jour de pages partielles, sans script client personnalisé.
Cette rubrique contient des informations sur :
Scénarios
Contexte
Exemples de code
Référence de classe
Scénarios
Le contrôle UpdatePanel est un contrôle serveur qui vous aide à développer des pages Web ayant un comportement client complexe et qui paraissent ainsi plus interactives à l'utilisateur final. L'écriture de code pour exécuter la coordination nécessaire entre le serveur et le client afin de mettre uniquement à jour des parties spécifiées d'une page Web nécessite habituellement des connaissances approfondies d'ECMAScript (JavaScript). En utilisant le contrôle UpdatePanel, vous pouvez toutefois permettre à une page Web de participer aux mises à jour de page partielle sans écrire de script client. Vous avez la possibilité d'ajouter un script client personnalisé pour améliorer l'expérience de l'utilisateur du client le cas échéant. En utilisant un contrôle UpdatePanel, le comportement de la page est indépendant du navigateur et peut réduire potentiellement le volume de données échangé entre le client et le serveur.
Contexte
Les contrôles UpdatePanel fonctionnent en spécifiant des parties d'une page qui peuvent être mises à jour sans actualiser la page entière. Ce processus est coordonné par le contrôle serveur ScriptManager et la classe cliente PageRequestManager. Lorsque les mises à jour de pages partielles sont activées, les contrôles effectuent des publications asynchrones sur le serveur. Une publication asynchrone se comporte comme une publication normale dans la mesure où la page serveur résultante exécute le cycle de vie complet de page et de contrôle. Toutefois, avec une publication asynchrone, les mises à jour de page se limitent aux parties de la page délimitées par les contrôles UpdatePanel et marquées pour être mises à jour. Le serveur envoie uniquement le balisage HTML des éléments affectés au navigateur. Dans le navigateur, la classe cliente PageRequestManager exécute une manipulation de modèle objet de document (DOM, Document Object Model) pour remplacer le code HTML existant par le balisage à jour.
.gif "Remarque") Remarque : |
|---|
Lorsque vous utilisez des publications asynchrones ou l'objet XMLHTTPRequest, une erreur de publication peut se produire si l'URL contient un caractère codé sur deux octets. Vous pouvez résoudre ce problème en incluant un élément <base href="URL"/> dans l'élément head de la page, où l'attribut href a pour valeur la chaîne codée URL qui référence la page. Vous pouvez ajouter cet élément ajouté dynamiquement dans le code serveur. |
L'illustration suivante montre une page chargée pour la première fois et une publication asynchrone suivante qui actualise le contenu d'un contrôle UpdatePanel.
Vue d'ensemble du rendu de page partielle
.png)
Activation de mises à jour de pages partielles
Le contrôle UpdatePanel nécessite un contrôle ScriptManager dans la page Web. Par défaut, les mises à jour de pages partielles sont activées parce que la valeur par défaut de la propriété EnablePartialRendering du contrôle ScriptManager est true.
L'exemple suivant illustre un balisage qui définit un contrôle ScriptManager et un contrôle UpdatePanel dans une page. Le contrôle UpdatePanel contient un contrôle Button qui actualise le contenu à l'intérieur du panneau lorsque vous cliquez sur celui-ci. Par défaut, la propriété ChildrenAsTriggers a la valeur true. Par conséquent, le contrôle Button sert de contrôle de publication asynchrone.
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!-- Other content in the panel. -->
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!-- Other content in the panel. -->
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
Spécification du contenu du contrôle UpdatePanel
Vous ajoutez du contenu de façon déclarative à un contrôle UpdatePanel ou dans le concepteur en utilisant la propriété ContentTemplate. Dans le balisage, cette propriété est exposée en tant qu'élément ContentTemplate. Pour ajouter du contenu par programme, utilisez la propriété ContentTemplateContainer.
Lors du rendu initial d'une page qui contient un ou plusieurs contrôles UpdatePanel, tout le contenu des contrôles UpdatePanel est restitué et envoyé au navigateur. Au cours des publications asynchrones suivantes, le contenu de contrôles individuels UpdatePanel peut être mis à jour. Les mises à jour dépendent des paramètres de panneau, de l'élément ayant déclenché la publication et du code spécifique à chaque panneau.
Spécification des déclencheurs UpdatePanel
Par défaut, tout contrôle de publication à l'intérieur d'un contrôle UpdatePanel provoque une publication asynchrone et actualise le contenu du panneau. Toutefois, vous pouvez également configurer dans la page d'autres contrôles pour actualiser un contrôle UpdatePanel. Pour ce faire, définissez un déclencheur pour le contrôle UpdatePanel. Un déclencheur est une liaison qui spécifie le contrôle de publication et l'événement qui provoquent la mise à jour d'un panneau. Lorsque l'événement spécifié du contrôle de déclencheur est déclenché (par exemple, l'événement Click d'un bouton), le panneau de mise à jour est actualisé.
L'exemple suivant montre comment spécifier un gestionnaire d'événements pour le contrôle UpdatePanel.
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
<asp:ScriptManager ID="ScriptManager1"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
<asp:ScriptManager ID="ScriptManager1"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
Le déclencheur est défini à l'aide de l'élément asp:AsyncPostBackTrigger à l'intérieur de l'élément Triggers du contrôle UpdatePanel. (En modifiant la page dans Visual Studio, vous pouvez créer des déclencheurs à l'aide de la boîte de dialogue Éditeur de collections UpdatePanelTrigger.)
L'événement de contrôle d'un déclencheur est facultatif. Si vous ne spécifiez pas d'événement, l'événement pas défaut du contrôle devient le déclencheur. Par exemple, pour le contrôle Button, l'événement par défaut est l'événement Click.
Méthode d'actualisation des contrôles UpdatePanel
La liste suivante décrit les paramètres de propriété du contrôle UpdatePanel pour déterminer quand le contenu d'un panneau doit être mis à jour pendant le rendu de page partielle.
Si la propriété UpdateMode a la valeur Always, le contenu du contrôle UpdatePanel est mis à jour à chaque publication provenant d'une partie de la page, quelle qu'elle soit. Cela inclut les publications asynchrones à partir de contrôles à l'intérieur d'autres contrôles UpdatePanel et les publications à partir de contrôles qui ne sont pas à l'intérieur de contrôles UpdatePanel.
Si la propriété UpdateMode a la valeur Conditional, le contenu du contrôle UpdatePanel est mis à jour lorsqu'une des conditions suivantes est vraie :
Lorsque la publication est provoquée par un déclencheur pour ce contrôle UpdatePanel.
Lorsque vous appelez explicitement la méthode UpdatePanel du contrôle Update.
Lorsque le contrôle UpdatePanel est imbriqué à l'intérieur d'un autre contrôle UpdatePanel et que le panneau parent est mis à jour.
Lorsque la propriété ChildrenAsTriggers a la valeur true et qu'un contrôle enfant du contrôle UpdatePanel entraîne une publication. Les contrôles enfants des contrôles imbriqués UpdatePanel n'entraînent pas la mise à jour du contrôle externe UpdatePanel, sauf s'ils sont définis explicitement comme déclencheurs pour le panneau parent.
Si la propriété ChildrenAsTriggers a la valeur false et la propriété UpdateMode la valeur Always, une exception est levée. La propriété ChildrenAsTriggers est uniquement destinée à être utilisée lorsque la propriété UpdateMode a la valeur Conditional.
Utilisation de contrôles UpdatePanel dans les pages maîtres
Pour utiliser un contrôle UpdatePanel dans une page maître, vous devez décider comment inclure le contrôle ScriptManager. Si vous incluez le contrôle ScriptManager dans la page maître, il peut agir comme contrôle ScriptManager pour toutes les pages de contenu. (Pour enregistrer de façon déclarative des scripts ou des services dans une page de contenu, vous pouvez ajouter un contrôle ScriptManagerProxy à cette page de contenu.)
Si la page maître ne contient pas le contrôle ScriptManager, vous pouvez mettre individuellement le contrôle ScriptManager sur chaque page de contenu qui contient un contrôle UpdatePanel. Le choix du design dépend de la façon dont vous envisagez de gérer le script client dans votre application. Pour plus d'informations sur la gestion de script client, consultez Vue d'ensemble du contrôle ScriptManager. Pour plus d'informations sur les pages maîtres, consultez Vue d'ensemble des pages maîtres ASP.NET.
Dans certains cas, le contrôle ScriptManager figure dans la page maître et vous n'avez pas besoin de fonctions de rendu de page partielle pour une page de contenu. Dans ce cas, vous devez affecter par programme à la propriété EnablePartialRendering du contrôle ScriptManager la valeur false pour cette page de contenu.
L'exemple suivant affiche le balisage d'un contrôle ScriptManager dans la page maître et d'un contrôle UpdatePanel dans une page de contenu. Dans cet exemple, une propriété nommée LastUpdate est définie dans la page maître et est référencée à l'intérieur du contrôle UpdatePanel.
<%@ 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 LastUpdate() As DateTime
Get
If ViewState("LastUpdate") Is Nothing Then
Return DateTime.Now
Else : Return ViewState("LastUpdate")
End If
End Get
Set(ByVal value As DateTime)
ViewState("LastUpdate") = value
End Set
End Property
Protected Sub MasterButton2_Click(ByVal Sender As Object, ByVal E As EventArgs)
LastUpdate = DateTime.Now
Dim up1 As UpdatePanel
up1 = ContentPlaceHolder1.FindControl("UpdatePanel1")
up1.Update()
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
ScriptManager1.RegisterAsyncPostBackControl(Button2)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>ScriptManager in Master Page Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:Panel ID="MasterPanel1" GroupingText="Master Page">
<asp:Button ID="Button1" Text="Full Page Refresh" />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="MasterButton2_Click" />
</asp:Panel>
<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 DateTime LastUpdate
{
get
{
return (DateTime)(ViewState["LastUpdate"] ?? DateTime.Now);
}
set
{
ViewState["LastUpdate"] = value;
}
}
protected void MasterButton2_Click(object sender, EventArgs e)
{
LastUpdate = DateTime.Now;
((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
}
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(Button2);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>ScriptManager in Master Page Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:Panel ID="MasterPanel1" GroupingText="Master Page">
<asp:Button ID="Button1" Text="Full Page Refresh" />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="MasterButton2_Click" />
</asp:Panel>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" >
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
<%@ Page Language="VB" MasterPageFile="MasterVB.master"
Title="ScriptManager in Content Page" %>
<%@ MasterType VirtualPath="MasterVB.master" %>
<script >
Protected Sub Button3_Click(ByVal Sender As Object, ByVal E As EventArgs)
Master.LastUpdate = DateTime.Now
End Sub
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
runat="Server">
</asp:ScriptManagerProxy>
<asp:Panel ID="Panel2"
GroupingText="ContentPage"
>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<p>
Last updated: <strong>
<%= Master.LastUpdate.ToString() %>
</strong>
</p>
<asp:Button ID="Button3"
Text="Refresh Panel"
OnClick="Button3_Click"
/>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</asp:Content>
<%@ Page Language="C#" MasterPageFile="MasterCS.master"
Title="ScriptManager in Content Page" %>
<%@ MasterType VirtualPath="MasterCS.master" %>
<script >
protected void Button3_Click(object sender, EventArgs e)
{
Master.LastUpdate = DateTime.Now;
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
runat="Server">
<asp:Panel ID="Panel2"
GroupingText="ContentPage"
>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<p>
Last updated: <strong>
<%= Master.LastUpdate.ToString() %>
</strong>
</p>
<asp:Button ID="Button3"
Text="Refresh Panel"
OnClick="Button3_Click"
/>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</asp:Content>
Utilisation de contrôles UpdatePanel imbriqués
Les constructions UpdatePanel peuvent être imbriquées. Si le panneau parent est actualisé, tous les panneaux imbriqués le sont également.
L'exemple suivant illustre un balisage qui définit un contrôle UpdatePanel à l'intérieur d'un autre contrôle UpdatePanel. Un bouton dans le panneau parent déclenche une mise à jour du contenu dans le panneau parent et le panneau enfant. Le bouton du panneau enfant déclenche une mise à jour du panneau enfant uniquement.
<%@ 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 id="Head1" >
<title>UpdatePanelUpdateMode Example</title>
<style type="text/css">
div.NestedPanel
{
position: relative;
margin: 2% 5% 2% 5%;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="OuterPanel"
UpdateMode="Conditional"
>
<ContentTemplate>
<div>
<fieldset>
<legend>Outer Panel </legend>
<br />
<asp:Button ID="OPButton1"
Text="Outer Panel Button"
/>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="NestedPanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<div class="NestedPanel">
<fieldset>
<legend>Nested Panel 1</legend>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="NPButton1"
Text="Nested Panel 1 Button"
/>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</div>
</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 >
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>UpdatePanelUpdateMode Example</title>
<style type="text/css">
div.NestedPanel
{
position: relative;
margin: 2% 5% 2% 5%;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="OuterPanel"
UpdateMode="Conditional"
>
<ContentTemplate>
<div>
<fieldset>
<legend>Outer Panel </legend>
<br />
<asp:Button ID="OPButton1"
Text="Outer Panel Button"
/>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="NestedPanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<div class="NestedPanel">
<fieldset>
<legend>Nested Panel 1</legend>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="NPButton1"
Text="Nested Panel 1 Button"
/>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
L'exemple suivant illustre un contrôle imbriqué UpdatePanel avec un contrôle GridView. Le contrôle GridView figure à l'intérieur d'un contrôle UpdatePanel et chaque ligne GridView contient un contrôle GridView imbriqué à l'intérieur d'un autre contrôle 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>Browse Departments</title>
<script >
Protected Sub DepartmentsGridView_RowDataBound(sender As object, e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim s As SqlDataSource = CType(e.Row.FindControl("EmployeesDataSource"), SqlDataSource)
Dim r As System.Data.DataRowView = CType(e.Row.DataItem, System.Data.DataRowView)
s.SelectParameters("DepartmentID").DefaultValue = r("DepartmentID").ToString()
End If
End Sub
</script>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="DepartmentsGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CellPadding="4" DataSourceID="DepartmentDataSource"
ForeColor="#333333" GridLines="None" PageSize="3" OnRowDataBound="DepartmentsGridView_RowDataBound">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField DataField="GroupName" HeaderText="Division" SortExpression="GroupName" >
<ItemStyle Width="200px" />
</asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Department Name" SortExpression="Name" >
<ItemStyle Width="160px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Employees">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="None"
BorderWidth="1px" CellPadding="3" DataSourceID="EmployeesDataSource" GridLines="Vertical"
PageSize="4">
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" >
<ItemStyle Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" >
<ItemStyle Width="160px" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="Gainsboro" />
</asp:GridView>
<asp:Label ID="InnerTimeLabel"><%=DateTime.Now %></asp:Label>
<asp:SqlDataSource ID="EmployeesDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT HumanResources.EmployeeDepartmentHistory.DepartmentID,
HumanResources.vEmployee.EmployeeID,
HumanResources.vEmployee.FirstName,
HumanResources.vEmployee.LastName
FROM HumanResources.EmployeeDepartmentHistory
INNER JOIN HumanResources.vEmployee
ON HumanResources.EmployeeDepartmentHistory.EmployeeID = HumanResources.vEmployee.EmployeeID
WHERE HumanResources.EmployeeDepartmentHistory.DepartmentID = @DepartmentID
ORDER BY HumanResources.vEmployee.LastName ASC, HumanResources.vEmployee.FirstName ASC">
<SelectParameters>
<asp:Parameter Name="DepartmentID" DefaultValue="0" Type="int32" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<ItemStyle Height="170px" Width="260px" />
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" VerticalAlign="Top" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" VerticalAlign="Top" />
</asp:GridView>
<asp:Label ID="OuterTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="DepartmentDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT DepartmentID, Name, GroupName FROM HumanResources.Department ORDER BY Name">
</asp:SqlDataSource>
</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>Browse Departments</title>
<script >
protected void DepartmentsGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
SqlDataSource s = (SqlDataSource)e.Row.FindControl("EmployeesDataSource");
System.Data.DataRowView r = (System.Data.DataRowView)e.Row.DataItem;
s.SelectParameters["DepartmentID"].DefaultValue = r["DepartmentID"].ToString();
}
}
</script>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="DepartmentsGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CellPadding="4" DataSourceID="DepartmentDataSource"
ForeColor="#333333" GridLines="None" PageSize="3" OnRowDataBound="DepartmentsGridView_RowDataBound">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField DataField="GroupName" HeaderText="Division" SortExpression="GroupName" >
<ItemStyle Width="200px" />
</asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Department Name" SortExpression="Name" >
<ItemStyle Width="160px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Employees">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="None"
BorderWidth="1px" CellPadding="3" DataSourceID="EmployeesDataSource" GridLines="Vertical"
PageSize="4">
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" >
<ItemStyle Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" >
<ItemStyle Width="160px" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="Gainsboro" />
</asp:GridView>
<asp:Label ID="InnerTimeLabel"><%=DateTime.Now %></asp:Label>
<asp:SqlDataSource ID="EmployeesDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT HumanResources.EmployeeDepartmentHistory.DepartmentID,
HumanResources.vEmployee.EmployeeID,
HumanResources.vEmployee.FirstName,
HumanResources.vEmployee.LastName
FROM HumanResources.EmployeeDepartmentHistory
INNER JOIN HumanResources.vEmployee
ON HumanResources.EmployeeDepartmentHistory.EmployeeID = HumanResources.vEmployee.EmployeeID
WHERE HumanResources.EmployeeDepartmentHistory.DepartmentID = @DepartmentID
ORDER BY HumanResources.vEmployee.LastName ASC, HumanResources.vEmployee.FirstName ASC">
<SelectParameters>
<asp:Parameter Name="DepartmentID" DefaultValue="0" Type="int32" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<ItemStyle Height="170px" Width="260px" />
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" VerticalAlign="Top" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" VerticalAlign="Top" />
</asp:GridView>
<asp:Label ID="OuterTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="DepartmentDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT DepartmentID, Name, GroupName FROM HumanResources.Department ORDER BY Name">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Lorsqu'un contrôle interne GridView affiche une nouvelle page d'enregistrements, le panneau externe et les panneaux des autres lignes du contrôle externe GridView externe ne sont pas actualisés. Lorsque le contrôle externe GridView affiche une nouvelle page d'enregistrements, le panneau externe et les panneaux imbriqués sont tous actualisés.
Actualisation d'un UpdatePanel par programme
L'exemple suivant illustre l'actualisation d'un contrôle UpdatePanel par programme. Dans cet exemple, une page enregistre un contrôle en tant que déclencheur en appelant la méthode RegisterAsyncPostBackControl. Le code actualise le contrôle UpdatePanel par programme à l'aide de la méthode Update.
<%@ 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 Property AnsweredQuestions As SortedList
Get
If ViewState("AnsweredQuestions") IsNot Nothing Then
Return CType(ViewState("AnsweredQuestions"), SortedList)
Else
Return New SortedList()
End If
End Get
Set
ViewState("AnsweredQuestions") = value
End Set
End Property
Protected Sub Page_Load()
ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList)
End Sub
Protected Sub ChoicesRadioButtonList_SelectedIndexChanged(sender As Object, e As EventArgs)
Dim answers As SortedList = Me.AnsweredQuestions
Dim r As RadioButtonList = CType(sender, RadioButtonList)
answers(r.ToolTip) = r.SelectedValue
Me.AnsweredQuestions = answers
ResultsList.DataSource = Me.AnsweredQuestions
ResultsList.DataBind()
If Me.AnsweredQuestions.Count = SurveyDataList.Items.Count Then _
SubmitButton.Visible = True
UpdatePanel1.Update()
End Sub
Protected Sub SubmitButton_Click(sender As Object, e As EventArgs)
' Submit responses.
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Registering Controls as Async Postback Controls</title>
<style type="text/css">
.AnswerFloatPanelStyle {
background-color: bisque;
position: absolute;
right: 10px;
height: 130px;
width: 150px;
border-right: silver thin solid; border-top: silver thin solid;
border-left: silver thin solid; border-bottom: silver thin solid;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<div id="AnswerFloatPanel" class="AnswerFloatPanelStyle" >
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
Completed Questions:
<asp:DataList ID="ResultsList" >
<ItemTemplate>
<asp:Label ID="ResultQuestion" Text='<%# Eval("Key") %>' />
::
<asp:Label ID="ResultAnswer" Text='<%# Eval("Value") %>' />
</ItemTemplate>
</asp:DataList>
<p style="text-align: right">
<asp:Button ID="SubmitButton" Text="Submit" Visible="false"
OnClick="SubmitButton_Click" />
</p>
<asp:Label ID="Message" runat="Server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:XmlDataSource ID="SurveyDataSource"
XPath="/Questions/Question"
DataFile="~/App_Data/SurveyQuestions.xml"/>
<asp:DataList
ID="SurveyDataList"
DataSourceID="SurveyDataSource"
>
<ItemTemplate>
<table cellpadding="2" cellspacing="2">
<tr>
<td valign="top">
<asp:Label id="QuestionLabel" Text='<%# XPath("@Title")%>' />
</td>
</tr>
<tr><td>
<asp:RadioButtonList ID="ChoicesRadioButtonList"
DataSource='<%#XPathSelect("Choices/Choice") %>'
DataTextField="InnerText" DataValueField="InnerText"
AutoPostBack="True"
ToolTip='<%# "Question" + XPath("@ID") %>'
OnSelectedIndexChanged="ChoicesRadioButtonList_SelectedIndexChanged"/>
</td></tr>
</table>
<hr />
</ItemTemplate>
</asp:DataList>
</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 SortedList AnsweredQuestions
{
get { return (SortedList)(ViewState["AnsweredQuestions"] ?? new SortedList()); }
set { ViewState["AnsweredQuestions"] = value; }
}
protected void Page_Load()
{
ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList);
}
protected void ChoicesRadioButtonList_SelectedIndexChanged(object sender, EventArgs e)
{
SortedList answers = this.AnsweredQuestions;
RadioButtonList r = (RadioButtonList)sender;
answers[r.ToolTip] = r.SelectedValue;
this.AnsweredQuestions = answers;
ResultsList.DataSource = this.AnsweredQuestions;
ResultsList.DataBind();
if (this.AnsweredQuestions.Count == SurveyDataList.Items.Count)
SubmitButton.Visible = true;
UpdatePanel1.Update();
}
protected void SubmitButton_Click(object sender, EventArgs e)
{
// Submit responses.
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Registering Controls as Async Postback Controls</title>
<style type="text/css">
.AnswerFloatPanelStyle {
background-color: bisque;
position: absolute;
right: 10px;
height: 130px;
width: 150px;
border-right: silver thin solid; border-top: silver thin solid;
border-left: silver thin solid; border-bottom: silver thin solid;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<div id="AnswerFloatPanel" class="AnswerFloatPanelStyle" >
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
Completed Questions:
<asp:DataList ID="ResultsList" >
<ItemTemplate>
<asp:Label ID="ResultQuestion" Text='<%# Eval("Key") %>' />
::
<asp:Label ID="ResultAnswer" Text='<%# Eval("Value") %>' />
</ItemTemplate>
</asp:DataList>
<p style="text-align: right">
<asp:Button ID="SubmitButton" Text="Submit" Visible="false"
OnClick="SubmitButton_Click" />
</p>
<asp:Label ID="Message" runat="Server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:XmlDataSource ID="SurveyDataSource"
XPath="/Questions/Question"
DataFile="~/App_Data/SurveyQuestions.xml"/>
<asp:DataList
ID="SurveyDataList"
DataSourceID="SurveyDataSource"
>
<ItemTemplate>
<table cellpadding="2" cellspacing="2">
<tr>
<td valign="top">
<asp:Label id="QuestionLabel" Text='<%# XPath("@Title")%>' />
</td>
</tr>
<tr><td>
<asp:RadioButtonList ID="ChoicesRadioButtonList"
DataSource='<%#XPathSelect("Choices/Choice") %>'
DataTextField="InnerText" DataValueField="InnerText"
AutoPostBack="True"
ToolTip='<%# "Question" + XPath("@ID") %>'
OnSelectedIndexChanged="ChoicesRadioButtonList_SelectedIndexChanged"/>
</td></tr>
</table>
<hr />
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
Création de contrôles UpdatePanel par programme
Pour ajouter un contrôle UpdatePanel par programme à une page, vous devez créer une nouvelle instance du contrôle UpdatePanel. Vous pouvez lui ajouter des contrôles à l'aide de la propriété ContentTemplateContainer et de la méthode ControlCollection.Add. N'ajoutez pas de contrôles directement à la propriété ContentTemplate.
Lorsqu'un contrôle UpdatePanel est ajouté par programme, seules les publications provenant de contrôles du même conteneur d'attribution de noms que le contrôle UpdatePanel peuvent être utilisées comme déclencheurs pour le panneau.
L'exemple suivant illustre l'ajout par programme d'un contrôle UpdatePanel dans une page. L'exemple ajoute Label et un contrôle Button au panneau à l'aide de la propriété ContentTemplateContainer. La propriété ChildrenAsTriggers étant par défaut true, le contrôle Button sert de déclencheur pour le panneau.
<%@ 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 Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
Dim up1 As UpdatePanel
up1 = New UpdatePanel()
up1.ID = "UpdatePanel1"
up1.UpdateMode = UpdatePanelUpdateMode.Conditional
Dim button1 As Button
button1 = New Button()
button1.ID = "Button1"
button1.Text = "Submit"
AddHandler button1.Click, AddressOf Button_Click
Dim label1 As Label
label1 = New Label()
label1.ID = "Label1"
label1.Text = "A full page postback occurred."
up1.ContentTemplateContainer.Controls.Add(button1)
up1.ContentTemplateContainer.Controls.Add(label1)
Page.Form.Controls.Add(up1)
End Sub
Protected Sub Button_Click(ByVal Sender As Object, ByVal E As EventArgs)
Dim lbl As Label
lbl = Page.FindControl("Label1")
lbl.Text = "Panel refreshed at " & _
DateTime.Now.ToString()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="TheScriptManager"
/>
</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 Page_Load(object sender, EventArgs e)
{
UpdatePanel up1 = new UpdatePanel();
up1.ID = "UpdatePanel1";
up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
Button button1 = new Button();
button1.ID = "Button1";
button1.Text = "Submit";
button1.Click += new EventHandler(Button_Click);
Label label1 = new Label();
label1.ID = "Label1";
label1.Text = "A full page postback occurred.";
up1.ContentTemplateContainer.Controls.Add(button1);
up1.ContentTemplateContainer.Controls.Add(label1);
Page.Form.Controls.Add(up1);
}
protected void Button_Click(object sender, EventArgs e)
{
((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +
DateTime.Now.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="TheScriptManager"
/>
</div>
</form>
</body>
</html>
Contrôles non compatibles avec les contrôles UpdatePanel
Les contrôles ASP.NET suivants ne sont pas compatibles avec les mises à jour de pages partielles et ne sont par conséquent pas conçus pour fonctionner à l'intérieur d'un contrôle UpdatePanel :
Contrôle TreeView sous plusieurs conditions. L'activation des rappels qui ne font pas partie d'une publication asynchrone en est un exemple. La définition directe des styles comme propriétés de contrôle au lieu d'appliquer implicitement le style au contrôle par une référence aux styles CSS en est en autre. Tout comme la propriété EnableClientScript lorsqu'elle a la valeur false (valeur par défaut true). Une modification de la valeur de la propriété EnableClientScript entre deux publications asynchrones fait également partie de ces conditions. Pour plus d'informations, consultez Vue d'ensemble du contrôle serveur Web TreeView.
Un contrôle Menu qui définit directement les styles sous forme de propriétés de contrôle au lieu d'appliquer implicitement le style au contrôle par une référence aux styles CSS. Pour plus d'informations, consultez Vue d'ensemble des contrôles de menu.
Des contrôles FileUpload et HtmlInputFile utilisés pour télécharger des fichiers dans le cadre d'une publication asynchrone.
Des contrôles GridView et DetailsView dont la propriété EnableSortingAndPagingCallbacks a la valeur true. La valeur par défaut est false.
Des contrôles Login, PasswordRecovery, ChangePassword et CreateUserWizard dont le contenu n'a pas été converti en modèles modifiables.
Contrôle Substitution.
Pour utiliser un contrôle FileUpload ou HtmlInputFile à l'intérieur d'un contrôle UpdatePanel, définissez le contrôle de publication qui envoie le fichier pour en faire un contrôle PostBackTrigger du panneau. Les contrôles FileUpload et HtmlInputFile peuvent être utilisés uniquement dans les scénarios de publication.
Tous les autres contrôles fonctionnent à l'intérieur des contrôles UpdatePanel. Toutefois, dans certaines circonstances, un contrôle peut ne pas fonctionner comme prévu à l'intérieur d'un contrôle UpdatePanel. Ces circonstances comprennent :
L'enregistrement d'un script en appelant les méthodes d'enregistrement du contrôle ClientScriptManager.
Le rendu d'un script ou d'un balisage directement pendant le rendu du contrôle, appelant la méthode Write par exemple.
Si le contrôle appelle les méthodes d'enregistrement de script du contrôle ClientScriptManager, vous pouvez dans certains cas utiliser les méthodes d'enregistrement de script du contrôle ScriptManager à la place. Dans ce cas, le contrôle peut fonctionner à l'intérieur d'un contrôle UpdatePanel.
Utilisation de contrôles WebPart à l'intérieur des contrôles UpdatePanel
Les WebParts ASP.NET sont un jeu intégré de contrôles de création de sites Web qui permettent aux utilisateurs finaux de modifier directement le contenu, l'apparence et le comportement de pages Web depuis un navigateur. Vous pouvez utiliser des contrôles WebPart à l'intérieur des contrôles UpdatePanel avec toutefois les restrictions suivantes :
Chaque contrôle WebPartZone doit être à l'intérieur du même contrôle UpdatePanel. Par exemple, vous ne pouvez pas avoir dans la page deux contrôles UpdatePanel, chacun avec son propre contrôle WebPartZone.
Le contrôle WebPartManager gère toutes les informations d'état du client pour les contrôles WebPart. Il doit figurer dans le contrôle le plus externe UpdatePanel d'une page.
Vous ne pouvez pas importer ou exporter des contrôles WebPart en utilisant une publication asynchrone. (Cette tâche requiert un contrôle FileUpload qui ne peut pas être utilisé avec les publications asynchrones.) Par défaut, l'importation de contrôles WebPart exécute une publication complète.
Vous ne pouvez pas ajouter ou modifier les styles de contrôles WebPart pendant les publications asynchrones.
Pour plus d'informations sur les contrôles WebPart, consultez Vue d'ensemble des WebParts ASP.NET.
Propriétés et méthodes non prises en charge lors de publications asynchrones
Les scénarios suivants permettant de définir le bouton de publication par défaut sur une page ne sont pas pris en charge lors des publications asynchrones :
Modification de DefaultButton par programme lors d'une publication asynchrone.
Modification de DefaultButton par programme lors d'une publication asynchrone lorsque le contrôle Panel est en dehors d'un contrôle UpdatePanel.
Les méthodes suivantes de la classe HttpResponse sont prises en charge uniquement dans les scénarios de publication (postback), non pas dans les scénarios de publication asynchrone :
Exemples de code
Les sections suivantes incluent des exemples qui indiquent comment créer et utiliser des contrôles UpdatePanel.
Rubriques Comment et Procédure pas à pas
Création d'une page ASP.NET simple avec plusieurs contrôles UpdatePanel
Utilisation du contrôle UpdatePanel ASP.NET avec des contrôles liés aux données
Utilisation du contrôle UpdatePanel ASP.NET avec des pages maîtres
Utilisation du contrôle UpdatePanel ASP.NET avec des contrôles utilisateur
Personnalisation de la gestion des erreurs pour les contrôles UpdatePanel ASP.NET
Procédure pas à pas : animation des contrôles UpdatePanel ASP.NET
Accord de priorité à une publication (postback) asynchrone spécifique
Référence de classe
Les classes de serveur clés pour les contrôles UpdatePanel sont répertoriées dans le tableau suivant.
Classe |
Description |
|---|---|
Contrôle serveur qui spécifie les parties d'une page Web qui peuvent participer aux mises à jour de pages partielles. |
|
Contrôle serveur qui gère le rendu de page partielle. Le contrôle ScriptManager enregistre les composants de script à envoyer au navigateur. Il substitue également le rendu de page afin de restituer uniquement les parties spécifiées de la page. |
|
Contrôle serveur qui permet aux composants imbriqués (tels que les pages de contenu ou les contrôles utilisateur) d'ajouter des références de script et de service Web. Ce contrôle est utile si l'élément parent contient déjà un contrôle ScriptManager. |
|
Classe de Microsoft AJAX Library qui coordonne le rendu de page partielle dans le navigateur. La classe PageRequestManager échange de façon asynchrone des informations avec le serveur et expose des événements et des méthodes pour le développement de scripts clients personnalisés. |
Rubriques supplémentaires
Vue d'ensemble du cycle de vie des pages ASP.NET
Voir aussi
Tâches
Introduction au contrôle UpdatePanel
Création d'une page ASP.NET simple avec plusieurs contrôles UpdatePanel
Concepts
Vue d'ensemble du contrôle UpdateProgress