Ejecutando JavaScript para invocar PoPup desde Asp.Net 2.0

[JonaRock]

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">&nbsp; &nbsp;</span> deben ser iguales, es decir, si progressEnd = 2 tan solo abra <span id="progress1">&nbsp; &nbsp;</span> <span id="progress2">&nbsp; &nbsp;</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">&nbsp; &nbsp;</span>
<span id="progress2">&nbsp; &nbsp;</span>
<span id="progress3">&nbsp; &nbsp;</span>
<span id="progress4">&nbsp; &nbsp;</span>
<span id="progress5">&nbsp; &nbsp;</span>
<span id="progress6">&nbsp; &nbsp;</span>
<span id="progress7">&nbsp; &nbsp;</span>
<span id="progress8">&nbsp; &nbsp;</span>
<span id="progress9">&nbsp; &nbsp;</span>
<span id="progress10">&nbsp; &nbsp;</span>
<span id="progress11">&nbsp; &nbsp;</span>
<span id="progress12">&nbsp; &nbsp;</span>
<span id="progress13">&nbsp; &nbsp;</span>
<span id="progress14">&nbsp; &nbsp;</span>
<span id="progress15">&nbsp; &nbsp;</span>
<span id="progress16">&nbsp; &nbsp;</span>
<span id="progress17">&nbsp; &nbsp;</span>
<span id="progress18">&nbsp; &nbsp;</span>
</div>
</td> &nbsp;</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