Using JQuery ProgressBar with Long ASP.NET Process

OK, so maybe others have figured this out, but if so, they haven't written about it. Wanted to use the JQuery Progressbar to display progress results for a long ASP.NET Process.

First thing was to download a theme from the ThemeRoller site, http://jqueryui.com/themeroller/, and add the jquery library to my project.

Next, you must create a class to process the status of a ThreadStart Result in ASP.NET. For details on doing this, you can read the Microsoft Documentation, located at: .

Next, you will need two pages, one for creating the long process, one for showing the progress of the item.

The majority of the work can be found in the sample code, found at: http://www.joshuablackstone.com/Examples/LongProcess.zip, but the key for me was how to show the progress in the progress bar. First, create your div, such as:

<div class="progress" rel="0" runat="server" id="progressBar"></div>, and then the code to post the value to the progress bar is set with this function:

function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
$("div.progress").each(function () {
var element = this;
$(element).progressbar({
value: parseInt($(element).attr("rel"))
});
});
}
}

The reason for the section (if (args.Get_isPartialLoad)) is because an update panel is triggering a timer every two seconds to get the latest value from the threadstart.

So then, you run the process, which sends the user to the progress page, where they will see a jquery themed progress bar showing progress for the long process, and redirects to a page of your choice when complete.

Cool.