A veces no queremos hacer uso del UpdateProgress que viene con ASP.NET por diversos motivos.

Objetivo

El objetivo es conseguir el efecto del UpdateProgress. Para ello necesitamos un UpdatePanel donde tengamos por ejemplo un botón con un Label. Para que el efecto sea visible se recomienda usar el método Sleep de System.Threading.Thread, un par de segundo es suficiente.

Requisitos

Cualquier versión de ASP.NET AJAX nos sirve, tanto la 1.0 (para .NET 2.0) descargable en http://ajax.asp.net/, como la versión nativa de ASP.NET AJAX. Si usas VS 2008 (o Visual Web Developer 2008 Express Edition) no tendrás que descargar nada.

Análisis

¿Que hace el UpdateProgress? Siempre que se hace una petición al servidor se muestra un panel. Por lo que ya sabemos dos cosas:

1. Debemos manejar el evento de comienzo y finalización de las peticiones en el cliente.


2. Hay algo oculto que debemos mostrar después.

Esta claro que el lenguaje en el cliente es JavaScript y para el estilo (necesario para mostrar y ocultar el panel, que ya digo que será una capa, DIV) usaremos estilso en cascada CSS.

Coding.

Antes de nada el manejador de evento del evento Click del botón es:

protected void ActualizarButton_Click(object sender, EventArgs e)

{

    HoraLabel.Text = DateTime.Now.ToShortTimeString();

    System.Threading.Thread.Sleep(5000);

}

Ahora vamos a la parte que nos ocupa, el cliente. La capa que nos ocupa es la siguiente, sencillita:

<div id=»updateProgress» class=»hidden»>

    Actualizando…

</div>

Como puedes ver vamos a tener un estilo llamado hidden y, esto os lo digo yo, tendremos otro para cuando lo queramos mostrar, que le llamaré showed, estos son los siguientes:

.hidden {

    display: none;

}

.showed {

    border: 2px solid #FF0000;

    background-color: #FF6666;

    color: #800000;

    font-size: x-large;

    font-family: Arial, Helvetica, sans-serif;

    padding: 10px;

    margin: 10px;

    width: 200px;

    text-align: center;

}

Le he añadido algo de formato en el estilo showed, para que se vea bien. Realmente lo importante es la diferencia de que el primero contiene la etiqueta display: none y la segunda no.

Bien, ahora nos queda lo más importante, manejar los dos eventos en el cliente. La clase encargada de ello es el PageRequestManager, en el namespace Sys.WebForms. Y el código es tan sencillo como este:

function pageLoad() {

    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginPageRequest);

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endPageRequest);

}

 

function beginPageRequest(sender, args) {

    updateProgress.className = «showed»;

}

 

function endPageRequest(sender, args) {

    updateProgress.className = «hidden»;

}

En este caso el efecto es muy similar al del UpdateProgress, pero los resultados pueden ser muy diversos cuanto más lo piensa uno.

http://eugenioestrada.es/blog