¿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 (6)

  • 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
  • Danforth Responder

    Hey there, You have done an excellent job. I'll certainly digg it and personally recommend to my friends. I am confident they will be benefited from this website.

    Thursday, June 8, 2017 10:07 AM
  • Kasper Responder

    This design is incredible! You certainly know how to keep a reader entertained. Between your wit and your videos, I was almost moved to start my own blog (well, almost...HaHa!) Excellent job. I really loved what you had to say, and more than that, how you presented it. Too cool!

    Sunday, June 25, 2017 8:22 AM
  • Cheap NFL Jerseys Wholesale Responder

    Remember that the whole procedure will be composed of small processes. Even so, playing tennis is beneficial for all ages, particularly for young children because of the reasons below:Tennis is a form of exercise No matter how you see it, tennis will always give you some cardio work out which makes it a form of exercise.Agent Mike Moye, who represents both pitchers, has heard from Minnesota. Laying a low price and backing it back later at a higher price would have the same result. Small financial savings will contribute as time passes, and you can be saving that cash for old age, or possibly a massive addition that you might want to buy.

    Wednesday, June 28, 2017 12:31 PM
  • Siebenhaar Responder

    Hello there! This article couldn't be written any better! Going through this post reminds me of my previous roommate! He always kept talking about this. I'll forward this post to him. Fairly certain he's going to have a good read. Thanks for sharing!

    Sunday, July 2, 2017 1:32 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