Información general sobre la clase PageRequestManager de ASP.NET
Actualización: noviembre 2007
La clase PageRequestManager de Microsoft AJAX Library administra las actualizaciones parciales de página en el explorador. Cuando una página contiene un control ScriptManager y uno o más controles UpdatePanel, la página se habilita automáticamente para la representación parcial de páginas. La clase PageRequestManager expone las propiedades, los métodos y los eventos que permiten personalizar las actualizaciones parciales de página con script de cliente. La clase PageRequestManager expone un modelo de eventos de páginas de cliente que puede usar de forma similar a cómo usa el modelo de eventos de páginas de servidor.
Este tema contiene:
Escenarios
Características
Información general
Ejemplos de código
Temas "Cómo..." y tutoriales
Referencia de clase
Escenarios
Puede habilitar las actualizaciones parciales de páginas si usa los controles de servidor web ScriptManager y UpdatePanel. Las actualizaciones parciales de páginas no requieren ningún scripting de cliente. Sin embargo, puede usar la clase PageRequestManager y script de cliente si desea realizar lo siguiente:
Controlar cómo se procesan varias devoluciones de datos asincrónicas. El comportamiento predeterminado es que la última devolución de datos tiene prioridad. La clase PageRequestManager permite dar prioridad a una devolución de datos concreta y cancelar otras en curso.
Proporcionar indicaciones visuales u otra notificación para marcar regiones de la página que se han actualizado o creado como resultado de la última devolución de datos asincrónica. De esta forma puede mejorar la experiencia del usuario, sobre todo en escenarios donde se utilizan varios controles UpdatePanel.
Mostrar mensajes del estado durante las devoluciones de datos asincrónicas. Si las devoluciones de datos tardan bastante tiempo en procesarse, es posible que desee mostrar un indicador de progreso, como una imagen animada. También puede proporcionar al usuario la opción para cancelar la devolución de datos.
Proporcionar la administración personalizada de mensajes de error en actualizaciones parciales de páginas. Si se produce un error inesperado durante una devolución de datos asincrónica, puede administrar el error en script de cliente.
Tener acceso a los objetos de solicitud y respuesta subyacentes que se usan en la devolución de datos asincrónica.
Características
Entre las características de las actualizaciones parciales de páginas de Microsoft AJAX Library se incluyen las siguientes:
Eventos de ciclo de vida de páginas de cliente que se provocan en momentos clave durante las actualizaciones parciales de la página.
Información sobre los controles UpdatePanel eliminados, actualizados o creados durante una devolución de datos asincrónica.
Propiedades y métodos que permiten determinar en script de cliente si la página está procesando una devolución de datos asincrónica. También puede usar estos métodos para detener una devolución de datos asincrónica en curso o para cancelar las nuevas devoluciones de datos.
Información sobre los datos de servidor que se envían a los controles que no participan en actualizaciones parciales de página.
Información general
Durante las actualizaciones parciales de página iniciadas por devoluciones de datos asincrónicas, la clase PageRequestManager coordina la forma en que el contenido de la página se actualiza incrementalmente en el explorador. El control de servidor UpdatePanel y la clase de cliente PageRequestManager eliminan gran parte de la complejidad de las actualizaciones parciales de página. Al usar script de cliente y miembros de la clase PageRequestManager, puede personalizar el comportamiento de la actualización parcial de la página en el explorador.
Administrar el evento de actualización parcial de páginas
Durante el procesamiento de páginas en las devoluciones de datos y las devoluciones de datos asincrónicas, puede administrar los eventos de modelo de objetos de documento (DOM) del explorador para ejecutar script personalizado. Por ejemplo, puede ejecutar script cuando el explorador carga o descarga la página.
Sin embargo, estos eventos DOM no permiten tener acceso a toda la información pertinente ni controlar el comportamiento durante las devoluciones de datos asincrónicas y las actualizaciones parciales de página. Por tanto, la clase PageRequestManager expone los eventos siguientes que permiten personalizar las actualizaciones parciales de página:
Para obtener más información sobre estos eventos, vea Trabajar con eventos de PageRequestManager.
Ejemplos de código
El ejemplo siguiente muestra cómo usar el evento pageLoaded de la clase PageRequestManager para animar un control UpdatePanel cuando la página se actualiza tras una devolución de datos asincrónica. En este ejemplo, los usuarios pueden seleccionar una fecha y escribir una dirección de correo electrónico en un formulario para presentar una solicitud de vale. Cuando se produce una devolución de datos asincrónica (desencadenada por vínculos fuera del control UpdatePanel ), el panel se anima brevemente para notificar al usuario que el valor de fecha se escribió en el cuadro de texto. La página contiene una ventana emergente que muestra un control Calendar. El calendario se muestra u oculta con la propiedad Visible del control. No es necesario actualizar la página completa al mostrar o ocultar el calendario ni al seleccionar una fecha, ya que el control Calendar está dentro de un control 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>
Temas "Cómo..." y tutoriales
Dar prioridad a una devolución de datos asincrónica específica
Personalizar el control de errores para los controles UpdatePanel de ASP.NET
Referencia de clase
La tabla siguiente enumera las clases que se relacionan con la clase PageRequestManager.
Clase |
Descripción |
|---|---|
Administra actualizaciones parciales de páginas de cliente y expone los miembros para el scripting de cliente personalizado. |
|
Proporciona datos de evento para el evento initializeRequest, que se provoca antes de que se inicie la solicitud asincrónica. |
|
Proporciona datos de evento para el evento beginRequest, que se provoca después de que se inicie una devolución de datos asincrónica y antes de que la devolución de datos se envíe al servidor. |
|
Proporciona datos de evento para el evento pageLoading, que se provoca una vez recibida la respuesta a una devolución de datos asincrónica, pero antes de que se actualice contenido de la página. Este evento no se provoca si se detiene la devolución de datos o si se provoca una excepción no controlada en el servidor durante el procesamiento. |
|
Proporciona datos de evento para el evento pageLoaded, que se provoca una vez actualizado todo el contenido de la página, ya sea como resultado de una devolución de datos sincrónica o de una devolución de datos asincrónica. Este evento no se provoca si se detiene la devolución de datos o si se provoca una excepción no controlada en el servidor durante el procesamiento. |
|
Proporciona datos de evento para el evento endRequest, que se provoca después de que finalice una devolución de datos asincrónica. |
Vea también
Conceptos
Información general sobre el control UpdatePanel
Información general sobre la clase PageRequestManager de ASP.NET