How to display progress indicator during ajax call in asp.net using jQuery

Category > ASP.NET || Published on : Thursday, December 17, 2015 || Views: 9699 || display progress indicator during ajax call in asp.net using jQuery display progress indicator during ajax call in asp.net


Introduction

Here Pawan Kumar will explain How to display progress indicator during ajax call in asp.net using jQuery

Description

In previous post I have explained How to create draw a doughnut chart using ChartJS in Asp.net detailed Example, Bootstrap style DropDownList example in ASP.Net, Set DropDownList value based on text/value in jQuery, How to change some text before it is sent to the client in asp.net with example, How to sum the value of gridview column using jquery in asp.net with example, How to compress response in asp.net with example, and many more articles.

Now I will explain How to How to display progress indicator during ajax call in asp.net using jQuery

So follow the steps to learn How to display progress indicator during ajax call in asp.net using jQuery

Step 1: First, We start by creating an Empty asp.net web site in Visual Studio .NET 2013.

Note: Also include jQuery files using Nuget Package Manager

Step 2: Add a new web page name "Default.aspx" with the following codes:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
    <style type="text/css">
        .loader
        {
            display: none;
            background-color: Red;
            width: 100px;
        }
    </style>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#btnLoad").click(function (e) {
                e.preventDefault();
                $("#gvData").html("");
                $("#loader").show();
                sendData();
            });
        });
        function sendData() {
            var loc = window.location.href;
            loc = (loc.substr(loc.length - 1, 1) == "/") ? loc + "Jquery_Progress.aspx" : loc;
            $.ajax({
                type: "POST",
                url: loc + "/GetAllProducts",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    $("#loader").hide();
                    $("#gvData").html(msg.d);
                },
                error: function () {
                    alert("An unexpected error has occurred during processing.");
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Button ID="btnLoad" runat="server" Text="LoadProduct" /><br />
    <div id="gvData">
    </div>
    <div id="loader" class="loader">
        Loading....</div>
    </form>
</body>
</html>

Step 3: Add the following codes in code behind of default.aspx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Services;
using System.Web.Script.Serialization;
using System.Text;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [WebMethod]
    [ScriptMethod]
    public static string GetAllProducts()
    {
        //Comment below line for production server
        System.Threading.Thread.Sleep(3000);
        StringBuilder sb = new StringBuilder();
        JavaScriptSerializer json = new JavaScriptSerializer();
        List<Product> products = ProductDAL.GetProducts();
        json.Serialize(products, sb);
        return sb.ToString();
    }
}

public class Product
{
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public string Description { get; set; }
}
public class ProductDAL
{
    public static List<Product> GetProducts()
    {
        return new List<Product>()
                   {
                       new Product() {ProductID = 1, ProductName = "Apple", Description = "Desc01 Goes here"},
                       new Product() {ProductID = 2, ProductName = "Banana", Description = "Desc02 Goes here"},
                       new Product() {ProductID = 3, ProductName = "Rice", Description = "Desc03 Goes here"},
                       new Product() {ProductID = 4, ProductName = "Grapes", Description = "Desc04 Goes here"},
                       new Product() {ProductID = 5, ProductName = "Beans", Description = "Desc05 Goes here"},
                   };
    }
}

OutPut ScreenShots:-

Conclusion:

So, In this tutorial we have learned, How to display progress indicator during ajax call in asp.net using jQuery

Download Source Codes