Dot Net Guide: 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 HTML tag:

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

$("#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:

[System.Web.Services.WebMethod]

public static string GetText()

{

for (int i = 0; i <>

{

Thread.Sleep(1000);

}

return "All finished!";

}

VB.NET

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:

<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: