Introduction

In this article, I shall demonstrate how to use the jQuery progress bar in ASP.NET using ajax.
Before going through this article I strongly recommend you go through the basics of jQuery. For reference, there are many articles on c-sharpcorner.com.
I shall start with a very small ASP.NET design.
Our page consists of the button control. On a button click, a method on the page is invoked. Until the method execution is done the progress bar is updated in the design.
Code Sample
Step 1: Page Design
  1. <body>
  2. <form id="form1" runat="server">
  3. <div id="progressbar"></div>
  4. <div id="result"></div><br />
  5. <asp:Label runat="server" ID="lbldisp" Text= "Percentage Completed : "/>
  6. <asp:Label runat="server" ID="lblStatus" />
  7. <br />
  8. <asp:Button ID="btnGetData" runat="server" Text="Get Data" />
  9. </form>
  10. </body>
Step 2: Import the jQuery and CSS references.
  1. <link type="text/css" href="CSS/ui.all.css" rel="stylesheet" />
  2. <script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
  3. <script type="text/javascript" src="Scripts/ui.core.js"></script>
  4. <script type="text/javascript" src="Scripts/ui.progressbar.js"></script>
Step 3: Progress Bar set up code.
  1. <script type="text/javascript" language="javascript">
  2. $(document).ready(function () {
  3. // jquery Progress bar function.
  4. $("#progressbar").progressbar({ value: 0 });
  5. $("#lbldisp").hide();
  6. //button click event
  7. $("#btnGetData").click(function () {
  8. $("#btnGetData").attr("disabled", "disabled")
  9. $("#lbldisp").show();
  10. //call back function
  11. var intervalID = setInterval(updateProgress, 250);
  12. $.ajax({
  13. type: "POST",
  14. url: "Default.aspx/GetText",
  15. data: "{}",
  16. contentType: "application/json; charset=utf-8",
  17. dataType: "json",
  18. async: true,
  19. success: function (msg) {
  20. $("#progressbar").progressbar("value", 100);
  21. $("#lblStatus").hide();
  22. $("#lbldisp").hide();
  23. $("#result").text(msg.d);
  24. clearInterval(intervalID);
  25. }
  26. });
  27. return false;
  28. });
  29. });
  30. /This function is the callback function which is executed in every 250 milli seconds. Until the ajax call is success this method is invoked and the progressbar value is changed.
  31. function updateProgress() {
  32. var value = $("#progressbar").progressbar("option", "value");
  33. if (value < 100) {
  34. $("#progressbar").progressbar("value", value + 1);
  35. $("#lblStatus").text((value + 1).toString() +"%");
  36. }
  37. }
  38. </script>
On the button click event, the setInterval function is invoked with 2 parameters as input.
  1. UpdateProgress function
  2. Delay: 250 milliseconds.
The setInterval function calls the updateProgress function every 250 milliseconds.
Using the jQuery ajax functionality the GetText method in the Default.aspx code is called.
  1. [System.Web.Services.WebMethod]
  2. public static string GetText()
  3. {
  4. for (int i = 0; i < 10; i ++)
  5. {
  6. // In actual projects this action may be a database operation.
  7. //For demsonstration I have made this loop to sleep.
  8. Thread.Sleep(2600);
  9. }
  10. return "Download Complete...";
  11. }
I have commented the code in such a way that it helps to understand the functionality.
For a better understanding, I have shared the source code.
Output
Progress Bar