asp.net async progress bar

Posted on 2013-12-20
Medium Priority
Last Modified: 2014-01-04
I'm using VS2008 and have an async progress bar on a page that is part of a project. If I set the page that has the progress bar on it as the start page and run it from VS2008 it runs perfectly, progress bar is updating as expected. Once I try to access the page from either a response.redirect or from a menu item from within the project, the progress bar doesn't get updated.

Any help would be greatly appreciated and if any additional info is required, let me know.

here is the javascript code:

<script type="text/javascript" language="javascript">

    var stopped = false;
    // Starts the async process with parameters if page passes validation
    if (Page_ClientValidate()) {
        function beginRequestHandler(sender, args) {
            stopped = false;
            var invoiceDate = new Date($get('<%= txtInvoiceDate.ClientID %>').value);
            invoiceDate = invoiceDate.getFullYear() + "-" + (invoiceDate.getMonth() + 1) + "-" + invoiceDate.getDate();

            var startDate = new Date($get('<%= txtStartDate.ClientID %>').value);
            startDate = startDate.getFullYear() + "-" + (startDate.getMonth() + 1) + "-" + startDate.getDate();

            var endDate = new Date($get('<%= txtEndDate.ClientID %>').value);
            endDate = endDate.getFullYear() + "-" + (endDate.getMonth() + 1) + "-" + endDate.getDate();

            var ddlCycleID = $get('<%= ddlBillingCycle.ClientID %>');
            var cycleID = ddlCycleID.options[ddlCycleID.selectedIndex].value;

            var ddlType = $get('<%= ddlType.ClientID %>');
            var taxType = ddlType.options[ddlType.selectedIndex].value;

            var userID = '<%= Session("UserID") %>';

            $get('<%= btnConfirm.ClientID %>').disabled = 'disabled';
            $get('<%= btnCancel.ClientID %>').disabled = 'disabled';
            $get('<%= progressPercent.ClientID %>').innerHTML = '0%';
            $get("<%= panelMessages.ClientID %>" + "_MessagePanel").style.display = 'none';
            $get('progressBar').style.width = '0%';
            PageMethods.RunAsync(taxType, invoiceDate, startDate, endDate, cycleID, userID, runAsyncSuccess, runAsyncFailure);
            setTimeout("progressChanged()", 10);

    // Closes the progress bar window and calls the function to refresh grid with results after the async call completes successfully.
    function runAsyncSuccess() {
        if (!stopped) {
            $get('<%= btnConfirm.ClientID %>').disabled = '';
            $get('<%= btnCancel.ClientID %>').disabled = '';
            $get('<%= btnCalculate.ClientID %>').disabled = 'disabled';
            refreshGrid('<%=hfRefereshGrid.ClientID %>');
        stopped = false;

    function runAsyncFailure() {

    function asyncErrors(result) {
        var msgPanel = $get("<%= panelMessages.ClientID %>" + "_MessagePanel");
        msgPanel.style.display = 'block';
        msgPanel.className = 'error';
        msgPanel.innerHTML = result;

    // Calls the Progress method to get the percent complete of the async process
    function progressChanged() {

    // Updates the progress bar with the percent complete of the async process
    function progressSuccess(response) {
        $get('<%= progressPercent.ClientID %>').innerHTML = response + '%';
        $get('progressBar').style.width = response + '%';
        setTimeout("progressChanged()", 10);

    // Cancels the async process
    function cancelAsync() {
        stopped = true;

    // Refreshes the the grid with the results using an async postback
    function refreshGrid(hiddenFieldID) {
        var hiddenField = $get(hiddenFieldID);
        if (hiddenField) {
            hiddenField.value = (new Date()).getTime();
            __doPostBack(hiddenFieldID, '');

Open in new window

here is the code-behind WebMethod code:
' Return the percentage completed  
<WebMethod()> _
Public Shared Function Progress() As Integer
    Return percentage
End Function

' Return any errors/messages that occurred during the async process
<WebMethod()> _
Public Shared Function AsyncErrors() As String
    Return asyncErrMessages
End Function

' Cancel the async call
<WebMethod()> _
Public Shared Sub CancelAsync()
End Sub

' Main routine that initiates the async call
<WebMethod()> _
Public Shared Sub RunAsync(ByVal taxType As String, ByVal invoiceDate As String, ByVal startDate As String, ByVal endDate As String, _
                           ByVal cycleID As String, ByVal userID As String)

    ' Add the list of parameters received from the javascript async call to a List
    Dim args As New List(Of String)

    percentage = 0

    ' Create the backgroundworker to execute the async calls on a separate thread
    bgWorker = New BackgroundWorker()
    bgWorker.WorkerReportsProgress = True
    bgWorker.WorkerSupportsCancellation = True

    Select Case taxType
        ' Set which routine will be run asynchronously
        Case "Services"
            AddHandler bgWorker.DoWork, AddressOf ExportTaxesServices

        Case "Usage"
            AddHandler bgWorker.DoWork, AddressOf ExportTaxesUsage

    End Select

    ' Set the routine that will be called when the progess of the async call changes 
    AddHandler bgWorker.ProgressChanged, AddressOf bgWorker_ProgressChanged

    ' Set the routine that will be called when the async call completes 
    AddHandler bgWorker.RunWorkerCompleted, AddressOf bgWorker_Completed

    ' Start the async process, passing in the parameters

End Sub

' Gets the percentage completed of the async call
Private Shared Sub bgWorker_ProgressChanged(ByVal sender As Object, ByVal e As ProgressChangedEventArgs)
    percentage = e.ProgressPercentage
End Sub

' Gets the result of the async call when completed and reports any errors that may have occurred
Private Shared Sub bgWorker_Completed(ByVal sender As Object, ByVal e As RunWorkerCompletedEventArgs)
    If e.Error IsNot Nothing Then
        asyncErrMessages = e.Error.Message
        Throw New Exception(asyncErrMessages)
    End If
End Sub

Open in new window

Question by:dthansen
1 Comment
LVL 10

Accepted Solution

GeoffSutton earned 2000 total points
ID: 39732440
This strikes me as overly complex to accomplish a simple progress bar.  You have a webmethod which returns your percentage.  Now all you need to do is set timeout on a webservice which updates your progress bar, and if progress is at 100% then redirect to what you want to display.

That being said, I am not seeing where your entry point is on this progress bar.  Everything is wrapped into functions but what calls the initial run progress function?  Did I miss that, or is it not in the code.  My bet is that where the progress bar is initiated is located in an area which is not called in redirect, but only on initial startup.  You said that the code works fine if this is your start page, so you need to look at what is initiating your code.  Is it on page_load?  Or do you have it tucked somewhere else?

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month15 days, 5 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question