Vue d'ensemble de la classe PageRequestManager ASP.NET
Mise à jour : novembre 2007
La classe PageRequestManager de Microsoft AJAX Library gère les mises à jour de pages partielles dans le navigateur. Lorsqu'une page contient un contrôle ScriptManager et un ou plusieurs contrôles UpdatePanel, la page possède automatiquement la capacité de rendu de page partielle. La classe PageRequestManager expose des propriétés, méthodes et événements qui vous permettent de personnaliser les mises à jour de pages partielles par un script client. La classe PageRequestManager expose un modèle d'événement de page client que vous pouvez utiliser d'une manière similaire au modèle d'événement de page serveur.
Cette rubrique contient les sections suivantes :
Scénarios
Fonctionnalités
Contexte
Exemples de code
Rubriques Comment et Procédure pas à pas
Référence de classe
Scénarios
Vous pouvez activer la mise à jour de page partielle à l'aide des contrôles serveur Web ScriptManager et UpdatePanel. Les mises à jour de page partielle ne requièrent aucun script client. Toutefois, vous pouvez utiliser la classe PageRequestManager et un script client lorsque vous souhaitez effectuer une des opérations suivantes :
Contrôler la manière dont les publications (postback) asynchrones multiples sont traitées. Dans le comportement par défaut, la dernière publication a la priorité. La classe PageRequestManager vous permet d'affecter une priorité à une publication spécifique et d'annuler les autres publications en cours.
Fournir des signaux visuels, ou toute autre notification, pour marquer des régions de la page qui ont été mises à jour ou créés à la suite de la dernière publication asynchrone. Cela peut améliorer l'expérience utilisateur, surtout dans les scénarios où plusieurs contrôles UpdatePanel sont utilisés.
Afficher des messages d'état pendant des publications asynchrones. Si les publications prennent du temps à être traitées, vous pouvez vouloir afficher un indicateur de progression, tel qu'une image animée. Vous pouvez également donner à l'utilisateur la possibilité d'annuler la publication.
Fournir une gestion de message d'erreur personnalisée pour les mises à jour de pages partielles. Si une erreur inattendue se produit pendant une publication asynchrone, vous pouvez gérer l'erreur dans le script client.
Accéder à la requête et aux objets réponse sous-jacents utilisés pour la publication asynchrone.
Fonctionnalités
Les fonctionnalités de mises à jour de pages partielles de Microsoft AJAX Library comportent les éléments suivants :
Événements de cycle de vie de la page client qui sont déclenchés à des moments critiques lors de mises à jour de pages partielles.
Informations sur les contrôles UpdatePanel supprimés, mis à jour ou créés pendant une publication asynchrone.
Propriétés et méthodes qui vous permettent de déterminer dans le script client si la page est en train de traiter une publication asynchrone. Vous pouvez également utiliser ces méthodes pour arrêter une publication asynchrone en cours ou annuler de nouvelles publications.
Informations sur des données de serveur envoyées à des contrôles qui ne participent pas aux mises à jour de pages partielles.
Contexte
Lors de mises à jour de pages partielles initiées par des publications asynchrones, la classe PageRequestManager coordonne la manière dont le contenu de la page est mis à jour de façon incrémentielle dans le navigateur. Le contrôle serveur UpdatePanel et la classe cliente PageRequestManager permettent de s'abstraire de la complexité des mises à jour de pages partielles. Lorsque vous utilisez un script client et des membres de la classe PageRequestManager, vous pouvez personnaliser le comportement de la mise à jour de page partielle dans le navigateur.
Gestion des événements de mise à jour de page partielle
Lors du traitement des publications et publications asynchrones, vous pouvez gérer les événements du modèle DOM du navigateur pour exécuter un script personnalisé. Par exemple, vous pouvez exécuter le script lorsque le navigateur charge ou décharge la page.
Toutefois, ces événements DOM ne vous permettent pas d'accéder à toutes les informations pertinentes ou de contrôler le comportement lors des publications asynchrones et des mises à jour de pages partielles. Par conséquent, la classe PageRequestManager expose les événements suivants qui vous permettent de personnaliser les mises à jour de pages partielles :
Pour plus d'informations sur ces événements, consultez Utilisation d'événements PageRequestManager.
Exemples de code
L'exemple suivant indique comment utiliser l'événement pageLoaded de la classe PageRequestManager pour animer un contrôle UpdatePanel lorsque la page est mise à jour après une publication asynchrone. Dans cet exemple, les utilisateurs peuvent sélectionner une date et entrer une adresse de messagerie dans un formulaire pour faire une requête de ticket. Lorsqu'une publication asynchrone se produit (déclenchée par les liens hors du contrôle UpdatePanel), le panneau s'anime brièvement pour notifier l'utilisateur que la date a été saisie dans la zone de texte. La page contient une fenêtre indépendante qui affiche un contrôle Calendar. Le calendrier est affiché ou masqué à l'aide de la propriété Visible du contrôle. La page entière n'a pas à être actualisée lorsque le calendrier est affiché ou masqué, ou lorsqu'une date est sélectionnée, car le contrôle Calendar est à l'intérieur d'un 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">
<script >
Protected Sub ChosenDate_TextChanged(ByVal sender As Object, ByVal e As EventArgs)
Dim dt As New DateTime()
DateTime.TryParse(ChosenDate.Text, dt)
CalendarPicker.SelectedDate = dt
CalendarPicker.VisibleDate = dt
End Sub
Protected Sub Close_Click(ByVal sender As Object, ByVal e As EventArgs)
SetDateSelectionAndVisible()
End Sub
Protected Sub ShowDatePickerPopOut_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs)
DatePickerPopOut.Visible = Not (DatePickerPopOut.Visible)
End Sub
Protected Sub CalendarPicker_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs)
SetDateSelectionAndVisible()
End Sub
Private Sub SetDateSelectionAndVisible()
If (CalendarPicker.SelectedDates.Count <> 0) Then
ChosenDate.Text = CalendarPicker.SelectedDate.ToShortDateString()
End If
DatePickerPopOut.Visible = False
End Sub
Protected Sub SubmitButton_Click(ByVal sender As Object, ByVal e As EventArgs)
If (Page.IsValid) Then
MessageLabel.Text = "An email with availability was sent."
Else
MessageLabel.Text = ""
End If
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
CompareValidatorDate.ValueToCompare = DateTime.Today.ToShortDateString()
ExtraShow1.Text = DateTime.Today.AddDays(10.0).ToShortDateString()
ExtraShow2.Text = DateTime.Today.AddDays(11.0).ToShortDateString()
End Sub
Protected Sub ExtraShow_Click(ByVal sender As Object, ByVal e As EventArgs)
ChosenDate.Text = CType(sender, LinkButton).Text
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Calendar Example</title>
<style type="text/css">
body {
font-family: Tahoma;
}
.PopUpCalendarStyle
{
background-color:lightblue;
position:absolute;
visibility:show;
margin: 15px 0px 0px 10px;
z-index:99;
border: solid 2px black;
}
.UpdatePanelContainer
{
width: 260px;
height:110px;
}
</style>
</head>
<body>
<form id="form1" >
<asp:ScriptManager ID="ScriptManager1" />
<script type="text/javascript">
Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(color, duration) {
this._color = color;
this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
animatePanel: function(panelElement) {
var s = panelElement.style;
s.borderWidth = '1px';
s.borderColor = this._color;
s.borderStyle = 'solid';
window.setTimeout(
function() {{ s.borderWidth = 0; }},
this._duration
);
}
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);
var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 1000);
var postbackElement;
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
function beginRequest(sender, args) {
postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
var updatedPanels = args.get_panelsUpdated();
if (typeof(postbackElement) === "undefined") {
return;
}
else if (postbackElement.id.toLowerCase().indexOf('extrashow') > -1) {
for (i=0; i < updatedPanels.length; i++) {
panelUpdatedAnimation.animatePanel(updatedPanels[i]);
}
}
}
</script>
<h1>Tickets</h1>
<p>
<strong>Latest News</strong> Due to overwhelming response, we
have added two extra shows on:
<asp:LinkButton ID="ExtraShow1" OnClick="ExtraShow_Click" />
and
<asp:LinkButton ID="ExtraShow2" OnClick="ExtraShow_Click" />.
Don't forget curtain time is at 7:00pm sharp. No late arrivals.
</p>
<hr />
<div class="UpdatePanelContainer">
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ExtraShow1" />
<asp:AsyncPostBackTrigger ControlID="ExtraShow2" />
</Triggers>
<ContentTemplate>
<fieldset >
<legend>Check Ticket Availability</legend>Date
<asp:TextBox ID="ChosenDate" OnTextChanged="ChosenDate_TextChanged" />
<asp:ImageButton ID="ShowDatePickerPopOut" OnClick="ShowDatePickerPopOut_Click"
ImageUrl="../images/calendar.gif" AlternateText="Choose a date."
Height="20px" Width="20px" />
<asp:Panel ID="DatePickerPopOut" CssClass="PopUpCalendarStyle"
Visible="false" >
<asp:Calendar ID="CalendarPicker" OnSelectionChanged="CalendarPicker_SelectionChanged">
</asp:Calendar>
<br />
<asp:LinkButton ID="CloseDatePickerPopOut" Font-Size="small"
OnClick="Close_Click" ToolTip="Close Pop out">
Close
</asp:LinkButton>
</asp:Panel>
<br />
Email
<asp:TextBox ID="EmailTextBox" />
<br />
<br />
<asp:Button ID="SubmitButton" Text="Check" ValidationGroup="RequiredFields"
OnClick="SubmitButton_Click" />
<br />
<asp:CompareValidator ID="CompareValidatorDate"
ControlToValidate="ChosenDate" ErrorMessage="Choose a date in the future."
Operator="GreaterThanEqual" Type="Date" Display="None" ValidationGroup="RequiredFields" EnableClientScript="False"></asp:CompareValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorDate"
ControlToValidate="ChosenDate" Display="None" ErrorMessage="Date is required."
ValidationGroup="RequiredFields" EnableClientScript="False"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidatorEmail"
ControlToValidate="EmailTextBox" Display="None"
ValidationGroup="RequiredFields" ErrorMessage="The email was not correctly formatted."
ValidationExpression="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$" EnableClientScript="False"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorEmail"
ValidationGroup="RequiredFields" ControlToValidate="EmailTextBox"
Display="None" ErrorMessage="Email is required." EnableClientScript="False"></asp:RequiredFieldValidator><br />
<asp:ValidationSummary ID="ValidationSummary1"
ValidationGroup="RequiredFields" EnableClientScript="False" />
<asp:Label ID="MessageLabel" />
</fieldset>
</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 >
protected void ChosenDate_TextChanged(object sender, EventArgs e)
{
DateTime dt = new DateTime();
DateTime.TryParse(ChosenDate.Text, out dt);
CalendarPicker.SelectedDate = dt;
CalendarPicker.VisibleDate = dt;
}
protected void Close_Click(object sender, EventArgs e)
{
SetDateSelectionAndVisible();
}
protected void ShowDatePickerPopOut_Click(object sender, ImageClickEventArgs e)
{
DatePickerPopOut.Visible = !DatePickerPopOut.Visible;
}
protected void CalendarPicker_SelectionChanged(object sender, EventArgs e)
{
SetDateSelectionAndVisible();
}
private void SetDateSelectionAndVisible()
{
if (CalendarPicker.SelectedDates.Count != 0)
ChosenDate.Text = CalendarPicker.SelectedDate.ToShortDateString();
DatePickerPopOut.Visible = false;
}
protected void SubmitButton_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
MessageLabel.Text = "An email with availability was sent.";
}
else
{
MessageLabel.Text = "";
}
}
protected void Page_Load(object sender, EventArgs e)
{
CompareValidatorDate.ValueToCompare = DateTime.Today.ToShortDateString();
ExtraShow1.Text = DateTime.Today.AddDays(10.0).ToShortDateString();
ExtraShow2.Text = DateTime.Today.AddDays(11.0).ToShortDateString();
}
protected void ExtraShow_Click(object sender, EventArgs e)
{
ChosenDate.Text = ((LinkButton)sender).Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Calendar Example</title>
<style type="text/css">
body {
font-family: Tahoma;
}
.PopUpCalendarStyle
{
background-color:lightblue;
position:absolute;
visibility:show;
margin: 15px 0px 0px 10px;
z-index:99;
border: solid 2px black;
}
.UpdatePanelContainer
{
width: 260px;
height:110px;
}
</style>
</head>
<body>
<form id="form1" >
<asp:ScriptManager ID="ScriptManager1" />
<script type="text/javascript">
Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(color, duration) {
this._color = color;
this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
animatePanel: function(panelElement) {
var s = panelElement.style;
s.borderWidth = '1px';
s.borderColor = this._color;
s.borderStyle = 'solid';
window.setTimeout(
function() {{ s.borderWidth = 0; }},
this._duration
);
}
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);
var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 1000);
var postbackElement;
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
function beginRequest(sender, args) {
postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
var updatedPanels = args.get_panelsUpdated();
if (typeof(postbackElement) === "undefined") {
return;
}
else if (postbackElement.id.toLowerCase().indexOf('extrashow') > -1) {
for (i=0; i < updatedPanels.length; i++) {
panelUpdatedAnimation.animatePanel(updatedPanels[i]);
}
}
}
</script>
<h1>Tickets</h1>
<p>
<strong>Latest News</strong> Due to overwhelming response, we
have added two extra shows on:
<asp:LinkButton ID="ExtraShow1" OnClick="ExtraShow_Click" />
and
<asp:LinkButton ID="ExtraShow2" OnClick="ExtraShow_Click" />.
Don't forget curtain time is at 7:00pm sharp. No late arrivals.
</p>
<hr />
<div class="UpdatePanelContainer">
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ExtraShow1" />
<asp:AsyncPostBackTrigger ControlID="ExtraShow2" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>Check Ticket Availability</legend>Date
<asp:TextBox ID="ChosenDate" OnTextChanged="ChosenDate_TextChanged" />
<asp:ImageButton ID="ShowDatePickerPopOut" OnClick="ShowDatePickerPopOut_Click"
ImageUrl="../images/calendar.gif" AlternateText="Choose a date."
Height="20px" Width="20px" />
<asp:Panel ID="DatePickerPopOut" CssClass="PopUpCalendarStyle"
Visible="false" >
<asp:Calendar ID="CalendarPicker" OnSelectionChanged="CalendarPicker_SelectionChanged">
</asp:Calendar>
<br />
<asp:LinkButton ID="CloseDatePickerPopOut" Font-Size="small"
OnClick="Close_Click" ToolTip="Close Pop out">
Close
</asp:LinkButton>
</asp:Panel>
<br />
Email
<asp:TextBox ID="EmailTextBox" />
<br />
<br />
<asp:Button ID="SubmitButton" Text="Check" ValidationGroup="RequiredFields"
OnClick="SubmitButton_Click" />
<br />
<asp:CompareValidator ID="CompareValidatorDate"
ControlToValidate="ChosenDate" ErrorMessage="Choose a date in the future."
Operator="GreaterThanEqual" Type="Date" Display="None" ValidationGroup="RequiredFields" EnableClientScript="False"></asp:CompareValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorDate"
ControlToValidate="ChosenDate" Display="None" ErrorMessage="Date is required."
ValidationGroup="RequiredFields" EnableClientScript="False"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidatorEmail"
ControlToValidate="EmailTextBox" Display="None"
ValidationGroup="RequiredFields" ErrorMessage="The email was not correctly formatted."
ValidationExpression="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$" EnableClientScript="False"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorEmail"
ValidationGroup="RequiredFields" ControlToValidate="EmailTextBox"
Display="None" ErrorMessage="Email is required." EnableClientScript="False"></asp:RequiredFieldValidator><br />
<asp:ValidationSummary ID="ValidationSummary1"
ValidationGroup="RequiredFields" EnableClientScript="False" />
<asp:Label ID="MessageLabel" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Rubriques Comment et Procédure pas à pas
Procédure pas à pas : animation des contrôles UpdatePanel ASP.NET
Accord de priorité à une publication (postback) asynchrone spécifique
Personnalisation de la gestion des erreurs pour les contrôles UpdatePanel ASP.NET
Référence de classe
Le tableau suivant répertorie les classes relatives à la classe PageRequestManager.
Classe |
Description |
|---|---|
Gère la mise à jour de page partielle client et expose des membres pour les scripts clients personnalisés. |
|
Fournit les données d'événement pour l'événement initializeRequest, déclenché avant le démarrage de la requête asynchrone. |
|
Fournit les données d'événement pour l'événement beginRequest, déclenché après le démarrage d'une publication asynchrone et avant l'envoi de la publication au serveur. |
|
Fournit les données d'événement pour l'événement pageLoading, déclenché après avoir reçu la réponse à une publication asynchrone, mais avant toute mise à jour de contenu dans la page. Cet événement n'est pas déclenché si la publication est arrêtée ou si une exception non gérée est levée sur le serveur pendant le traitement. |
|
Fournit les données d'événement pour l'événement pageLoaded, déclenché après actualisation de tout le contenu de la page, comme résultat d'une publication synchrone ou asynchrone. Cet événement n'est pas déclenché si la publication est arrêtée ou si une exception non gérée est levée sur le serveur pendant le traitement. |
|
Fournit les données d'événement pour l'événement endRequest, déclenché après la fin d'une publication asynchrone. |