Menu

Bloquear la pantalla al hacer postback

mayo 6, 2012 - ASP.NET

Introducción

Los update panels han sido una tecnología que nos han ahorrado MUCHO código y varias ojeras, pero recientemente me encontré con un problema que presentan estos controles y es que cuando se hace un postback asíncrono y éste tarda un poco más de lo habitual el usuario puede seguir interactuando con los demás controles y cuando la llama asíncrona termina se le borra al usuario la información que ingresó en los demás controles, lo mejor para prevenir esta situación es bloquear el control o la pantalla mientras se esté haciendo el postback.

Resultado

Proyecto

UpdateProgress, esta creado con Visual Studio 2010.

Requerimientos

Manos a la obra!

Lo primero que haremos será el css que controlara la parte visual de nuestas capas, utilizaremos en total 2: una para el fondo transparente y otra para el mensaje con el gif de pac-man :D.

Fondo transparente:

#screenLock
{
 width: 100%;
 background-color: Gray;
 moz-opacity: 0.5; //Filtro transparencia mozilla
 khtml-opacity: .5; //Filtro transparencia todos los navegadores
 opacity: .5; //Filtro transparencia CSS 3
 filter: alpha(opacity=50); //Filtro transparencia IE 8.0+
 z-index: 9998;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}

No creo que haya algo por resaltar a parte de que puse todos los tipos de filtro de transparencia que me sé (Para cubrir la mayor cantidad de navegadores) y el z-index que tiene un valor de 9998, ¿Por qué 9998? Porque la capa del mensaje usara 9999 sencillo ¿no?.

Capa de mensaje:

#progressMessage
{
 z-index: 9999;
 background-color: White;
 position: absolute;
 top: 0pt;
 left: 0pt;
 border: solid 1px black;
 padding: 5px 5px 5px 5px;
 text-align: center;
 font-family: Arial;
 font-size: small;
}

Creo que no hay nada extraterrestre en este código.

ASPX:




 
 UpdateProgress</pre>
<form id="form1">
<script type="text/javascript" language="javascript">// <![CDATA[
 Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(
 function () {
  if (document.getElementById) {
   var progressMessage = document.getElementById('progressMessage');
   var screenLock = document.getElementById('screenLock');
   progressMessage.style.width = '300px';
   progressMessage.style.height = '30px';
   screenLock.style.height = document.documentElement.clientHeight;
   progressMessage.style.top = document.documentElement.clientHeight / 3 - progressMessage.style.height.replace('px', '') / 2 + 'px';
   progressMessage.style.left = document.body.offsetWidth / 2 - progressMessage.style.width.replace('px', '') / 2 + 'px';
  }
 }
)
// ]]></script>
<div id="main">



<div id="screenLock"></div>
<div id="progressMessage"><img class="style1" src="images/ajax-loader.gif" alt="" />
 Procesando, por favor espere...</div>


</div>
</form>
<pre>


Lo importante a resaltar en todo este amasijo de etiquetas es el script que está justo debajo del ScriptManager (es muy importante que esté allí ya que el objeto sys solo estará disponible después del mencionado ScriptManager)  lo que hacemos aquí es implementar el método Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest que es lanzado ANTES de inicializar cualquier llamado asíncrono. Así que lo que hacemos uso de esto y mediante javascript modificamos los atributos de nuestras capas, colocandolas en la posición deseada.

Y por último el código del nuestro botón:

protected void btnGuardar_Click(object sender, EventArgs e)
{
 System.Threading.Thread.Sleep(3000);
}

Lo hace es emular que el proceso demora 3 segundos haciendo que el hilo principal de la aplicación espere ese tiempo.

Conclusión

Microsoft AJAX sirve para algo!, en serio, cuando tengo que usar ajax prefiero JQuery pero en este caso con solo esta porción de código podemos olvidarnos de cada llamado, ya que funciona para cualquier llamado asíncrono que se haga en la página.

Happy Coding!

Etiquetas:

6 pensamientos sobre “Bloquear la pantalla al hacer postback

Jorge Luis

Hola amigo, si quiero lograr el mismo efecto pero en postback completo cuando la pagina carga muchos datos

Respuesta
Eduardo

Pues ese efecto durara lo que dure el postback… si en el postback se cargan datos, el efecto durara mientras se cargan los datos…

Gracias por comentar!

Respuesta
Ruben

Es infinito, no desaparece el mensaje aun y cuando la la pagina esta cargada completamente, es decir nunca se desbloquea

Respuesta
Proco

Es posible que con la nueva versión de los navegadores este fallando el ejemplo… que versión de Visual Studio estas trabajando?

Respuesta
Angelo

En este post también encontré un método de hacer los mismo, espero les sirva

http://systemdeveloperpy.blogspot.com/2014/02/disable-controls-on-page-pending.html

Respuesta
Proco

Muchas gracias por tu aporte angelo!

Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *