¿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.

Artículos relacionados
8 Comentarios
  • jhon Comentar
    Wednesday, July 1, 2015

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

  • Jiminez Comentar
    Sunday, March 25, 2018

    Pretty nice post. I just stumbled upon your blog and wished to say that I have truly enjoyed surfing around your blog posts. In any case I'll be subscribing to your feed and I hope you write again very soon!

  • Restrepo Comentar
    Saturday, April 28, 2018

    Buenas tardes, mi pregunta es la siguiente como hago para que se ejecute la barra de carga según se valla cargando los elementos en la vista?

  • Brousseau Comentar
    Thursday, May 3, 2018

    I like the helpful info you provide in your articles. I will bookmark your blog and check again here frequently. I'm quite sure I will learn lots of new stuff right here! Best of luck for the next!

  • Murr Comentar
    Friday, May 4, 2018

    What's up, yeah this post is genuinely nice and I have learned lot of things from it regarding blogging. thanks.

  • Frewer Comentar
    Saturday, May 5, 2018

    You are so cool! I don't think I've truly read a single thing like that before. So great to discover someone with some genuine thoughts on this issue. Really.. thank you for starting this up. This site is one thing that is required on the internet, someone with some originality!

  • da Mata Comentar
    Friday, May 18, 2018

    Fantástico fotos , o cor e profundidade do fotos são de tirar o fôlego, eles atrair você em como se você são parte da composição .

  • Wilks Comentar
    Thursday, May 24, 2018

    certainly like your web site however you need to take a look at the spelling on quite a few of your posts. Several of them are rife with spelling problems and I to find it very bothersome to tell the truth however I will certainly come back again.

Enviame un comentario