En este artículo voy a mostrar cómo utilizar la barra de progreso o progress bar con jQuery en ASP.NET utilizando ajax.
Este ejemplo es muy básico, tú puedes ponerle diseño y ajustarlo a tus necesidades.
La página consiste en un botón asp.net. En el botón cuando da clic un método en la página se invoca. Hasta se ejecuta el método se muestra la barra de progreso.
HTML
<body>
<form id="form1" runat="server">
<div id="progressbar" class="estiloProgressBar"></div>
<div id="result"></div>
<br />
<asp:Label runat="server" ID="lbldisp" Text="Porcentage de descarga: " />
<asp:Label runat="server" ID="lblStatus" /><br />
<asp:Button ID="btnGetData" runat="server" Text="Descargar" CssClass="button" />
</form>
</body>
jQuery y CSS
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Progress Bar con ASP.Net</title>
<link href="CSS/ui.core.css" rel="stylesheet" />
<link href="CSS/ui.progressbar.css" rel="stylesheet" />
<script src="Scripts/jquery-1.3.2.js"></script>
<script src="Scripts/ui.core.js"></script>
<script src="Scripts/ui.progressbar.js"></script>
<link href="CSS/ui.base.css" rel="stylesheet" />
</head>
Código para crear la barra de progreso
<script type="text/javascript">
$(document).ready(function () {
// jquery Progress bar function.
$("#progressbar").progressbar({ value: 0 });
$("#lbldisp").hide();
$("#progressbar").hide();
//button click event
$("#btnGetData").click(function () {
$("#btnGetData").attr("disabled", "disabled")
$("#lbldisp").show();
$("#progressbar").show();
//call back function
var intervalID = setInterval(updateProgress, 250);
$.ajax({
type: "POST",
url: "ProgressBar.aspx/GetText",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (msg) {
$("#progressbar").progressbar("value", 100);
$("#lblStatus").hide();
$("#lbldisp").text(msg.d);
clearInterval(intervalID);
}
});
return false;
});
});
function updateProgress() {
var value = $("#progressbar").progressbar("option", "value");
if (value < 100) {
$("#progressbar").progressbar("value", value + 1);
$("#lblStatus").text((value + 1).toString() + "%");
}
}
</script>
En el evento clic del botón la función setInterval es invocada con 2 parámetros.
Función UpdateProgress
Retardo: 250 milisegundos.
La función setInterval llama a la función UpdateProgress cada 250 milisegundos. El uso de la funcionalidad ajax de jQuery llama el método GetText en el código de servidor de la página ProgressBar.aspx.
[System.Web.Services.WebMethod]
public static string GetText()
{
for (int i = 0; i < 10; i++)
{
// In actual projects this action may be a database operation.
//For demsonstration I have made this loop to sleep.
Thread.Sleep(2600);
}
return "Descarga completada...";
}
Espero que sea de utilidad el ejemplo y recuerden enviar sus comentarios ya que estos son muy importantes y nos ayudan a mejorar.
