Displaying jquery progressbar with ajax call on a modal dialog

Working on a website of which one of the requirement is to display a progress bar while completing an ajax call. Yes this is a simple and straight forward requirement and lets look to the details of how to implement it.

1. Create a web service

2. Using jQuery do the following :-
2.1 Show modal dialog box
2.2 show progress bar on the modal dialog box as 0% completed
2.3 Make an ajax call (estimated time of 5 mins)
3. While ajax call is processing make another ajax call to the web service to find the percentage completed and do this using set interval (or) using jquery count down plugin

Now that we have the design aspect, lets start implementing this.

At first an ajax call (ProcessRequest() - webservice method) is made and after 10 secs another ajax call ProcessStatus() - webservice method) is made to retrieve the percentage completed.

AjaxWebService.asmx

[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string ProcessRequest()
{
   return AjaxData.AjaxProcess();
}

[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public int ProcessStatus()
{
   return AjaxData.AjaxStatus();
}

AjaxData.cs

public class AjaxData
{
    private static int status = 0;

 public AjaxData()
 {
        status = 0;
 }

    public static string AjaxProcess()
    {
        string retValue = "Started";
        status = 0;
        for(int i=1;i<=100;i++)
        {
            System.Threading.Thread.Sleep(100);
            status++;
        }

        retValue = "Completed Successfully !";
        return retValue;
    }

    public static int AjaxStatus()
    {
        return status;
    }

}

default.aspx (script)

The complete project source code is available on Codeplex

“Physics is the universe’s operating system.” – Steven R Garman