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:
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:
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:
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
Agregamos un formulario en blanco (yo lo llamé default):
Agregando la imagen al proyecto
Simplemente creamos una carpeta llamada Imagenes y le agregamos el Gif que previamente descargamos.
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:
En la pestaña Browse, buscamos el Ajax Control Toolkit descomprimido y seleccionamos la dll con el nombre AjaxControlToolkit.dll :
Clic en el botón Ok.
Verificamos que la referencia se haya realizado correctamente:
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:
Código
Desde el siguiente link, pueden descargarse el ejemplo realizado con Visual Studio 2010
Este comentario ha sido eliminado por el autor.
ResponderEliminarhola una pregunta para referenciar nombres con visual basic como se haria?
ResponderEliminarMe pregunto lo mismo lo necesito para vb.net....
Eliminar