jQuery Progress Bar in ASP.Net

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 in c-sharpcorner.com.

I shall start with a very small ASP.NET design.

Our page consists of a button control. On a button click a method in 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. lt;/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 

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now