This
article will show you how you can show loading message when user click on a
button control to load the next page using jQuery in asp.net.
Some of my
previous articles are as follows: Display
Latitude and Longitude Value on Google Map from Sql Server Data Base in Asp.net
Using C#.Net, Credit
Card Data Format Validation Using jQuery In Asp.Net, Enable
and Disable Asp.Net FileUpload Control Using JavaScript, Enable
and Disable Asp.Net FileUpload Control Using jQuery, How
to Enable or Disable Requiredfieldvalidator in Asp.Net Using jQuery, Dynamically
Display Images From Folder By Ajax Using jQuery In Asp.net ,C#, Read
and Show CSV File Data In DataList Using C#.Net in Asp.net, Log
Creation Or Managing Log File Date Wise In a Text File in Asp.net Using C#.Net, Assign
Client Side Click Event To Button Control Using jQuery In Asp.Net.
For this
article first we will create a new ap.net application and add two pages. One
for ajax and other to load. So here is the code for main page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="WebApplication7.WebForm6" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show Loading While Page Loads Using jQuery in Asp.net</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(document).ajaxStart(function () {
$("#loadingDiv").css("display", "block");
});
$(document).ajaxComplete(function () {
$("#loadingDiv").css("display", "none");
});
$("button").click(function () {
$("#txt").load("AjaxPageLoad.aspx");
$("#btnClick").css("display", "none");
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="txt">
<h2>Let AJAX change
this text</h2>
<br /><br />
</div>
<button id="btnClick">Change
Content</button>
<div id="loadingDiv"
style="display: none; width: 100px; height: 40px; border: 1px solid black; position: absolute; top: 50%; left: 50%; padding: 0px;">
<b><h3>Loading..</h3></b>
</div>
</form>
</body>
</html>
|
In above
code I have used jQuery to perform loading. In this I have used loading
function of jquery. Now check the ajax page. Here is the code for the loading
page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPageLoad.aspx.cs" Inherits="WebApplication7.Ajax.AjaxPageLoad" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
|
In this I
have added button and label control to perform that after loading of page
button event can be performed.
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
namespace
WebApplication7.Ajax
{
public partial class AjaxPageLoad :
System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "You have clicked
the button";
}
}
}
|
Delay has
been added to show the loading for a while. Now we have done run the
application to check the output.
About the Author
0 comments:
Please let me know your view