Using the jQuery ProgressBar Widget in ASP.NET Applications
Posted by: Malcolm Sheridan ,
on 9/14/2009,
in
Category jQuery and ASP.NET
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:
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:
Once the user clicks the button the progress bar will begin the updates:
And finally when the task is finished, the progress bar will be fully loaded:
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.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
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