Información general sobre la representación parcial de páginas
Actualización: noviembre 2007
La representación parcial de páginas elimina la necesidad de actualizar la página entera como resultado de una devolución de datos. En su lugar, sólo se actualizan las regiones concretas que han cambiado. Como resultado, la página no se vuelve a cargar completamente con cada devolución de datos, lo que agiliza en gran medida la interacción del usuario con la página web. ASP.NET permite agregar la representación parcial de páginas a las páginas web ASP.NET nuevas o existentes sin tener que escribir script de cliente.
Este tema contiene las siguientes secciones:
Escenarios
Características
Antecedentes
Ejemplos de código
Referencia de clase
Escenarios
Puede extender las aplicaciones ASP.NET existentes y desarrollar otras nuevas que incorporen la funcionalidad AJAX (Asynchronous JavaScript and XML). Utilice las características AJAX cuando desee conseguir lo siguiente:
Mejorar la experiencia del usuario con páginas web más enriquecidas, que son más receptivas a las acciones del usuario y presentan un comportamiento similar a las aplicaciones cliente tradicionales.
Reducir las actualizaciones de página completa y evitar el parpadeo de la página.
Habilitar la compatibilidad entre exploradores sin escribir script de cliente.
Llevar a cabo comunicaciones cliente-servidor de tipo AJAX sin escribir script de cliente.
Utilizar controles y componentes de ASP.NET AJAX Control Toolkit.
Desarrollar controles personalizados ASP.NET AJAX.
Características de la representación parcial de páginas
La representación parcial de páginas se basa en controles de servidor ASP.NET y en funciones de cliente de la Microsoft AJAX Library. No es preciso utilizar la Microsoft AJAX Library para habilitar la representación parcial de páginas, porque esta funcionalidad se proporciona automáticamente al utilizar los controles de servidor ASP.NET AJAX. Sin embargo, puede utilizar las API expuestas en la biblioteca de cliente para obtener funcionalidades AJAX adicionales.
Las principales características de ASP.NET que admiten la representación parcial de páginas son:
Un modelo declarativo que funciona como los controles de servidor ASP.NET. En muchos casos, puede especificar la representación parcial de la página utilizando únicamente el código de marcado declarativo.
Controles de servidor que realizan las tareas subyacentes necesarias para las actualizaciones parciales de páginas. Estos controles son ScriptManager y UpdatePanel.
Integración entre los controles de servidor ASP.NET AJAX y la Microsoft AJAX Library para las tareas comunes. Estas tareas incluyen permitir que un usuario cancele una devolución de datos, mostrar mensajes de progreso personalizados durante una devolución de datos asincrónica y determinar cómo se procesan las devoluciones de datos asincrónicas simultáneas.
Opciones de control de errores para la representación parcial de páginas, que permiten personalizar cómo se muestran los errores en el explorador.
Compatibilidad entre exploradores, integrada en la funcionalidad AJAX de ASP.NET. Al utilizar los controles de servidor, se invoca automáticamente la funcionalidad apropiada del explorador.
Antecedentes
Las páginas web típicas generadas con controles de servidor web ASP.NET realizan devoluciones de datos iniciadas por una acción del usuario en la página, como hacer clic en un botón. En la respuesta, el servidor representa una nueva página. Con frecuencia, al hacerlo se vuelven a representar controles y textos que no han cambiado entre la devolución de datos actual y la anterior.
Gracias a la representación parcial de páginas, es posible actualizar de forma asincrónica regiones individuales de la página y conseguir que sea más receptiva a las acciones del usuario. Puede implementar la representación parcial de páginas mediante controles de servidor web ASP.NET AJAX y, si lo desea, escribir script de cliente en el que se utilicen las API de la Microsoft AJAX Library.
Controles de servidor para actualizaciones parciales de páginas
Para agregar la funcionalidad de AJAX a las páginas web ASP.NET, debe identificar las secciones concretas de la página que desea actualizar. A continuación, se coloca el contenido de estas secciones en controles UpdatePanel. El contenido de un control UpdatePanel puede ser HTML u otros controles ASP.NET. Puede agregar un control UpdatePanel a la página de la misma manera que cualquier otro control. Por ejemplo, en Visual Studio puede arrastrarlo desde el cuadro de herramientas hasta la página web o agregarlo insertando código de marcado declarativo en la página. En el ejemplo siguiente se muestra el código de marcado de un control UpdatePanel:
<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>
De manera predeterminada, las devoluciones de datos que se originan automáticamente a partir de los controles contenidos en el panel de actualización (controles secundarios) inician, automáticamente, devoluciones de datos asincrónicas y dan lugar a una actualización parcial de la página. También puede especificar que los controles situados fuera del panel de actualización den lugar a una devolución de datos asincrónica y que actualicen el contenido del control UpdatePanel. Un control que produce una devolución de datos asincrónica se denomina desencadenador. Para obtener más información acerca de los desencadenadores, consulte Crear una página ASP.NET simple con varios controles UpdatePanel.
Una devolución de datos asincrónica se comporta de un modo muy parecido a una devolución de datos sincrónica. Tienen lugar todos los eventos de ciclo de vida de la página de servidor y se conservan los datos de formulario y el estado de la vista. Sin embargo, en la fase de representación, únicamente se envía al explorador el contenido del control UpdatePanel. El resto de la página permanece sin cambios.
Para admitir la representación parcial de páginas, debe colocar un control ScriptManager en ella. El control ScriptManager lleva la cuenta de todos los paneles de actualización de la página y de sus desencadenadores. Coordina el comportamiento de representación parcial de la página en el servidor y determina qué secciones de la página se representarán como resultado de una devolución de datos asincrónica.
En el ejemplo siguiente se muestra un control UpdatePanel cuyo contenido se actualiza cada vez que se origina una devolución de datos desde el interior del panel.
<%@ 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>
Para obtener más ejemplos sobre el uso de los controles UpdatePanel para habilitar la representación parcial de la página, consulte los temas mostrados en la sección Ejemplos de código.
Utilizar script de cliente para las actualizaciones parciales de páginas
La clase PageRequestManager de ECMAScript (JavaScript) de la Microsoft AJAX Library admite actualizaciones parciales de páginas. Se ejecuta en el explorador para administrar la respuesta a las devoluciones de datos asincrónicas y actualizar el contenido en las regiones individuales. No tiene que hacer nada para habilitar esta funcionalidad. Se produce automáticamente al agregar uno o más controles UpdatePanel y un control ScriptManager a la página.
También puede utilizar JavaScript y la clase PageRequestManager para personalizar las actualizaciones parciales en una página. Por ejemplo, puede escribir script que dé prioridad a una devolución de datos asincrónica concreta si se produce más de una al mismo tiempo. También puede permitir que el usuario cancele las devoluciones de datos en curso.
En el ejemplo siguiente se muestra script de cliente que proporciona un controlador de eventos al que se llama cuando finaliza la carga de la página.
<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>
Para obtener más información sobre cómo utilizar la Microsoft AJAX Library para la representación parcial de páginas, consulte Trabajar con eventos de PageRequestManager y Información general sobre la clase PageRequestManager de ASP.NET.
Habilitar la compatibilidad con la representación parcial de páginas
Para habilitar o deshabilitar la representación parcial de una página se establece la propiedad EnablePartialRendering del control ScriptManager. También puede especificar si se admite la representación parcial para una página estableciendo la propiedad SupportsPartialRendering del control ScriptManager. Si no establece la propiedad SupportsPartialRendering y si la propiedad EnablePartialRendering es true (el valor predeterminado), se utilizan las funciones del explorador para determinar si se admite la representación parcial de la página.
Si la representación parcial de páginas no está habilitada para una página, si se ha deshabilitado o si no se admite en un explorador, la página utilizará el comportamiento de retroceso. En este caso, las acciones que normalmente realizarían una devolución de datos asincrónica llevan a cabo, en su lugar, una devolución de datos sincrónica y actualizan la página completa. Se omiten todos los controles UpdatePanel de la página y su contenido se representa como si no se encontrase dentro de un control UpdatePanel.
.gif "Nota") Nota: |
|---|
Las páginas web ASP.NET que se configuran para la representación heredada no admiten la funcionalidad AJAX. Para obtener más información, consulte ASP.NET y XHTML. |
Ejemplos de código
En el ejemplo siguiente se muestra la representación parcial de una página en acción. Existen dos controles UpdatePanel. Uno de ellos acepta los datos proporcionados por el usuario y el otro muestra un resumen de dichos datos.
<%@ 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>
</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>
</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>
Temas "Cómo..." y tutoriales
Crear una página ASP.NET simple con varios controles UpdatePanel
Usar el control UpdatePanel de ASP.NET con controles enlazados a datos
Personalizar el control de errores para los controles UpdatePanel de ASP.NET
Dar prioridad a una devolución de datos asincrónica específica
Referencia de clase
En la tabla siguiente se muestra una lista de las principales clases de servidor para la representación parcial de páginas.
Clase |
Descripción |
|---|---|
Especifica las regiones de la página que se van a actualizar durante la representación parcial de la página. |
|
Administra los componentes AJAX en ASP.NET, la representación parcial de páginas, las solicitudes de cliente y las respuestas del servidor en las páginas web ASP.NET. |
|
Permite que los componentes anidados agreguen script y referencias de servicio a las páginas que ya contienen un control ScriptManager en un elemento primario. |
En la tabla siguiente se muestra una lista de la principal clase de cliente para la representación parcial de páginas.
Clase |
Descripción |
|---|---|
Administra la representación parcial de páginas de cliente y expone los miembros para el scripting de cliente personalizado. |
Vea también
Conceptos
Información general sobre el control UpdatePanel
Información general sobre la clase PageRequestManager de ASP.NET