Información general sobre el control UpdateProgress
Actualización: noviembre 2007
El control UpdateProgress proporciona información de estado sobre las actualizaciones parciales de página en controles UpdatePanel. Puede personalizar el contenido y el diseño predeterminados del control UpdateProgress. Para evitar el parpadeo que se produce cuando una actualización parcial de página es muy rápida, puede especificar un retraso antes de que se muestre el control UpdateProgress.
Este tema contiene información sobre lo siguiente:
Escenarios
Información general
Ejemplos de código
Referencia de clase
Escenarios
El control UpdateProgress ayuda a diseñar una interfaz de usuario más intuitiva cuando una página web contiene uno o más controles UpdatePanel para la representación parcial de páginas. Si una actualización parcial de página es lenta, puede usar el control UpdateProgress para proporcionar los comentarios visuales sobre el estado de la actualización. Puede incluir varios controles UpdateProgress en una página, cada uno de ellos asociado a un control UpdatePanel diferente. También puede usar un único control UpdateProgress y asociarlo a todos los controles UpdatePanel de la página.
Información general
El control UpdateProgress representa un elemento <div> que se muestra o se oculta dependiendo de si un control UpdatePanel asociado ha producido una devolución de datos asincrónica. En las representaciones de página iniciales y en las devoluciones de datos asincrónicas, no se muestra el control UpdateProgress.
Asociar un control UpdateProgress a un control UpdatePanel
Para asociar un control UpdateProgress a un control UpdatePanel, establece la propiedad AssociatedUpdatePanelID del control UpdateProgress. Cuando un evento de devolución de datos se origina en un control UpdatePanel, se muestran los controles UpdateProgress asociados. Si no asocia el control UpdateProgress a un control UpdatePanel concreto, el control UpdateProgress muestra el progreso de cualquier devolución de datos asincrónica.
Si la propiedad ChildrenAsTriggers de un control UpdatePanel se establece en false y se origina una devolución de datos asincrónica dentro de dicho control UpdatePanel, se mostrarán los controles UpdateProgress asociados.
Crear contenido para el control UpdateProgress
Use la propiedad ProgressTemplate para especificar mediante declaración el mensaje que muestra un control UpdateProgress. El elemento <ProgressTemplate> puede contener HTML y marcado. En el ejemplo siguiente se muestra cómo especificar un mensaje para un control UpdateProgress.
<asp:UpdateProgress ID="UpdateProgress1" >
<ProgressTemplate>
An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdateProgress ID="UpdateProgress1" >
<ProgressTemplate>
An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>
En el ejemplo siguiente se muestra un control UpdateProgress que muestra el estado de actualización de dos controles 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 Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
System.Threading.Thread.Sleep(3000)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>UpdateProgress Example</title>
<style type="text/css">
#UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
border-right: gray 1px solid; border-top: gray 1px solid;
border-left: gray 1px solid; border-bottom: gray 1px solid;
}
#UpdatePanel1, #UpdatePanel2 {
width:200px; height:200px; position: relative;
float: left; margin-left: 10px; margin-top: 10px;
}
#UpdateProgress1 {
width: 400px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button1" Text="Refresh Panel" OnClick="Button_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="Button_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" >
<ProgressTemplate>
Update in progress...
</ProgressTemplate>
</asp:UpdateProgress>
</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 Button_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>UpdateProgress Example</title>
<style type="text/css">
#UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
border-right: gray 1px solid; border-top: gray 1px solid;
border-left: gray 1px solid; border-bottom: gray 1px solid;
}
#UpdatePanel1, #UpdatePanel2 {
width:200px; height:200px; position: relative;
float: left; margin-left: 10px; margin-top: 10px;
}
#UpdateProgress1 {
width: 400px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button1" Text="Refresh Panel" OnClick="Button_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="Button_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" >
<ProgressTemplate>
Update in progress...
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
En el ejemplo siguiente se muestran dos controles UpdateProgress. Cada control muestra el estado de actualización de un control UpdatePanel asociado.
<%@ 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 Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
System.Threading.Thread.Sleep(3000)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>UpdateProgress Example</title>
<style type="text/css">
#UpdatePanel1, #UpdatePanel2 {
width:200px; height:200px; position: relative;
float: left; margin-left: 10px; margin-top: 10px;
border-right: gray 1px solid; border-top: gray 1px solid;
border-left: gray 1px solid; border-bottom: gray 1px solid;
}
#UpdateProgress1, #UpdateProgress2 {
width: 200px; background-color: #FFC080;
position: absolute; bottom: 0px; left: 0px;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button1" Text="Refresh Panel" OnClick="Button_Click" />
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" >
<ProgressTemplate>
UpdatePanel1 updating...
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="Button_Click"/>
<asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" >
<ProgressTemplate>
UpdatePanel2 updating...
</ProgressTemplate>
</asp:UpdateProgress>
</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 Button_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>UpdateProgress Example</title>
<style type="text/css">
#UpdatePanel1, #UpdatePanel2 {
width:200px; height:200px; position: relative;
float: left; margin-left: 10px; margin-top: 10px;
border-right: gray 1px solid; border-top: gray 1px solid;
border-left: gray 1px solid; border-bottom: gray 1px solid;
}
#UpdateProgress1, #UpdateProgress2 {
width: 200px; background-color: #FFC080;
position: absolute; bottom: 0px; left: 0px;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button1" Text="Refresh Panel" OnClick="Button_Click" />
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" >
<ProgressTemplate>
UpdatePanel1 updating...
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="Button_Click"/>
<asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" >
<ProgressTemplate>
UpdatePanel2 updating...
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
El ejemplo siguiente muestra cómo agregar un botón al elemento <ProgressTemplate> en el que el usuario puede hacer clic para detener la devolución de datos asincrónica. Cualquier nueva devolución de datos que se inicia mientras se ejecuta otra devolución de datos, se cancela.
<%@ 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 Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
System.Threading.Thread.Sleep(3000)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
<title>UpdateProgress Example</title>
<style type="text/css">
#UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
border-right: gray 1px solid; border-top: gray 1px solid;
border-left: gray 1px solid; border-bottom: gray 1px solid;
}
#UpdatePanel1, #UpdatePanel2 {
width:200px; height:200px; position: relative;
float: left; margin-left: 10px; margin-top: 10px;
}
#UpdateProgress1 {
width: 400px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack())
{
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'ButtonTrigger')
{
$get('UpdateProgress1').style.display = "block";
}
}
function EndRequest (sender, args) {
if (postBackElement.id == 'ButtonTrigger')
{
$get('UpdateProgress1').style.display = "none";
}
}
function AbortPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
</script>
<asp:Button ID="ButtonTrigger" Text="Refresh Panel 1" OnClick="Button_Click" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
The trigger for this panel
causes the UpdateProgress to be displayed
even though the UpdateProgress is associated
with panel 2.
<br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonTrigger" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="Button_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel2" >
<ProgressTemplate>
Update in progress...
<input type="button" value="stop" onclick="AbortPostBack()" />
</ProgressTemplate>
</asp:UpdateProgress>
</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 Button_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
<title>UpdateProgress Example</title>
<style type="text/css">
#UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
border-right: gray 1px solid; border-top: gray 1px solid;
border-left: gray 1px solid; border-bottom: gray 1px solid;
}
#UpdatePanel1, #UpdatePanel2 {
width:200px; height:200px; position: relative;
float: left; margin-left: 10px; margin-top: 10px;
}
#UpdateProgress1 {
width: 400px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack())
{
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'ButtonTrigger')
{
$get('UpdateProgress1').style.display = "block";
}
}
function EndRequest (sender, args) {
if (postBackElement.id == 'ButtonTrigger')
{
$get('UpdateProgress1').style.display = "none";
}
}
function AbortPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
</script>
<asp:Button ID="ButtonTrigger" Text="Refresh Panel 1" OnClick="Button_Click" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
The trigger for this panel
causes the UpdateProgress to be displayed
even though the UpdateProgress is associated
with panel 2.
<br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonTrigger" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="Button_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel2" >
<ProgressTemplate>
Update in progress...
<input type="button" value="stop" onclick="AbortPostBack()" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
En el ejemplo anterior, el atributo onClick de un control HtmlButton del elemento <ProgressTemplate> llama a la función de JavaScript AbortPostBack. Para obtener más información, vea el método abortPostBack y la propiedad isInAsyncPostBack de la clase PageRequestManager.
Especificar el diseño del contenido
Cuando la propiedad DynamicLayout es true, el control UpdateProgress no ocupa inicialmente ningún espacie en la visualización de página. En su lugar, la página cambia dinámicamente para mostrar el contenido del control UpdateProgress según convenga. Para admitir la presentación dinámica, el control se representa como un elemento <div> cuya propiedad de estilo display se establece inicialmente en none.
Cuando la propiedad DynamicLayout es false, el control UpdateProgress ocupa espacio en la visualización de página, incluso si no está visible. En este caso, el elemento <div> del control tiene la propiedad de estilo display establecida en block y la propiedad visibility inicialmente establecida en hidden.
Incluir controles UpdateProgress en la página
Puede colocar los controles UpdateProgress dentro o fuera de los controles UpdatePanel. Un control UpdateProgress se muestra siempre que el control UpdatePanel al que está asociado se actualiza como resultado de una devolución de datos asincrónica. Esto es así incluso si el control UpdateProgress está dentro de otro control UpdatePanel.
Si un control UpdatePanel está dentro de otro panel de actualización, una devolución de datos que se origina dentro del panel secundario genera la presentación de cualquier control UpdateProgress asociado al panel secundario. También muestra cualquier control UpdateProgress asociado al panel primario. Si una devolución de datos se origina desde un control secundario inmediato del panel primario, sólo se muestran los controles UpdateProgress asociados al panel primario. Este proceso sigue la lógica de la forma de desencadenamiento de las devoluciones de datos.
Especificar cuándo se muestran los controles UpdateProgress
Puede controlar mediante programación cuándo se muestra un control UpdateProgress mediante los eventos JavaScript beginRequest y endRequest de la clase PageRequestManager. En el controlador de eventos beginRequest, muestre el elemento de DOM que representa el control UpdateProgress. En el controlador de eventos endRequest, oculte el elemento.
Debe proporcionar el script de cliente para mostrar y ocultar un control UpdateProgress en las circunstancias siguientes:
Durante una devolución de datos desde un control que se registra como un desencadenador de la devolución de datos asincrónica en el panel de actualización, pero al que no está asociado el control UpdateProgress.
Durante las devoluciones de datos de controles que se registran mediante programación como controles de devolución de datos asincrónica con el método RegisterAsyncPostBackControl del control ScriptManager. En este caso, el control UpdateProgress no puede determinar automáticamente que se ha desencadenado una devolución de datos asincrónica.
Ejemplos de código
Las secciones siguientes incluyen los ejemplos de código para crear y usar controles [T:System.Web.UI.]UpdateProgress.
Tutoriales
Referencia de clase
La tabla siguiente enumera las clases clave para trabajar con la clase [T:System.Web.UI.]UpdateProgress.
Clase |
Descripción |
|---|---|
Proporciona comentarios visuales en el explorador cuando se actualiza el contenido de los controles UpdatePanel. |
|
Especifica partes de una página web que pueden participar en actualizaciones parciales de página. |
|
Administra la representación parcial de páginas. El control ScriptManager registra los componentes de script que se envían al explorador e invalida la representación de la página de forma que sólo se representen regiones especificadas de ella. |
|
Coordina la representación parcial de páginas en el explorador. La clase PageRequestManager intercambia información con el servidor de forma asincrónica y expone eventos y métodos para los 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
Introducción al control UpdateProgress
Programar controles UpdateProgress en script de cliente