You are on page 1of 9

MOSTRAR PROGRESO EN PGINA WEB

Introduccin: Una tarea que no es indispensable para el desarrollo de un sitio web; pero que mejora bastante la experienca del usuario final; es tener una pequea parte de la pgina que que se presente con un Gif animado y un texto cmo !rocesando"# mientras se reali$a cualquier tarea que tome alg%n inter&alo significati&o de tiempo' (l ASP.NET AJAX Control Toolkit nos ofrece un control llamado UpdateProgress que nos fcilita enormemente esta tarea'

Descargar el ASP.NET AJAX Control Toolkit )implemente tenemos que ingresar a la pgina oficial: *jax +ontrol ,ool-it . /acer clic en el botn morado de la parte superior derec/a que dice Download. 0escomprimimos la carpeta y con eso tenemos nuestro *jax listo para ser utili$ado' 1!osteriormente &amos a utili$ar un arc/i&o de este paquete2

Descargando el i! "ue #a$os a #isuali%ar )eguramente /ay muc/as pginas que ofrecen gif de progreso para que &isualicemos mientras la pgina /ace un llamado al ser&idor3 pero la que mas me gusta es esta: *jaxload +mo &en3 /ay muc/a &ariedad de imagenes y podemos definir el color de la imagen3 del fondo3 si la queremos con fondo transparente3 etc:

)implemente descargamos la que mas nos guste y ya est'

Creando una p&gina en 'lanco *brimos nuestro &isual studio3 clic en 4ile 56 7ew 56 !roject 8isual +9 56 :eb 56 *)!'7(, (mpty :eb *pplication

*gregamos un formulario en blanco 1yo lo llam; default2:

Agregando la i$agen al pro(ecto )implemente creamos una carpeta llamada <magenes y le agregamos el Gif que pre&iamente descargamos'

Agregando la re!erencia de A)a* (l paso a seguir3 es agregar una referencia de *jax +ontrol ,ool-it a nuestro proyecto3 para lograrlo3 /acemos clic derec/o sobre la carpeta referencias de nuestro proyecto y seleccionamos *dd reference:

(n la pestaa =rowse3 buscamos el *jax +ontrol ,ool-it descomprimido y seleccionamos la dll con el nombre *jax+ontrol,ool-it'dll :

+lic en el botn >-' 8erificamos que la referencia se /aya reali$ado correctamente:

+on eso3 ya podemos utili$ar todos los controles que ofrece *jax'

Creando el control *brimos nuestra pgina default en modo de diseo y agregamos la referencia con esta linea:
view plainprint?

1. <%@ Register assembly= A!a"#$%tr$lT$$l&it %ames'a(e= A!a"#$%tr$lT$$l&it tag're)i "= as' %>

(sa tiene que ser la segunda linea de nuestro cdigo ?,@A'

Agregando el control

(l cdigo del control es muy sencillo3 y para que el progreso se acti&e3 &amos a crear un botn justo antes del Update!rogress:
view plainprint?

1. -. .. 1. 2. 3. 4. 5. 6. 17. 11. 1-. >

<asp:ScriptManager I*= S(ri'tMa%ager1 r+%at= ser,er > </asp:ScriptManager> <asp:UpdatePanel I*= /'0atePa%el1 r+%at= ser,er > <ContentTemplate> <asp:Button I*= B+tt$%1 r+%at= ser,er Te"t= B+tt$% />

<asp:UpdateProgress I*= /'0atePr$gress- r+%at= ser,er > <ProgressTemplate> Pr$(esa%0$...

<asp:Image I*= Image- Image/rl= 89Image%es9a!a":l$a0er.gi) r+%at= ser,er /

1.. 11. 12. 13.

</ProgressTemplate> </asp:UpdateProgress> </ContentTemplate> </asp:UpdatePanel>

*/3 se me /aba ol&idado de dos pequeos amigos que necesitamos para que nuestro ejemplo funcione correctamente:

Uno es el Script+anager3 este control es necesario cmo prerequisito al momento de utili$ar el *jax +ontrol ,ool-it

(l otro es el UpdatePanel3 que cambia los postbac- totales por parciales entre muc/as otras cosas que /ace "'

(so &a dentro de la etiqueta !or$; obser&en que /acemos referencia a la imagen que nos descargamos y que agregamos a la carpeta <magenes del proyecto'

Pro'ando el !unciona$iento del control

* ni&el de code begin3 slo debemos de agregarle el e&ento clic al botn que creamos y en este reali$ar una pausa de B segundos suficientes para que se &isualice el progreso 1en sus proyectos rempla$aran esos tres segundos por el proceso que tarda algo de tiempo y que quieren mejorar la experiencia del usuario2:

view plainprint?

1. -. ..

protected void Page;<$a0=object se%0er> E,e%tArgs e? @ B+tt$%1.#li(& A= new E,e%tBa%0ler=B+tt$%1;#li(&?C

1. 2. 3. 4. 5.

D protected void B+tt$%1;#li(&=object se%0er> E,e%tArgs e? @ TErea0.Slee'=.777?C D

*/3 para que les funcione la pausa3 deben de referenciar el espacio de noombres S(ste$.T,reading:

view plainprint?

1.

using System.TErea0i%gC

Una &e$ /ayamos cumplido con todos los pasos anteriores3 podemos pulsar 4C3 /acer clic en el botn y &isuali$aremos por tres segundo una parte de la pgina con el Gif y la palabra !rocesando:

+digo

0esde el siguiente lin-3 pueden descargarse el ejemplo reali$ado con 8isual )tudio DEFE

0escargar cdigo
http://cristiancamiloperezlopez.blogspot.com/2012/10/asp-mostrar-progreso-en-pagina-web.html