Using the jQuery ProgressBar Widget in ASP.NET Applications

Posted by: Malcolm Sheridan , on 9/14/2009, in Category jQuery and ASP.NET
Views: 97843
Abstract: The following article demonstrates how to use ASP.NET and the jQuery ProgressBar widget to create a richer UI experience.
Using the jQuery the ProgressBar Widget in ASP.NET Applications
 
One of the harder things to do in web development is to give the user feedback about long running processes. This task is made simpler thanks to a widget in jQuery called the ProgressBar. The widget takes all of the hard work out of creating the progress bar, and lets you concentrate on updating the progress bar.  This article will simulate a long running process, and while it’s running, the progress bar will be giving the user visual feedback on the state of the operation.
Before we get started, this example uses the latest version of jQuery which is 1.3.2. That can be downloaded from here. You’ll also need the jQuery UI Core ProgressBar Widget and the PorgressBar CSS files which can be downloaded from here
Open Visual Studio 2008 and create a new Web Application. I’ve separated my project by adding two folders, one called CSS to store the style sheets and the other called Scripts to store the JavaScript files. To begin with add the following JavaScript and CSS file references to the <head> HTML tag:
<link type="text/css" href="CSS/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="Scripts/ui.core.js"></script>
<script type="text/javascript" src="Scripts/ui.progressbar.js"></script>
Now that’s done let’s turn our attention to the ProgressBar widget. The ProgressBar has a method called progressbar which accepts the parameters outlined below:
ProgressbarParameter
The value parameter can get or set the current value of the progress bar. I’ll begin by setting the default value of the progress bar to zero:
$("#progressbar").progressbar({ value: 0 });
The next step is to use jQuery’s Ajax functionality to call a method in our code behind. Add the following code:
$("#btnGetData").click(function() {
var intervalID = setInterval(updateProgress, 250);
      $.ajax({
            type: "POST",
            url: "Default.aspx/GetText",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            success: function(msg) {
                  $("#progressbar").progressbar("value", 100);
                  $("#result").text(msg.d);                       
                  clearInterval(intervalID);
}
      });
      return false;
});
function updateProgress() {           
var value = $("#progressbar").progressbar("option", "value");
      if (value < 100) {
            $("#progressbar").progressbar("value", value + 1);               
}
}
In the above code when the user clicks the button to fetch the data, I am using the JavaScript setInterval function to call another function every 250 milliseconds. This function will be responsible for updating the current value of the progress bar. Next by using Ajax, the code is calling a method called GetText, which is located in the Default.aspx.cs file. The result of that method will be inserted into a div tag whose id is result. Add the following GetText method:
C#
[System.Web.Services.WebMethod]        
public static string GetText()
{
for (int i = 0; i < 10; i ++)
      {               
            Thread.Sleep(1000);
}
      return "All finished!";
}
VB.NET
<System.Web.Services.WebMethod> _
Public Shared Function GetText() As String
For i As Integer = 0 To 9
             Thread.Sleep(1000)
Next i
       Return "All finished!"
End Function
For the method to be called from jQuery, it needs to be a public static method, and needs to be decorated with the WebMethod attribute. Inside the method, I am counting to ten by telling the application to sleep for one second. This will simulate a long running task on the server. The final step is to add the HTML below:
<div id="progressbar"></div>
<div id="result"></div><br />
<asp:Button ID="btnGetData" runat="server" Text="Get Data" />
If you run the application now and click the Get Data button, you’ll have a visual indication of the long running task as the progress bar’s value is updated:
Default setting:
GetData
Once the user clicks the button the progress bar will begin the updates:
GetData_1
And finally when the task is finished, the progress bar will be fully loaded:
AllFinished
This is a nice and easy way to add more richness to your application through jQuery. The entire source code of this article can be downloaded over here.
Give me a +1 if you think it was a good article. Thanks!
Recommended Articles
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by sreeni on Monday, September 14, 2009 9:10 AM
Hi

If Suppose i use the code like the below, your logic won't work.

[System.Web.Services.WebMethod]        
        public static string GetText()
        {
            for (int i = 0; i < 99999999; i ++)
            {
                string str = "minemineminemineminemineminemineminemine";
                str = str + str;
                str = str + str;
                str = str + str;                
            }
            return "All finished!";
        }        

I think, Progress bar can show how much percentage of task will be completed. like Essential Objects progress bar
Comment posted by Malcolm Sheridan on Monday, September 14, 2009 7:22 PM
@sreeni
Yes if you bump up the count in the for loop, the example wont work.  I had not heard of the Essential Objects progress bar but it looks quite nice.  I'll take a look at it and perhaps it could I could write a future article on it.  Thanks!
Comment posted by Waqas Agned Ghumman on Monday, November 23, 2009 6:46 AM
How i start jquery i want learn it... any body refer me a website or a book that is beggning level
Comment posted by Ric on Tuesday, November 24, 2009 4:31 AM
Waqas the best site for learning jquery would be http://jquery.com

If you plan to use jquery and asp.net, you can try a book written by an author of this site  http://www.dotnetcurry.com/ShowArticle.aspx?ID=403
Comment posted by Chetan on Friday, December 4, 2009 12:02 PM
I'm displaying lot of rows in a asp.net gridview, the issue being that the gridview takes time to load and display the data but the server side code has by then completed! I'd like to display the progress bar during the time that the gridview has not displayed the data, is that possible? Appreciate a comment, Thanks!
Comment posted by Malcolm Sheridan on Friday, December 11, 2009 8:53 PM
@Chetan
That sure is. I haven't got any examples of that, but it's possible.
Comment posted by mtranda on Thursday, January 7, 2010 2:58 PM
I'm stumped on another issue. I was trying the examples here: http://t.wits.sg/misc/jQueryProgressBar/demo.php but apparently it doesn't work for ASP.NET when it comes to file uploading. The way someone has explained is that IIS (or ASP.net) expects the whole content of the request before it starts processing on the server side. So it turns out that a user can't do anything about the content on the server side until the file has been completely uploaded, by which time a progress bar would be useless. Do you have any thoughts on this?

So the case is such as this: obviously I avoided FileUpload's Save() method since it does everything in one go and locks your thread until it's completed. So I resorted to the FileContent member in order to obtain the stream. The only problem is that I can't access the stream until the whole content has been uploaded. And for PHP it seems to work (not sure whether it's the web server's "fault" or the development platform's).

Oh, and nice tutorials btw :)
Comment posted by Fabio Xodo on Friday, February 5, 2010 7:00 AM
I modified the code so that it works with an asynch Import, displaying the actual progress value.
Of course it's not optimized, but it works.
You can find the vs2008 project here: http://www.senseiclassroom.net/lesson.asp?id=135

Thanks for the hints.
Comment posted by Nomura on Friday, February 5, 2010 9:13 PM
Thanks Fabio
Comment posted by Ephraim on Friday, August 27, 2010 1:04 PM
How does gmail do their progressbar when it first loads up?
Comment posted by Kevin on Friday, December 24, 2010 12:42 PM
Thanks to Malcom for setting this up, and to Fabio for extending it ;-)
Comment posted by dafd on Friday, February 24, 2012 2:56 AM
test comment is here
Comment posted by nips guuu on Thursday, April 26, 2012 1:45 AM
                 p
Comment posted by J on Thursday, May 3, 2012 5:26 AM
Simple. Looks good. Works.

thanks.
Comment posted by Michael on Wednesday, June 27, 2012 5:15 PM
I notice you are a Telerik insider.  How do I get this progress bar to work if I am using Telerik controls on a page.  I am referencing the embedded JQuery libraries but I keep getting the error 'object doesn't support property or method progressbar'.  I have no problems if no telerik controls are used.

Telerik.Web.UI.Common.Core.js
Telerik.Web.UI.Common.jQuery.js
Telerik.Web.UI.Common.jQueryInclude.js
Comment posted by Michael on Tuesday, July 3, 2012 12:55 PM
Nevermind was able to get it working.  Just needed to pull in the jquery-ui-x.x.x.custom.min.js file.
Comment posted by Chris on Sunday, August 19, 2012 6:41 PM
Hi Michael,

What if I wanted to halt the progress, like have another button 'Stop' which will check to see if it had been pressed and stop the GetText() method running. Is this possible?

Cheers
Comment posted by Chris on Sunday, August 19, 2012 7:12 PM
Hi Michael,

What if I wanted to halt the progress, like have another button 'Stop' which will check to see if it had been pressed and stop the GetText() method running. Is this possible?

Cheers
Comment posted by Chris on Sunday, August 19, 2012 7:20 PM
Hi Michael,

What if I wanted to halt the progress, like have another button 'Stop' which will check to see if it had been pressed and stop the GetText() method running. Is this possible?

Cheers
Comment posted by raj on Friday, August 2, 2013 6:47 AM
test

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel