Información general sobre el control UpdatePanel
Actualización: noviembre 2007
Los controles de ASP.NET UpdatePanel permiten generar aplicaciones web enriquecidas y centradas en el cliente. Los controles UpdatePanel permiten actualizar las partes seleccionadas de una página en lugar de actualizar toda la página con una devolución de datos. Esto se conoce como actualización parcial de la página. Una página web ASP.NET que contiene un control ScriptManager y uno o varios controles UpdatePanel puede participar automáticamente en actualizaciones parciales de la página, sin un script de cliente personalizado.
Este tema contiene información sobre lo siguiente:
Escenarios
Información general
Ejemplos de código
Referencia de clase
Escenarios
UpdatePanel es un control de servidor que ayuda a desarrollar páginas web con comportamientos de cliente complejos que hacen que una página web parezca más interactiva al usuario final. Normalmente, escribir código que se coordine entre el servidor y el cliente para actualizar sólo las partes especificadas de una página web requiere un conocimiento detallado de ECMAScript (JavaScript). Sin embargo, con el control UpdatePanel puede hacer que una página web participe de las actualizaciones parciales de la página sin escribir ningún script de cliente. Si lo desea, puede agregar el script de cliente personalizado para mejorar la experiencia del usuario cliente. Cuando se utiliza un control UpdatePanel, el comportamiento de la página es independiente del explorador y puede reducir la cantidad de datos que se transfieren entre el cliente y el servidor.
Información general
Los controles UpdatePanel trabajan especificando las regiones de una página que se pueden actualizar sin actualizar la página entera. Este proceso se coordina mediante el control de servidor ScriptManager y la clase de cliente PageRequestManager. Cuando están habilitadas las actualizaciones parciales de la página, los controles pueden exponer en el servidor de forma asincrónica. Una devolución de datos asincrónica se comporta como una devolución de datos normal en cuanto que la página de servidor resultante ejecuta la página completa y controla el ciclo de vida. Sin embargo, con una devolución de datos asincrónica, las actualizaciones de la página se limitan a las regiones de la página que están incluidas en los controles UpdatePanel y que están marcadas para actualizarse. El servidor envía el marcado HTML al explorador sólo para los elementos implicados. En el explorador, la clase de cliente PageRequestManager realiza la manipulación del Modelo de objetos de documento (DOM) para reemplazar el código HTML existente por un marcado actualizado.
.gif "Nota") Nota: |
|---|
Al utilizar devoluciones de datos asincrónicas o el objeto XMLHTTPRequest, se puede producir un error de devolución de datos si la dirección URL contiene un carácter de doble byte. Puede resolver este problema incluyendo un elemento de <base href="url"/> en el elemento head de la página, donde el atributo href está establecido en la cadena con codificación URL que hace referencia a la página. Puede agregar este elemento agregado dinámicamente en el código de servidor. |
La ilustración siguiente muestra una página que se carga por primera vez y una devolución de datos asincrónica posterior que actualiza el contenido de un control UpdatePanel.
Descripción general de la representación parcial de páginas
.png)
Habilitar actualizaciones parciales de la página
El control UpdatePanel requiere un control ScriptManager en la página web. De forma predeterminada, las actualizaciones parciales de la página están habilitadas porque el valor predeterminado de la propiedad EnablePartialRendering del control ScriptManager es true.
En el ejemplo siguiente se muestra un marcado que define un control ScriptManager y un control UpdatePanel en una página. El control UpdatePanel contiene un control Button que actualiza el contenido del panel al hacer clic en él. De forma predeterminada, la propiedad ChildrenAsTriggers es true. Por consiguiente, el control Button actúa como un control de devolución de datos asincrónica.
<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>
Especificar el contenido del control UpdatePanel
Puede agregar contenido a un control UpdatePanel mediante declaración, o bien en el diseñador utilizando la propiedad ContentTemplate. En el marcado, esta propiedad se expone como un elemento ContentTemplate. Para agregar contenido mediante programación, se utiliza la propiedad ContentTemplateContainer.
Cuando se representa por primera vez una página que contiene uno o varios controles UpdatePanel, se representa todo el contenido de los controles UpdatePanel y se envían al explorador. En las devoluciones de datos asincrónicas posteriores, el contenido de los controles UpdatePanel individuales podría actualizarse. Las actualizaciones dependen de las opciones de configuración del panel, de qué elemento produjo la devolución de datos y del código específico de cada panel.
Especificar los desencadenadores de UpdatePanel
De forma predeterminada, cualquier control de devolución de datos dentro de un control UpdatePanel produce una devolución de datos asincrónica y actualiza el contenido del panel. Sin embargo, también puede configurar otros controles de la página para actualizar un control UpdatePanel. Para ello, defina un desencadenador para el control UpdatePanel. Un desencadenador es un enlace que especifica qué evento y control de devolución de datos provoca la actualización de un panel. Cuando se provoca el evento especificado del control desencadenador (por ejemplo, un evento Click de un botón), se actualiza el panel.
En el ejemplo siguiente se muestra cómo especificar un desencadenador para un control 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>
El desencadenador se define utilizando el elemento asp:AsyncPostBackTrigger dentro del elemento Triggers del control UpdatePanel. (Si está editando la página en Visual Studio, puede crear desencadenadores utilizando el cuadro de diálogo Editor de la colección UpdatePanelTrigger.)
El evento de control de un desencadenador es opcional. Si no especifica un evento, el evento desencadenador es el evento predeterminado del control. Por ejemplo, en el control Button, el evento predeterminado es el evento Click.
Cómo se actualizan los controles UpdatePanel
En la lista siguiente se describen los valores de las propiedades del control UpdatePanel que determinan cuándo se actualiza el contenido de un panel durante la representación parcial de la página.
Si la propiedad UpdateMode se establece en Always, el contenido del control UpdatePanel se actualiza en todas las devoluciones de datos que se originen desde cualquier parte de la página. Esto incluye las devoluciones de datos asincrónicas de los controles que están dentro de otros controles UpdatePanel y las devoluciones de datos de los controles que no están dentro de los controles UpdatePanel.
Si la propiedad UpdateMode es Conditional, el contenido del control UpdatePanel se actualiza cuando se da una de las siguientes condiciones:
Cuando un desencadenador produce la devolución de datos para ese control UpdatePanel.
Cuando se llama 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 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 para el panel primario.
Si la propiedad ChildrenAsTriggers se establece en false y la propiedad UpdateMode se establece en Always, se inicia una excepción. La propiedad ChildrenAsTriggers está diseñada para usarse sólo cuando la propiedad UpdateMode se establezca en Conditional.
Utilizar los controles UpdatePanel en páginas maestras
Para utilizar un control UpdatePanel en una página maestra, debe decidir cómo incluirá el control ScriptManager. Si incluye el control ScriptManager en la página maestra, puede actuar como control ScriptManager de todas las páginas de contenido. (Si desea registrar scripts o servicios mediante declaración en una página de contenido, puede agregar un control ScriptManagerProxy a esa página de contenido.)
Si la página maestra no contiene el control ScriptManager, puede colocar el control ScriptManager individualmente en cada página de contenido que contenga un control UpdatePanel. La opción de diseño depende de cómo tenga pensado administrar el script de cliente en su aplicación. Para obtener más información sobre cómo administrar scripts de cliente, vea Información general sobre el control ScriptManager. Para obtener más información sobre las páginas principales, vea Información general sobre las páginas principales ASP.NET.
En algunos casos, el control ScriptManager está en la página maestra y no necesita funciones de representación parcial de la página para una página de contenido. En esos casos, debe establecer mediante programación la propiedad EnablePartialRendering del control ScriptManager en false para esa página de contenido.
En el ejemplo siguiente se muestra el marcado para un control ScriptManager en la página maestra y un control UpdatePanel en una página de contenido. En este ejemplo, en la página maestra hay definida una propiedad denominada LastUpdate y se hace referencia a ella desde el control 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>
Utilizar controles UpdatePanel anidados
Los controles UpdatePanel se pueden anidar. Si se actualiza el panel primario, todos los paneles anidados también se actualizarán.
El ejemplo siguiente muestra el marcado que define un control UpdatePanel dentro de otro control UpdatePanel. Un botón del panel primario desencadena una actualización del contenido tanto en el panel primario como secundario. El botón del panel secundario desencadena una actualización sólo del panel secundario.
<%@ 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>
En el ejemplo siguiente se muestra un control UpdatePanel anidado con un control GridView. El control GridView está dentro de un control UpdatePanel, y cada fila de GridView contiene un control GridView anidado en otro 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">
<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>
Cuando un control GridView interno muestra una nueva página de registros, el panel exterior y los paneles de las otras filas del control GridView exterior no se actualizan. Cuando el control GridView exterior muestra una nueva página de registros, el panel exterior y los paneles anidados se actualizan.
Actualizar UpdatePanel mediante programación
En el ejemplo siguiente se muestra cómo actualizar un control UpdatePanel mediante programación. En este ejemplo, una página registra un control como desencadenador mediante una llamada al método RegisterAsyncPostBackControl. El código actualiza el control UpdatePanel mediante programación mediante una llamada al método 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>
Crear controles UpdatePanel mediante programación
Para agregar un control UpdatePanel mediante programación a una página, cree una nueva instancia del control UpdatePanel. Después, agregue los controles mediante la propiedad ContentTemplateContainer y el método ControlCollection.Add. No agregue los controles directamente a la propiedad ContentTemplate.
Cuando se agrega un control UpdatePanel mediante programación, sólo las devoluciones de datos que provienen de los controles situados en el mismo contenedor de nomenclatura que el control UpdatePanel se pueden utilizar como desencadenadores para el panel.
En el ejemplo siguiente se muestra cómo agregar un control UpdatePanel a una página mediante programación. El ejemplo agrega un control Label y Button al panel utilizando la propiedad ContentTemplateContainer. Debido a que la propiedad ChildrenAsTriggers es true de forma predeterminada, el control Button actúa como desencadenador para el 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 >
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>
Controles no compatibles con los controles UpdatePanel
Los controles ASP.NET siguientes no son compatibles con las actualizaciones parciales de la página y, por consiguiente, no están diseñados para funcionar dentro de un control UpdatePanel:
Control TreeView en varias condiciones. Cuando se habilitan devoluciones de llamada que no forman parte de una devolución de datos asincrónica. Cuando se establecen estilos directamente como propiedades de control en lugar de aplicar estilos implícitamente al control utilizando una referencia a los estilos CSS. Cuando la propiedad EnableClientScript es false (el valor predeterminado es true). Cuando se cambia el valor de la propiedad EnableClientScript entre las devoluciones de datos asincrónicas. Para obtener más información, vea Información general sobre TreeView (Control de servidor Web).
Control Menu cuando se establecen estilos directamente como propiedades de control en lugar de aplicar estilos implícitamente al control utilizando una referencia a los estilos CSS. Para obtener más información, vea Información general sobre el control Menu.
Controles FileUpload y HtmlInputFile cuando se utilizan para cargar archivos como parte de una devolución de datos asincrónica.
Controles GridView y DetailsView cuando su propiedad EnableSortingAndPagingCallbacks es true. El valor predeterminado es false.
Controles Login, PasswordRecovery, ChangePassword y CreateUserWizard cuyo contenido no ha sido convertido en plantillas editables.
El control Substitution.
Para utilizar un control FileUpload o HtmlInputFile dentro de un control UpdatePanel, especifique que el control de devolución de datos que envía el archivo es un control PostBackTrigger del panel. Los controles FileUpload y HtmlInputFile sólo se pueden utilizar en escenarios de devolución de llamadas.
Todos los demás controles funcionan dentro de los controles UpdatePanel. Sin embargo, en algunas circunstancias, un control podría no funcionar como se espera dentro de un control UpdatePanel. Entre estas circunstancias se incluyen las siguientes:
Registrar scripts mediante llamadas a métodos de registro del control ClientScriptManager.
Representación directa de scripts o marcado durante la representación del control, por ejemplo, mediante llamadas al método Write.
Si el control llama a los métodos de registro de scripts del control ClientScriptManager, es posible que pueda utilizar en su lugar los métodos de registro de scripts correspondientes del control ScriptManager. En ese caso, el control puede funcionar dentro de un control UpdatePanel.
Utilizar controles de elementos web dentro de los controles UpdatePanel
Los elementos Web ASP.NET son un conjunto integrado de controles para crear sitios Web que permiten a los usuarios finales modificar el contenido, la apariencia y el comportamiento de las páginas Web directamente desde un explorador. Puede utilizar controles de elementos web dentro de los controles UpdatePanel con las restricciones siguientes:
Todos los controles WebPartZone deben estar dentro del mismo control UpdatePanel. Por ejemplo, no puede tener dos controles UpdatePanel en la página, cada uno con su propio control WebPartZone.
El control WebPartManager administra toda la información sobre el estado de cliente de los controles de elementos web. Debe estar en el control UpdatePanel extremo de una página.
No puede importar ni exportar controles de elementos web utilizando una devolución de datos asincrónica. (Para realizar esta tarea es necesario un control FileUpload, que no se puede utilizar con devoluciones de datos asincrónicas.) De forma predeterminada, al importar controles de elementos web se realiza una devolución de datos completa.
No se pueden agregar ni modificar los estilos de los controles de elementos web durante las devoluciones de datos asincrónicas.
Para obtener más información sobre elementos web, vea Información general sobre los elementos Web ASP.NET.
Propiedades y métodos no admitidos durante las devoluciones de datos asincrónicas
Las devoluciones de datos asincrónicas no admiten los escenarios siguientes que establecen el botón de devolución de datos predeterminado en una página:
Cambiar DefaultButton mediante programación durante una devolución de datos asincrónica.
Cambiar DefaultButton mediante programación durante una devolución de datos asincrónica cuando el control Panel no está dentro de un control UpdatePanel.
Los métodos siguientes de la clase HttpResponse sólo se admiten en escenarios de devolución de datos y no en escenarios de devolución de datos asincrónica:
Ejemplos de código
Las secciones siguientes incluyen ejemplos que muestran cómo crear y utilizar los controles UpdatePanel.
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
Usar el control UpdatePanel de ASP.NET con controles de usuario
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 muestran las clases de servidor clave de los controles UpdatePanel.
Clase |
Descripción |
|---|---|
Control de servidor que especifica los elementos de una página web que pueden participar en las actualizaciones parciales de la página. |
|
Control de servidor que administra la representación parcial de la página. El control ScriptManager registra los componentes de script que se enviarán al explorador. También invalida la representación de la página para que sólo se representen las regiones de la página especificadas. |
|
Control de servidor que permite a los componentes anidados (como páginas de contenido o controles de usuario) agregar scripts y referencias a servicios web. Este control resulta útil si el elemento principal ya contiene un control ScriptManager. |
|
Clase de Microsoft AJAX Library que coordina la representación parcial de la página en el explorador. La clase PageRequestManager intercambia información con el servidor de forma asincrónica y expone eventos y métodos para la programación de scripts de cliente personalizados. |
Otros temas
Información general sobre el ciclo de vida de una página ASP.NET
Vea también
Tareas
Introducción al control UpdatePanel
Crear una página ASP.NET simple con varios controles UpdatePanel
Conceptos
Información general sobre el control UpdateProgress
Información general sobre la representación parcial de páginas
Información general sobre la clase PageRequestManager de ASP.NET