Lo que hace este script es poner mostrar un Progress Bar en un div que aparece cada vez que se ejecuta un proceso de carga.
El scrtipt es el siguiente: Ojo que el script lo tome de otro autor, solo le añadi unos detalles nomàs =)
<script language="javascript">
var progressEnd = 18; // set to number of progress <span>'s.
var progressColor = 'Orange'; // set to progress bar color
var progressInterval = 100; // set to time between updates (milli-seconds)
var progressAt = progressEnd;
var progressTimer;
function progress_clear() {
for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgr oundColor = 'transparent';
progressAt = 0;
}
function progress_update() {
document.getElementById('showbar').style.visibilit y = 'visible';
progressAt++;
if (progressAt > progressEnd) progress_clear();
else document.getElementById('progress'+progressAt).sty le.backgroundColor = progressColor;
progressTimer = setTimeout('progress_update()',progressInterval);
document.getElementById("ContenedorProgress").styl e.visibility="visible";
document.getElementById("capaFondo1").style["filter"] = "alpha(opacity=50)";
document.getElementById("capaFondo1").style["opacity"] = "0.5";
}
function progress_stop() {
clearTimeout(progressTimer);
progress_clear();
document.getElementById('showbar').style.visibilit y = 'hidden';
document.getElementById("ContenedorProgress").styl e.visibility="hidden";
document.getElementById("capaFondo1").style["filter"] = "alpha(opacity=100)";
document.getElementById("capaFondo1").style["opacity"] = "1";
}
//progress_update(); // start progress bar
</script>
bueno y despues lo que tienen que hacer es colocar el progress bar en una etiqueta div como muestro a continuacion: Ojo esta variable var progressEnd = 18 y los <span id="progress18"> </span> deben ser iguales, es decir, si progressEnd = 2 tan solo abra <span id="progress1"> </span> <span id="progress2"> </span>. dependerá del gusto de ustedes.
<div id = "ContenedorProgress" runat ="server" class = "DivProgress" style="left: 50%; top: 48%">
<asp:Label ID="lblMensajeProgress" runat="server" ForeColor="Orange">Se están generando los archivos</asp:Label><br />
<table align="center" id="dtProgress"><tr><td>
<div id="showbar" style="font-size:8pt;padding:2px;border:solid black 1px;visibility:hidden">
<span id="progress1"> </span>
<span id="progress2"> </span>
<span id="progress3"> </span>
<span id="progress4"> </span>
<span id="progress5"> </span>
<span id="progress6"> </span>
<span id="progress7"> </span>
<span id="progress8"> </span>
<span id="progress9"> </span>
<span id="progress10"> </span>
<span id="progress11"> </span>
<span id="progress12"> </span>
<span id="progress13"> </span>
<span id="progress14"> </span>
<span id="progress15"> </span>
<span id="progress16"> </span>
<span id="progress17"> </span>
<span id="progress18"> </span>
</div>
</td> </tr></table>
</div>
Ahora lo unico que tienen que hacer invocarlo desde cualquier evento del asp.
Por ejemplo: yo lo invoco desde un imagebutton
<asp:ImageButton ID="ImageButton6" runat="server" ImageUrl="~/Imagenes/48px-Crystal_Clear_app_package_utilities.png" OnClick="ImageButton6_Click" OnClientClick = "progress_update()"/><br />
Eso es todo.
Otro Dato. si lo que quieren es invocar al javascript desde la clase .cs ( osea lado del serviodor). hay muchas formas aca les muestro una.
protected void ImageButton6_Click(object sender, ImageClickEventArgs e)
{
string strScript = "";
strScript += "document.getElementById('showbar').style.visibili ty = 'visible';";
strScript += "progressAt++;";
strScript += "if (progressAt > progressEnd) progress_clear();";
strScript += "else document.getElementById('progress'+progressAt).sty le.backgroundColor = progressColor;";
strScript += "progressTimer = setTimeout('progress_update()',progressInterval);" ;
strScript += "document.getElementById('ContenedorProgress').sty le.visibility='visible';";
strScript += "document.getElementById('capaFondo1').style['filter'] = 'alpha(opacity=50)';";
strScript += "document.getElementById('capaFondo1').style['opacity'] = '0.5';";
ScriptManager.RegisterClientScriptBlock(this.Image Button6, GetType(), "script", strScript, true);
}
pueden manipularlo desde ahi. poniendolo dentro de un If o lo que se les venga en gana.
Nota: Una alternativa a usar ScriptManager.RegisterClientScriptBlock(this.Image Button6, GetType(), "script", strScript, true); ( si no tan trabajando con ajaxcontroltoolkit)
es Page.ClientScript.RegisterClientScriptBlock(typeof (Page), "ImageButtonPrueba_Click", strScript);
ahora si me voy, ya me dio hambre. alamos gente