Solución Bloquear pantalla en POSTBACK con javascript y webforms Boceto
En algunos postback el tiempo del proceso de las tareas es larga y esta puede ser interrupida por nuestro gran amigo y enemigo llamado usuario , para evitar algunas interacciones con la UI y el usuario ( por seguridad y bugs , o excepciones no controladas) una manera util es bloquear la pantalla con una cortina a la estilo web 2.0
En la página web dentro del body (Default.aspx, MasterPage.master , Pagina.HTML) ya sea en la masterpage o webform vamos a poner el siguiente snippet
<div id="divProceso" class="cCargando" style="visibility: hidden;">
<div id="divProcesoMsg" class="cCargandoImg">
<br />
En proceso
<br />
</div>
</div>
<style >
.cCargando {
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
background-color: #000;
opacity: 0.8;
filter: alpha(opacity=80); /* Internet Explorer 8*/
z-index: 9999;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
cursor: progress;
}
.cCargandoImg {
cursor: progress;
position: absolute;
top: 32%;
right: 45%;
left: 35%;
filter: alpha(opacity=80); /* Internet Explorer 8*/
opacity: 0.8;
margin: auto;
width: 350px;
text-align: center;
height: 150px;
padding: 10px;
background-color: #000;
/*border: 1px solid #000;*/
color: #ffffff;
font-size: 2em;
}
function gfProceso() {
if (document.getElementById("divProceso").style.visibility == "visible")
document.getElementById("divProceso").style.visibility = "hidden";
else
document.getElementById("divProceso").style.visibility = "visible";
}
y ya sea en el evento load del body cuando sea un html puro <body load="gfProceso()"> o dentro de un behind *.aspx,cs debemos ponerlo dentro del componente web ( Button , Label , Dropdownlist ,etc .) que ejecutara ese evento largo y tendremos que poner la palabra reservada ( propiedad) de ese componente dentro del Postback del la webform siguiente:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
btnExiste.Attributes["onclick"] = "javascript:gfProceso()";
}
}
Listo
En la página web dentro del body (Default.aspx, MasterPage.master , Pagina.HTML) ya sea en la masterpage o webform vamos a poner el siguiente snippet
<div id="divProceso" class="cCargando" style="visibility: hidden;">
<div id="divProcesoMsg" class="cCargandoImg">
<br />
En proceso
<br />
</div>
</div>
<style >
.cCargando {
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
background-color: #000;
opacity: 0.8;
filter: alpha(opacity=80); /* Internet Explorer 8*/
z-index: 9999;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
cursor: progress;
}
.cCargandoImg {
cursor: progress;
position: absolute;
top: 32%;
right: 45%;
left: 35%;
filter: alpha(opacity=80); /* Internet Explorer 8*/
opacity: 0.8;
margin: auto;
width: 350px;
text-align: center;
height: 150px;
padding: 10px;
background-color: #000;
/*border: 1px solid #000;*/
color: #ffffff;
font-size: 2em;
}
</style >
function gfProceso() {
if (document.getElementById("divProceso").style.visibility == "visible")
document.getElementById("divProceso").style.visibility = "hidden";
else
document.getElementById("divProceso").style.visibility = "visible";
}
y ya sea en el evento load del body cuando sea un html puro <body load="gfProceso()"> o dentro de un behind *.aspx,cs debemos ponerlo dentro del componente web ( Button , Label , Dropdownlist ,etc .) que ejecutara ese evento largo y tendremos que poner la palabra reservada ( propiedad) de ese componente dentro del Postback del la webform siguiente:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
btnExiste.Attributes["onclick"] = "javascript:gfProceso()";
}
}
Listo
Me sirvió de maravillas. Muchas gracias!!
ResponderBorrarSaludos!
gracias muy bueno
ResponderBorrarGracias, por tu aportación. Saludos
ResponderBorrar