This post will show you how to display progress indicator during an ajax call in the ASP.NET web framework using JQuery. When you make an ajax call, it is good practice to indicate to the user that the process is in progress.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Jquery_Progress.aspx.cs"
Inherits="Jquery_Progress" %>
<!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 runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.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>
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 Jquery_Progress : 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 = "P001", Description = "Desc01"},
new Product() {ProductID = 2, ProductName = "P002", Description = "Desc02"},
new Product() {ProductID = 3, ProductName = "P003", Description = "Desc03"},
new Product() {ProductID = 4, ProductName = "P004", Description = "Desc04"},
new Product() {ProductID = 5, ProductName = "P005", Description = "Desc05"},
};
}
}
Tags:
Jquery