Blogger Widgets
  • Sharing Photos using SignalR
  • TFS Extenstion - allows copy work items between projects
  • Displaying jquery progressbar with ajax call on a modal dialog
  • Managing windows services of a server via a website
  • Exploring technologies available to date. TechCipher is one place that any professional would like to visit, either to get an overview or to have better understanding.

Search This Blog

Tuesday 28 September 2010

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

3 comments:

Copyright © 2013 Template Doctor . Designed by Malith Madushanka - Cool Blogger Tutorials | Code by CBT | Images by by HQ Wallpapers