Category >
ASP.NET
|| Published on :
Thursday, December 17, 2015 || Views:
9696
||
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