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

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

    Hi, I do believe this is a great web site. I stumbledupon it ;) I will revisit yet again since I bookmarked it. Money and freedom is the best way to change, may you be rich and continue to help other people.

    Tuesday, August 8, 2017 11:35 PM
  • Lorimer Responder

    You also can talk to others yet it's advisable which you follow your instinct. There are countless different shapes and styles through which their shoes are for sale in the market. If you are searching for the same comfort and ease in relation to setting hair, then make sure you get their hands on this dryer without further delay.

    Saturday, August 12, 2017 10:13 AM
  • Eaton Responder

    What's up to every one, because I am truly eager of reading this web site's post to be updated daily. It contains pleasant material.

    Monday, August 21, 2017 5:06 AM
  • Swenson Responder

    Du solltest in Kürze eine Antwort per E-Mail erhalten.

    Friday, September 1, 2017 9:27 PM
  • Taulbee Responder

    Two measly years on the 6P.. _Are you kidding me?!_.

    Saturday, September 2, 2017 11:28 AM
  • Mendes Responder

    Como Ganhar Dinheiro na Rede Com Marketing Multinivel.

    Saturday, September 23, 2017 1:35 AM
  • Whitmore Responder

    You can find any knid of local and international tastes here.

    Monday, October 9, 2017 9:02 PM
  • Kiser Responder

    I constantly emailed this weblog post page to aall my associates, since if like to read it next my friens will too.

    Tuesday, October 17, 2017 12:09 PM
  • Schultheiss Responder

    The successful candidate will based in the Hong Kong office and report to COO, Beijing.

    Tuesday, October 24, 2017 7:55 AM
  • Hallstrom Responder

    Wow, superb weblog layout! How lengthy have you been blogging for? you make blogging glance easy. The overall look of your site is magnificent, let alone the content material!

    Wednesday, October 25, 2017 3:10 AM
  • Logan Paulsen nfl jerseys Responder

    Hi there, just became aware of your blog through Google, postcheap nike nfl jerseysand found that it is truly informative cheap nfl jerseys. I going to watch out for brussels. I will be grateful if you continue this in future. Numerous people will be benefited from your writing. Cheers!

    Thursday, October 26, 2017 11:20 PM
  • pro bowl jerseys Responder

    Pretty section of content. I just stumbled upon your blog and in accession capital to assert that I get in fact enjoyed account we supply cheap nfl jerseys your blog posts. Any way Il be subscribing to your feeds and even I achievement you access consistently fast.

    Friday, October 27, 2017 3:34 AM
  • cheap nfl jerseys Responder

    Pretty section of content. I just stumbled upon your blog and in accession capital to assert that I acquire actually enjoyed account we supply cheap nfl jerseys your blog posts. Anyway Il be subscribing to your augment and even I achievement you access consistently rapidly.

    Friday, October 27, 2017 7:28 AM
  • cheap nfl jerseys Responder

    Since I didn't really understand how this works,we supply cheap nfl jerseys I did some searching and found an outstanding WordPress Trackback Tutorial that explains much of what I was finding confusing.

    Friday, October 27, 2017 3:38 PM
  • Andrus Peat jerseys Responder

    Thanks for another fantastic article. Where else could anyone get that kind of info in such an ideal way of writing? I've a presentation next week, and I'm on the look for such info.

    Friday, October 27, 2017 7:18 PM
  • grey giants jersey Responder

    Attractive section of content. I just stumbled upon your site and in accession capital to assert that I acquire in fact enjoyed account we supply cheap nfl jerseys your blog posts. Any way I will be subscribing to your augment and even I achievement you access consistently fast.

    Friday, October 27, 2017 11:04 PM
  • cheap jerseys china Responder

    I been exploring for a little bit for any high quality articles or blog posts on this kind of area postcheap jerseys. Exploring in Yahoo I at last stumbled upon this site. Reading this information So i am happy to convey that I've a very good uncanny feeling I discovered exactly what I needed. I most certainly will make certain to don't forget this website and give it a look on a constant basis.

    Saturday, October 28, 2017 3:09 AM
  • Kasey Redfern jerseys Responder

    Someone essentially lend a hand to make seriously posts I would state. postcheap nfl jerseysThat is the first time I frequented your web page and up to now? I surprised with the research you made to make this actual publish incredible. Wonderful job!

    Saturday, October 28, 2017 7:02 AM
  • black red 49ers jersey Responder

    I do agree with all the ideas you have presented in your postcheap jerseys. They are really convincing and will definitely work. Still, the posts are very short for novices. Could you please extend them a little from next time? Thanks for the post.

    Saturday, October 28, 2017 8:46 AM
  • cheap nike nfl jerseys Responder

    Thanks for the good writeup. It if truth be told was a entertainment account it. Glance complicated to far introduced agreeable from you! By the way, how can we keep in touch?

    Saturday, October 28, 2017 11:18 AM
  • minnesota vikings custom jersey Responder

    hey there and thanks on your info ?I certainly picked up anything new from right here postwholesale nfl jerseys. I did alternatively expertise some technical points the use of this site, as I skilled to reload the site a lot of instances prior to I could get it to load properly. I have been brooding about in case your hosting is OK? No longer that I'm complaining, however sluggish loading cases instances will sometimes impact your placement in google and can harm your high-quality score if advertising and ****|advertising|advertising|advertising and *** with Adwords. postwholesale nfl jerseysAnyway I adding this RSS to my email and can glance out for much more of your respective interesting content. Make sure you update this again very soon.

    Saturday, October 28, 2017 3:10 PM
  • bernard reedy jersey Responder

    Il immediately postcheap nike nfl jerseys snatch your rss as I can not in finding your email subscription link or newsletter service. Do you've any? Please allow me recognize so that I may just subscribe. Thanks.

    Saturday, October 28, 2017 6:47 PM
  • cheap nike nfl jerseys Responder

    relationships with other bloggers. Check out this extremely well-written trackback tutorial Permalink,we supply cheap nfl jerseys.

    Saturday, October 28, 2017 10:46 PM
  • boldin 49ers jersey Responder

    Since I didn't really understand how this works,we supply cheap nfl jerseys I did some searching and found an outstanding WordPress Trackback Tutorial that explains much of what I was finding confusing.

    Saturday, October 28, 2017 11:09 PM
  • youth chicago bears jersey Responder

    Il immediately postwholesale nfl jerseys seize your rss as I can't find your email subscription hyperlink or e-newsletter service. Do you have any? Please let me recognise in order that I may subscribe. Thanks.

    Sunday, October 29, 2017 4:31 AM
  • 49ers black jersey for sale Responder

    Wow, wonderful blog layout! How long have you been blogging for? you make blogging look easy to cheap nfl jerseys china. The overall look of your website is great, postas well as the content!

    Sunday, October 29, 2017 8:58 AM
  • Jarveon Williams nfl jersey Responder

    I do agree with all of the ideas you've presented in your postcheap jerseys. They're very convincing and will definitely work. Still, the posts are very short for newbies. Could you please extend them a little from next time? Thanks for the post.

    Sunday, October 29, 2017 7:04 PM
  • Seantrel Henderson nfl jersey Responder

    relationships with other bloggers. Check out this extremely well-written trackback tutorial Permalink,we supply cheap nfl jerseys.

    Sunday, October 29, 2017 9:20 PM
  • kent hull jersey Responder

    Hi there, just became aware of your blog through Google, postcheap nike nfl jerseysand found that it's really informative cheap nfl jerseys. I gonna watch out for brussels. Il be grateful if you continue this in future. A lot of people will be benefited from your writing. Cheers!

    Monday, October 30, 2017 2:31 PM
  • Jerel Worthy jerseys Responder

    We are a group of volunteers and starting a new scheme in our community. Your web site offered us with valuable information to work on cheap nfl jerseys china. You have done a formidable job and our entire community will be grateful to you.

    Tuesday, October 31, 2017 7:48 AM
  • where to buy cheap nfl jerseys online Responder

    Thank you for another great article. Where else could anyone get that kind of info in such an ideal way of writing? I have a presentation next week, and I'm on the look for such information.

    Tuesday, October 31, 2017 9:52 PM
  • where to get cheap nfl jerseys Responder

    I do agree with all of the ideas you have presented in your postwholesale nfl jerseys. They're really convincing and will definitely work. Still, the posts are very short for starters. Could you please extend them a little from next time? Thanks for the post.

    Wednesday, November 1, 2017 7:47 PM
  • Taco Charlton nfl jersey Responder

    We're a group of volunteers and opening a new scheme in our community. Your web site provided us with valuable information to work on cheap nfl jerseys china. You've done a formidable job and our entire community will be grateful to you.

    Thursday, November 2, 2017 11:42 PM
  • Kavon Frazier jerseys Responder

    Hello there, simply was aware of your blog through Google, and found that it's really informative. I gonna be careful for brussels. Il be grateful if you proceed this in future. Numerous other folks might be benefited from your writing. Cheers!

    Friday, November 3, 2017 2:22 AM
  • nq cowboys jersey 2015 Responder

    I do agree with all of the ideas you've presented in your post. They are really convincing and will certainly work. Still, the posts are too short for starters. Could you please extend them a bit from next time? Thanks for the post.

    Friday, November 3, 2017 9:53 PM
  • cowboys away jersey Responder

    Thank you for the auspicious writeup. It in reality used to be a enjoyment account it. Look complex to far brought agreeable from you! However, how can we communicate?

    Saturday, November 4, 2017 12:27 AM
  • Ryan Switzer jerseys Responder

    Someone essentially assist to make seriously posts I would state. postcheap jerseysThis is the first time I frequented your website page and thus far? I surprised with the research you made to make this actual put up amazing. Magnificent activity!

    Saturday, November 4, 2017 8:19 PM
  • Matthews Responder

    For emergencies, dial 112 for police, and 119 for the fire department.

    Saturday, November 4, 2017 10:30 PM
  • Jeff Heath nfl jersey Responder

    A person necessarily assist to make critically articles I'd state. postwholesale nfl jerseysThis is the first time I frequented your web page and to this point? I amazed with the analysis you made to create this particular submit extraordinary. Wonderful task!

    Saturday, November 4, 2017 10:52 PM
  • Barrientos Responder

    Oleh karena itu, plafon (plafon gypsum) pun harus didesain dengan cantik dan menarik.

    Monday, November 6, 2017 5:50 PM
  • Bustos Responder

    Hmm it seems like your website ate my first comment (it was super long) so I guess I'll just sum it up what I submitted and say, I'm thoroughly enjoying your blog. I too am an aspiring blog blogger but I'm still new to the whole thing. Do you have any points for novice blog writers? I'd certainly appreciate it.

    Tuesday, November 7, 2017 6:54 PM
  • Langley Responder

    I absolutely love your blog and find most of your post's to be just what I'm looking for. Do you offer guest writers to write content for you? I wouldn't mind publishing a post or elaborating on most of the subjects you write related to here. Again, awesome web site!

    Wednesday, November 8, 2017 5:28 AM
  • cheap soccer jerseys free shipping Responder

    relationships with other bloggers. Check out this extremely well-written trackback tutorial Permalink,we supply cheap nfl jerseys.

    Wednesday, November 8, 2017 8:06 PM
  • Kohlmeier Responder

    Thanks on your marvelous posting! I seriously enjoyed reading it, you are a great author. I will be sure to bookmark your blog and definitely will come back someday. I want to encourage continue your great posts, have a nice evening!

    Sunday, November 12, 2017 5:02 PM
  • Kohlmeier Responder

    Thanks on your marvelous posting! I seriously enjoyed reading it, you are a great author. I will be sure to bookmark your blog and definitely will come back someday. I want to encourage continue your great posts, have a nice evening!

    Sunday, November 12, 2017 5:02 PM
  • James Onwualu jerseys Responder

    Somebody necessarily lend a hand to make severely articles I might state. postThat is the first time I frequented your website page and so far? I surprised with the research you made to create this particular post extraordinary. Fantastic task!

    Tuesday, November 14, 2017 4:15 PM
  • Dexter McCoil nfl jersey Responder

    I'm extremely impressed with your writing skills post and also with the layout on your weblog with cheap nfl jerseys. Is this a paid theme or did you customize it yourself? Either way keep up the nice quality writing, it rare to see a nice blog like this one nowadays

    Wednesday, November 15, 2017 3:27 PM
  • Matt Skura jerseys Responder

    We are a group of volunteers and opening a new scheme in our community. Your site provided us with valuable information to work on cheap nfl jerseys china. You've done a formidable job and our whole community will be thankful to you.

    Thursday, November 16, 2017 2:18 PM
  • Kavel Responder

    Which discount jerseys do you ever buy? Now this one site for sale: wholesale sports jerseys authentic

    Friday, November 17, 2017 9:36 AM
  • Ricky Jean-Francois nfl jersey Responder

    relationships with other bloggers. Check out this extremely well-written trackback tutorial Permalink,we supply cheap nfl jerseys.

    Friday, November 17, 2017 5:20 PM
  • cheap nike nfl jerseys Responder

    Thank you for another fantastic article. Where else could anybody get that type of info in such an ideal way of writing? I've a presentation next week, and I am on the look for such information.

    Saturday, November 18, 2017 4:36 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