Actualización: noviembre 2007
Habilita secciones de una página para que se representen parcialmente sin devolución de datos.
(en System.Web.Extensions.dll)
Visual Basic (Declaración)
<AspNetHostingPermissionAttribute(SecurityAction.InheritanceDemand, Level := AspNetHostingPermissionLevel.Minimal)> _
<AspNetHostingPermissionAttribute(SecurityAction.LinkDemand, Level := AspNetHostingPermissionLevel.Minimal)> _
Public Class UpdatePanel _
Inherits Control _
Implements IUpdatePanel
Dim instance As UpdatePanel
[AspNetHostingPermissionAttribute(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal)]
[AspNetHostingPermissionAttribute(SecurityAction.LinkDemand, Level = AspNetHostingPermissionLevel.Minimal)]
public class UpdatePanel : Control,
IUpdatePanel
[AspNetHostingPermissionAttribute(SecurityAction::InheritanceDemand, Level = AspNetHostingPermissionLevel::Minimal)]
[AspNetHostingPermissionAttribute(SecurityAction::LinkDemand, Level = AspNetHostingPermissionLevel::Minimal)]
public ref class UpdatePanel : public Control,
IUpdatePanel
/** @attribute AspNetHostingPermissionAttribute(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal) */
/** @attribute AspNetHostingPermissionAttribute(SecurityAction.LinkDemand, Level = AspNetHostingPermissionLevel.Minimal) */
public class UpdatePanel extends Control implements IUpdatePanel
public class UpdatePanel extends Control implements IUpdatePanel
Los controles UpdatePanel son una parte fundamental de la funcionalidad AJAX en ASP.NET. Se usan con el control ScriptManager para habilitar la representación de una página parcial. Esta representación reduce la necesidad de devoluciones de datos sincrónicas y actualizaciones de página completas cuando sólo se debe actualizar parte de la página. La representación de página parcial mejora la experiencia del usuario porque reduce el parpadeo de la pantalla que se produce durante una devolución de datos de página completa y mejora la interactividad de páginas web.
Actualizar el contenido de UpdatePanel
Cuando se habilita la representación parcial de la página, un control puede realizar una devolución de datos que actualiza la página entera o una devolución de datos asincrónica que actualiza el contenido de uno o más controles UpdatePanel. Si un control genera una devolución de datos asincrónica y actualiza un control UpdatePanel depende de lo siguiente:
Si la propiedad UpdateMode del control UpdatePanel se establece en Always, el contenido del control UpdatePanel se actualiza en cada devolución de datos que se origine en la página. Se incluyen las devoluciones de datos asincrónicas de controles que están dentro de otros controles UpdatePanel y las devoluciones de datos de controles que no están dentro de los controles UpdatePanel.
Si la propiedad UpdateMode se establece en Conditional, el contenido del control UpdatePanel se actualiza en los siguientes casos:
Al llamar explícitamente al método Update del control UpdatePanel.
Cuando se anida el control UpdatePanel dentro de otro control UpdatePanel y se actualiza el panel primario.
Cuando un control que se define como desencadenador utilizando la propiedad Triggers del control UpdatePanel genera una devolución de datos. En este escenario, el control activa explícitamente una actualización del contenido del panel. El control puede ser interior o exterior respecto al control UpdatePanel al que se asocia el desencadenador.
Cuando la propiedad ChildrenAsTriggers se establece en true y un control secundario del control UpdatePanel provoca una devolución de datos. Los controles secundarios de los controles UpdatePanel anidados no provocan actualizaciones del control UpdatePanel externo a menos que se definan explícitamente como desencadenadores.
No se permite la combinación de establecer la propiedad ChildrenAsTriggers en false y la propiedad UpdateMode en Always y produce una excepción.
Cuando el control UpdatePanel realiza un envío asincrónico, agrega un encabezado HTTP personalizado. Algunos proxies quitan este encabezado HTTP personalizado. Si es así, el servidor controla la solicitud como una devolución de datos normal, lo que genera un error en el cliente. Para resolver este problema, inserte un campo de formulario personalizado cuando realice envíos asincrónicos. A continuación, compruebe el encabezado o el campo de formulario personalizado en el código de servidor.
Uso de UpdatePanel
Puede utilizar varios controles UpdatePanel para actualizar las diferentes regiones de una página independientemente. Cuando primero se representa la página que contiene uno o más controles UpdatePanel, se representa y se envía todo el contenido de todos los controles UpdatePanel al explorador. En las devoluciones de datos asincrónica subsiguientes, el contenido de cada control UpdatePanel quizá no se pueda actualizar dependiendo de la configuración del panel y de la lógica de cliente o de servidor de los paneles individuales.
También puede utilizar los controles UpdatePanel en los escenarios siguientes:
En controles de usuario.
En las páginas maestras y de contenido.
Anidados en otros controles UpdatePanel.
Dentro de controles con plantilla como los controles GridView o Repeater.
Se pueden agregar los controles UpdatePanel mediante declaración o programación.
Puede agregar un control UpdatePanel mediante programación, pero no puede agregar desencadenadores de esta forma. Para crear comportamiento como desencadenador, puede registrar un control en la página como control de devolución de datos asincrónica. Para hacer esto llame al método RegisterAsyncPostBackControl del control ScriptManager. Después puede crear un controlador de eventos que se ejecute como respuesta a la devolución de datos asincrónica y, en el controlador, llame al método Update del control UpdatePanel.
En los ejemplos siguientes, se muestran distintos usos del control UpdatePanel.
Controles dentro de un control UpdatePanel
En el ejemplo siguiente, se muestra la colocación de los controles dentro de un control UpdatePanel para reducir el parpadeo de la pantalla al exponer en el servidor. En este ejemplo, los controles Calendar y DropDownList están dentro de un control UpdatePanel. De forma predeterminada, el valor de la propiedad UpdateMode es Always y el de la propiedad ChildrenAsTriggers es true. Por consiguiente, los controles secundarios del panel provocan una devolución de datos asincrónica.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Sub DropDownSelection_Change(ByVal Sender As Object, ByVal E As EventArgs)
Calendar1.DayStyle.BackColor = _
System.Drawing.Color.FromName(ColorList.SelectedItem.Value)
End Sub
Protected Sub Calendar1_SelectionChanged(ByVal Sender As Object, ByVal E As EventArgs)
SelectedDate.Text = Calendar1.SelectedDate.ToString()
End Sub
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1"
ShowTitle="True"
OnSelectionChanged="Calendar1_SelectionChanged"
runat="server" />
<div>
Background:
<br />
<asp:DropDownList ID="ColorList"
AutoPostBack="True"
OnSelectedIndexChanged="DropDownSelection_Change"
runat="server">
<asp:ListItem Selected="True" Value="White">
White </asp:ListItem>
<asp:ListItem Value="Silver">
Silver </asp:ListItem>
<asp:ListItem Value="DarkGray">
Dark Gray </asp:ListItem>
<asp:ListItem Value="Khaki">
Khaki </asp:ListItem>
<asp:ListItem Value="DarkKhaki"> D
ark Khaki </asp:ListItem>
</asp:DropDownList>
</div>
<br />
Selected date:
<asp:Label ID="SelectedDate"
runat="server">None.</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<br />
</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 runat="server">
void DropDownSelection_Change(Object sender, EventArgs e)
{
Calendar1.DayStyle.BackColor =
System.Drawing.Color.FromName(ColorList.SelectedItem.Value);
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
SelectedDate.Text =
Calendar1.SelectedDate.ToString();
}
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1"
ShowTitle="True"
OnSelectionChanged="Calendar1_SelectionChanged"
runat="server" />
<div>
Background:
<br />
<asp:DropDownList ID="ColorList"
AutoPostBack="True"
OnSelectedIndexChanged="DropDownSelection_Change"
runat="server">
<asp:ListItem Selected="True" Value="White">
White </asp:ListItem>
<asp:ListItem Value="Silver">
Silver </asp:ListItem>
<asp:ListItem Value="DarkGray">
Dark Gray </asp:ListItem>
<asp:ListItem Value="Khaki">
Khaki </asp:ListItem>
<asp:ListItem Value="DarkKhaki"> D
ark Khaki </asp:ListItem>
</asp:DropDownList>
</div>
<br />
Selected date:
<asp:Label ID="SelectedDate"
runat="server">None.</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<br />
</div>
</form>
</body>
</html>
Escenario de maestro/detalle con controles UpdatePanel
En el ejemplo siguiente, se usa un control UpdatePanel en un escenario de maestro/detalle que muestra los pedidos y los detalles de los pedidos de la base de datos Northwind. Un control UpdatePanel contiene el control GridView que muestra una lista de pedidos. Un segundo control UpdatePanel contiene un control DetailsView que muestra los detalles de un pedido. Al seleccionar un pedido de la primera tabla, los detalles para ese pedido se muestran en la segunda tabla. Esta tabla se actualiza de forma asincrónica basándose en la selección en la primera. Las operaciones de paginación y ordenación de la tabla de resumen de pedidos también provocan actualizaciones parciales.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
SqlDataSource2.SelectParameters("OrderID").DefaultValue = _
GridView1.SelectedDataKey.Value.ToString()
End Sub
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="OrdersPanel"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1"
AllowPaging="True"
AllowSorting="True"
Caption="Orders"
DataKeyNames="OrderID"
DataSourceID="SqlDataSource1"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
runat="server" >
<Columns>
<asp:CommandField ShowSelectButton="True"></asp:CommandField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1"
runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID], [OrderDate] FROM [Orders]">
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="OrderDetailsPanel"
UpdateMode="Always"
runat="server">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1"
Caption="Order Details"
DataKeyNames="OrderID,ProductID"
DataSourceID="SqlDataSource2"
runat="server">
<EmptyDataTemplate>
<i>Select a row from the Orders table.</i>
</EmptyDataTemplate>
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource2"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [OrderID], [ProductID], [UnitPrice], [Quantity], [Discount] FROM [Order Details] WHERE ([OrderID] = @OrderID)"
runat="server">
<SelectParameters>
<asp:Parameter Name="OrderID"
Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</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 runat="server">
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
SqlDataSource2.SelectParameters["OrderID"].DefaultValue =
GridView1.SelectedDataKey.Value.ToString();
}
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="OrdersPanel"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1"
AllowPaging="True"
AllowSorting="True"
Caption="Orders"
DataKeyNames="OrderID"
DataSourceID="SqlDataSource1"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
runat="server" >
<Columns>
<asp:CommandField ShowSelectButton="True"></asp:CommandField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1"
runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID], [OrderDate] FROM [Orders]">
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="OrderDetailsPanel"
UpdateMode="Always"
runat="server">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1"
Caption="Order Details"
DataKeyNames="OrderID,ProductID"
DataSourceID="SqlDataSource2"
runat="server">
<EmptyDataTemplate>
<i>Select a row from the Orders table.</i>
</EmptyDataTemplate>
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource2"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [OrderID], [ProductID], [UnitPrice], [Quantity], [Discount] FROM [Order Details] WHERE ([OrderID] = @OrderID)"
runat="server">
<SelectParameters>
<asp:Parameter Name="OrderID"
Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Si coloca un control GridView dentro de un control UpdatePanel, no se admite el establecimiento del valor de la propiedad EnableSortingAndPagingCallbacks del control GridView en true. Sin embargo, puesto que el control UpdatePanel admite las devoluciones de datos asincrónicas, cualquier devolución de datos que cambie el control GridView dentro de un control UpdatePanel provocan el mismo comportamiento que las devoluciones de llamadas de ordenación y paginación.
Usar un control UpdatePanel en una plantilla
En el ejemplo siguiente, se usa un control UpdatePanel en la plantilla de elementos de un control GridView. Se generan controles UpdatePanel en cada fila de datos automáticamente. El control UpdatePanel de cada fila contiene un control Label con el fin de mostrar la parte del elemento de esa fila y un control Button para reducir y aumentar esa parte.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Private Sub ChangeQuantity(ByVal Sender As Button, ByVal delta As Integer)
Dim quantityLabel As Label = CType(Sender.FindControl("QuantityLabel"), Label)
Dim currentQuantity As Integer = Int32.Parse(quantityLabel.Text)
currentQuantity = Math.Max(0, currentQuantity + delta)
quantityLabel.Text = currentQuantity.ToString(System.Globalization.CultureInfo.InvariantCulture)
End Sub
Private Sub OnDecreaseQuantity(ByVal Sender As Object, ByVal E As EventArgs)
ChangeQuantity(Sender, -1)
End Sub
Private Sub OnIncreaseQuantity(ByVal Sender As Object, ByVal E As EventArgs)
ChangeQuantity(Sender, 1)
End Sub
Protected Sub Button1_Click(ByVal Sender As Object, ByVal E As EventArgs)
Dim sb As New StringBuilder()
sb.Append("Beverage order:<br/>")
For Each row As GridViewRow In GridView1.Rows
If row.RowType = DataControlRowType.DataRow Then
Dim quantityLabel As Label = CType(row.FindControl("QuantityLabel"), Label)
Dim currentQuantity As Int32 = Int32.Parse(quantityLabel.Text)
sb.Append(row.Cells(0).Text + " : " & currentQuantity & "<br/>")
End If
Next
SummaryLabel.Text = sb.ToString()
End Sub
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Inside GridView Template Example </title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:GridView ID="GridView1"
AutoGenerateColumns="False"
DataSourceID="SqlDataSource1"
runat="server">
<Columns>
<asp:BoundField DataField="ProductName"
HeaderText="ProductName" />
<asp:BoundField DataField="UnitPrice"
HeaderText="UnitPrice" />
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:UpdatePanel ID="QuantityUpdatePanel"
runat="server" >
<ContentTemplate>
<asp:Label ID="QuantityLabel"
Text="0"
runat="server" />
<asp:Button ID="DecreaseQuantity"
Text="-"
OnClick="OnDecreaseQuantity"
runat="server" />
<asp:Button ID="IncreaseQuantity"
Text="+"
OnClick="OnIncreaseQuantity"
runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:UpdatePanel ID="SummaryUpdatePanel"
runat="server">
<ContentTemplate>
<asp:Button ID="Button1"
OnClick="Button1_Click"
Text="Get Summary"
runat="server" />
<br />
<asp:Label ID="SummaryLabel"
runat="server">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [ProductName], [UnitPrice] FROM
[Alphabetical list of products] WHERE ([CategoryName]
LIKE '%' + @CategoryName + '%')"
runat="server">
<SelectParameters>
<asp:Parameter DefaultValue="Beverages"
Name="CategoryName"
Type="String" />
</SelectParameters>
</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">
<script runat="server">
private void ChangeQuantity(object sender, int delta)
{
Label quantityLabel = (Label)((Button)sender).FindControl("QuantityLabel");
int currentQuantity = Int32.Parse(quantityLabel.Text);
currentQuantity = Math.Max(0, currentQuantity + delta);
quantityLabel.Text = currentQuantity.ToString(System.Globalization.CultureInfo.InvariantCulture);
}
private void OnDecreaseQuantity(object sender, EventArgs e)
{
ChangeQuantity(sender, -1);
}
private void OnIncreaseQuantity(object sender, EventArgs e)
{
ChangeQuantity(sender, 1);
}
protected void Button1_Click(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder();
sb.Append("Beverage order:<br/>");
foreach (GridViewRow row in GridView1.Rows)
{
if (row.RowType == DataControlRowType.DataRow)
{
Label quantityLabel = (Label)row.FindControl("QuantityLabel");
int currentQuantity = Int32.Parse(quantityLabel.Text);
sb.Append(row.Cells[0].Text + " : " + currentQuantity + "<br/>");
}
}
SummaryLabel.Text = sb.ToString();
}
</script>
<html >
<head id="Head1" runat="server">
<title>UpdatePanel Inside GridView Template Example </title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:GridView ID="GridView1"
AutoGenerateColumns="False"
DataSourceID="SqlDataSource1"
runat="server">
<Columns>
<asp:BoundField DataField="ProductName"
HeaderText="ProductName" />
<asp:BoundField DataField="UnitPrice"
HeaderText="UnitPrice" />
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:UpdatePanel ID="QuantityUpdatePanel"
UpdateMode="Conditional"
runat="server" >
<ContentTemplate>
<asp:Label ID="QuantityLabel"
Text="0"
runat="server" />
<asp:Button ID="DecreaseQuantity"
Text="-"
OnClick="OnDecreaseQuantity"
runat="server" />
<asp:Button ID="IncreaseQuantity"
Text="+"
OnClick="OnIncreaseQuantity"
runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:UpdatePanel ID="SummaryUpdatePanel"
UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<asp:Button ID="Button1"
OnClick="Button1_Click"
Text="Get Summary"
runat="server" />
<br />
<asp:Label ID="SummaryLabel"
runat="server">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [ProductName], [UnitPrice] FROM
[Alphabetical list of products] WHERE ([CategoryName]
LIKE '%' + @CategoryName + '%')"
runat="server">
<SelectParameters>
<asp:Parameter DefaultValue="Beverages"
Name="CategoryName"
Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
System..::.Object
System.Web.UI..::.Control
System.Web.UI..::.UpdatePanel
Seguridad para subprocesos
Todos los miembros static (Shared en Visual Basic) públicos de este tipo son seguros para la ejecución de subprocesos. No se garantiza que los miembros de instancias sean seguros para la ejecución de subprocesos.
Windows Vista, Windows XP SP2, Windows Server 2003
.NET Framework y .NET Compact Framework no admiten todas las versiones de cada plataforma. Para obtener una lista de las versiones compatibles, vea Requisitos de sistema de .NET Framework.
.NET Framework
Compatible con: 3.5
Referencia
Otros recursos