martes, 23 de octubre de 2012

[ASP.NET] Mostrar progreso en página web

 

Introducción:

Una tarea que no es indispensable para el desarrollo de un sitio web; pero que mejora bastante la experiencía del usuario final; es tener una pequeña parte de la página que que se presente con un Gif animado y un texto cómo “Procesando…” mientras se realiza cualquier tarea que tome algún intervalo significativo de tiempo.

El ASP.NET AJAX Control Toolkit nos ofrece un control llamado UpdateProgress que nos fácilita enormemente esta tarea.

 

Descargar el ASP.NET AJAX Control Toolkit

Simplemente tenemos que ingresar a la página oficial:

Ajax Control Toolkit

Y hacer clic en el botón morado de la parte superior derecha que dice Download.

Descomprimimos la carpeta y con eso tenemos nuestro Ajax listo para ser utilizado.

(Posteriormente vamos a utilizar un archivo de este paquete)

 

Descargando el Gif que vamos a visualizar

Seguramente hay muchas páginas que ofrecen gif de progreso para que visualicemos mientras la página hace un llamado al servidor, pero la que mas me gusta es esta:

Ajaxload

Cómo ven, hay mucha variedad de imagenes y podemos definir el color de la imagen, del fondo, si la queremos con fondo transparente, etc:

Untitled

Simplemente descargamos la que mas nos guste y ya está.

 

Creando una página en blanco

Abrimos nuestro visual studio, clic en File –> New –> Project

Visual C# –> Web –> ASP.NET Empty Web Application

Untitled

Agregamos un formulario en blanco (yo lo llamé default):

Untitled

 

Agregando la imagen al proyecto

Simplemente creamos una carpeta llamada Imagenes y le agregamos el Gif que previamente descargamos.

Untitled

 

Agregando la referencia de Ajax

El paso a seguir, es agregar una referencia de Ajax Control Toolkit a nuestro proyecto, para lograrlo, hacemos clic derecho sobre la carpeta referencias de nuestro proyecto y seleccionamos Add reference:

Untitled

En la pestaña Browse, buscamos el Ajax Control Toolkit descomprimido y seleccionamos la dll con el nombre AjaxControlToolkit.dll :

Untitled

Clic en el botón Ok.

Verificamos que la referencia se haya realizado correctamente:

Untitled

Con eso, ya podemos utilizar todos los controles que ofrece Ajax.

 

Creando el control

Abrimos nuestra página default en modo de diseño y agregamos la referencia con esta linea:

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

Esa tiene que ser la segunda linea de nuestro código HTML.


 


Agregando el control


El código del control es muy sencillo, y para que el progreso se active, vamos a crear un botón justo antes del UpdateProgress:


        <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
<br />
<asp:UpdateProgress ID="UpdateProgress2" runat="server">
<ProgressTemplate>
Procesando...<br>
<asp:Image ID="Image2" ImageUrl="~/Imagenes/ajax-loader.gif" runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>

Ah, se me había olvidado de dos pequeños amigos que necesitamos para que nuestro ejemplo funcione correctamente:


Uno es el ScriptManager, este control es necesario cómo prerequisito al momento de utilizar el Ajax Control Toolkit


El otro es el UpdatePanel, que cambia los postback totales por parciales entre muchas otras cosas que hace ….


Eso va dentro de la etiqueta form; observen que hacemos referencia a la imagen que nos descargamos y que agregamos a la carpeta Imagenes del proyecto.


 


Probando el funcionamiento del control


A nivel de code begin, sólo debemos de agregarle el evento clic al botón que creamos y en este realizar una pausa de 3 segundos suficientes para que se visualice el progreso (en sus proyectos remplazarían esos tres segundos por el proceso que tarda algo de tiempo y que quieren mejorar la experiencia del usuario):



      protected void Page_Load(object sender, EventArgs e)
{
Button1.Click += new EventHandler(Button1_Click);
}
protected void Button1_Click(object sender, EventArgs e)
{
Thread.Sleep(3000);
}


Ah, para que les funcione la pausa, deben de referenciar el espacio de noombres System.Threading:



using System.Threading;



Una vez hayamos cumplido con todos los pasos anteriores, podemos pulsar F5, hacer clic en el botón y visualizaremos por tres segundo una parte de la página con el Gif y la palabra Procesando:


Untitled


Código


Desde el siguiente link, pueden descargarse el ejemplo realizado con Visual Studio 2010


Descargar código


 


3 comentarios:

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. hola una pregunta para referenciar nombres con visual basic como se haria?

    ResponderEliminar