¿Cómo crear una barra de progreso con jQuery y ASP.NET?

¿Cómo crear una barra de progreso con jQuery y ASP.NET?

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.

Compartir

Comentarios (2)

  • jhon Responder

    Hola muy bueno, y si dejas los archivos css y js ? saludos.

    Wednesday, July 1, 2015 8:06 AM
  • Willard Responder

    OMEGA buildings don't produce Simoleons, the standard in-recreation forex, but NeoSimoleons, which are stored in a separate NeoBank and can only be used on the NeoMall for high-value objects.

    Friday, April 21, 2017 4:48 PM

Animate deja un comentario!!!

Eres un humano?

Últimos Tweets

Contáctanos

  • Dirección: Plutarco Elias Calles 243, Granjas México, Iztacalco, DF.

  • Teléfono:55-2712-3820 o 55-4164-9484

  • Email: info@developerji.com