Click here to Skip to main content
15,867,686 members
Articles / Web Development / XHTML

Lock ASP.NET Page and Show Animated Image While Waiting for a Long Post-Back

Rate me:
Please Sign up or sign in to vote.
4.83/5 (35 votes)
9 Apr 2009CPOL4 min read 264.9K   11.1K   119   46
Lock page while post back

Introduction

Problem

One of the biggest problems in the web is pages that take a long time to process once submitted. Let’s say you have an ASP.NET form that takes up to 30 seconds to process and the user keeps pushing the submit button twice or more hoping to get the information faster (which can cause data problems). One way to solve this problem is by disabling the submit button once it’s been pushed. But what if you have more than one button on your form?

Solution

In this article, I will show you how you can disable all your ASP.NET form's controls during a post back and also show the user a nice friendly animated GIF while the page is posting back. In fact, you can even move this little box if you are bored waiting for it.

Yahoo to Yahoo

Yahoo gives us a full working framework of JavaScript that we can download and use in our web applications for free! So why not take advantage of it? You can find more information about it here.

In this article, I will only use the Panel object from the Yahoo YUI. Here are a few easy steps to get started:

Download the framework scripts to your project from here (v. 2.7).

The framework should be in one directory called YUI (I have downloaded the 2.7.0 version). Copy this directory to your web project, your web project should look like this:

WebProjectWithYUIFolder.gif

Show Me the Money Jerry!

Now that we have the Yahoo Framework setup in our project, we are in business! Here are a few easy steps to setup your ASP.NET page to take full advantage of the Panel object (here).

Under the <head> tag of HTML, include these JavaScript files:

ASP.NET
<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="yui/build/container/assets/container.css"/>
<link rel="stylesheet" type="text/css" href="yui/build/menu/assets/skins/sam/menu.css"/>
<!-- YUI Dependencies -->

<script type="text/javascript" src="yui/build/utilities/utilities.js" ></script> 
<script type="text/javascript" src="yui/build/container/container-min.js"></script>
<script type="text/javascript">

Let’s create few easy JavaScript functions: let’s start with initializing the Panel with a title that says "Loading, Please wait…" and have an animated GIF called Wait.gif (you can add more properties to this object, read the Yahoo docs).

JavaScript
// sets up all of the YUI dialog boxes
function InitDialogs() {
DialogBox_Loading = new YAHOO.widget.Panel("waitBox", 
	{ fixedcenter: true, modal: true, visible: true, 
	width: "230px", close: false, draggable: true });
DialogBox_Loading.setHeader("Loading, please wait...");
DialogBox_Loading.setBody('<div style="text-align:center;">
	<img src="images/Wait.gif" id="Image1" /></div>');
DialogBox_Loading.render(document.body);
}

Let’s create a JavaScript function that is responsible to show the “wait box” or hide it based on a boolean value. We also want to make sure that the ASP.NET page is valid (all ASP.NET validation controls have succeeded) before we show the Panel object. We can use the Page_IsValid flag on the client side to check that. In order to get this flag, we are forced to call the JavaScript method generated by .NET called Page_ClientValidate(); on the push of the button. I will show this later in the article.

JavaScript
function Loading(b) {
    if (b == true && Page_IsValid == true) {

    DialogBox_Loading.show();
}

else {

    DialogBox_Loading.hide();
}
}

For this example, I have added the AJAX script manager so I can enjoy the pageLoaded() event on the client side. To read more about it, go here. If you don't want to use the Ajax Framework, then we need to wire up the page load event in JavaScript ourselves. Here is an example of how to do it: Let's add a helper JavaScript function that will call any function we want for a page load event. I have included that sample in my download sample project under YahooWaitLoadOnButtonServerNoAjax.aspx. Here is a working example of how to do it with JavaScript:

JavaScript
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

// wire up the PageLoad function with our helper function addLoadEvent
addLoadEvent(function() {
pageLoad();
})

In the Page Load event, I will initialize the Dialog box and not show it:

JavaScript
function pageLoad() {
InitDialogs();
Loading(false);
}

Now we are ready to create a few ASP.NET controls, let’s create a text box, a Required Field Validator and an ASP.NET button that takes more than 30 seconds to process. We are going to link a few JavaScript calls to our button.

ASP.NET
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="false" />
<div>

<asp:TextBox ID="txtFirstName" runat ="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="VtxtFirstName" ControlToValidate="txtFirstName" 
	ErrorMessage="error" runat="server"></asp:RequiredFieldValidator>
<asp:Button ID="btnPushLongJob" Text ="Start Long Job" runat="server" 
    OnClientClick="Page_ClientValidate();Loading(true);" OnClick="btnPushLongJob_Click"/>
</div>
</form>
</body>

I am calling Page_ClientValidate() which is a JavaScript function generated by my ASP.NET Validator control. I was forced to call it so it can set the Page_isValid flag on the client side which is used in Loading JavaScript function. And I am calling Loading(true) to show the Dialog box.

Now let’s plug a long processing task in our code behind for the event of Onclick of the button (remember to add the System.Threading namespace to enjoy the Thread class).

C#
protected void btnPushLongJob_Click(object sender, EventArgs e)
{
        Thread.Sleep(30000);
}

Problem: GIF Animation Stops during Postbacks

Well, sometimes life is hard and not everything works as expected. For some reason, Internet Explorer decided to make our life a bit harder and stop all GIF animations during a post back, but there is a way around it and I will show it to you right here and now for free (I am a nice guy, no?). Resetting the source of the image in JavaScript seems to fix this issue.

I have added the following JavaScript code:

JavaScript
function UpdateImg(ctrl, imgsrc) {
var img = document.getElementById(ctrl);
img.src = imgsrc;
}

And I link my ASP.NET button to it from the code behind in the Page Load event.

C#
protected void Page_Load(object sender, EventArgs e)
{
btnPushLongJob.Attributes.Add("onclick", 
	"setTimeout(\"UpdateImg('Image1','images/Wait.gif');\",50);");
}

And we are done!

Here is a full page code:

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" 
	CodeFile="YahooWaitLoadOnButtonServerSide.aspx.cs" 
	Inherits="YahooWaitLoadOnButtonServerSide" %>
<!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>

<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="yui/build/container/assets/container.css"/>
<link rel="stylesheet" type="text/css" href="yui/build/menu/assets/skins/sam/menu.css"/>
<!-- YUI Dependencies -->

<script type="text/javascript" src="yui/build/utilities/utilities.js" ></script> 
<script type="text/javascript" src="yui/build/container/container-min.js"></script>
<script type="text/javascript">

function pageLoad() {
InitDialogs();
Loading(false);
}

function UpdateImg(ctrl, imgsrc) {
var img = document.getElementById(ctrl);
img.src = imgsrc;
}

// sets up all of the YUI dialog boxes
function InitDialogs() {
DialogBox_Loading = new YAHOO.widget.Panel("waitBox", 
	{ fixedcenter: true, modal: true, visible: true, 
	width: "230px", close: false, draggable: true });
DialogBox_Loading.setHeader("Loading, please wait...");
DialogBox_Loading.setBody('<div style="text-align:center;">
	<img src="images/Wait.gif" id="Image1" /></div>');
DialogBox_Loading.render(document.body);
}
function Loading(b) {
if (b == true && Page_IsValid == true) {
DialogBox_Loading.show();
}
else {
DialogBox_Loading.hide();
}
}
</script>
</head>
<body>

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="false" />
<div>

<asp:TextBox ID="txtFirstName" runat ="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="VtxtFirstName" 
	ControlToValidate="txtFirstName" ErrorMessage="error" 
	runat="server"></asp:RequiredFieldValidator>
<asp:Button ID="btnPushLongJob" Text ="Start Long Job" runat="server" 
    OnClientClick="Page_ClientValidate();Loading(true);" OnClick="btnPushLongJob_Click"/>
</div>
</form>
</body>
</html>

And here is the full code for the Code behind file:

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;
public partial class YahooWaitLoadOnButtonServerSide : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
btnPushLongJob.Attributes.Add("onclick", 
	"setTimeout(\"UpdateImg('Image1','images/Wait.gif');\",50);");
}
protected void btnPushLongJob_Click(object sender, EventArgs e)
{
Thread.Sleep(3000);
}
}

The Code

I have created a sample project that includes the Yahoo YUI 2.7 Framework. You would want to try the YahooWaitLoadOnButtonServerSide.aspx page for this sample (for no Ajax support, view YahooWaitLoadOnButtonServerNoAjax.aspx page). I have also included a few other samples like a tool tip and using the Dialog box with Page Methods.

You can download the code from the link at the top of this article.

I hope you enjoyed this article, and it made your life a little bit easier.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer TrafficTech
Canada Canada
Have technical skills that can be demonstrated and an ability to resolve complex problems quickly while working in a demanding, high pressure environment

Designs, plans, and coordinates software development work teams

Provides technical mentorship to project team members

Handles complex application features and technical designs for the development of new applications.

Write articles about ASP.net:
http://www.codeproject.com/KB/aspnet/SQLHelper20.aspx http://www.codeproject.com/KB/aspnet/DateAndTimePicker.aspx http://www.codeproject.com/KB/aspnet/SQLHelper20.aspx http://www.codeproject.com/KB/aspnet/WaitImageBoxWhilePagePost.aspx

Designs and implements the components, frameworks and layers required for complex application features

Understands and participate in all aspects of the Software Development Life Cycle

Relies on experience and judgment to plan and accomplish goals.

Ability to perform various programming activities (coding, testing, debugging, documenting, maintaining and supporting).

Ability to work independently with minimal supervision.

10 years’ experience in web software design and development.

SpecialtiesASP.net
SQL 2005
AJAX 1.0
Linq
C# 3.5
Microsoft Application Blocks
Java Script
Reporting Services
SQL SSIS
XML
Classic ASP

Comments and Discussions

 
GeneralMy vote of 1 Pin
rajzz29-May-14 3:01
rajzz29-May-14 3:01 
GeneralMy vote of 5 Pin
Sabyasachi Misra15-Oct-13 2:15
professionalSabyasachi Misra15-Oct-13 2:15 
GeneralMy vote of 5 Pin
avt2k179-May-13 6:14
avt2k179-May-13 6:14 
QuestionLock ASP.NET page issue! Pin
avt2k179-May-13 6:09
avt2k179-May-13 6:09 
AnswerRe: Lock ASP.NET page issue! Pin
avt2k179-May-13 8:16
avt2k179-May-13 8:16 
QuestionVery useful post Pin
amritha4446-Nov-12 0:24
amritha4446-Nov-12 0:24 
QuestionLock ASP.NET Page and Show Animated Image While Waiting for a Long Post-Back Pin
tom gow27-Jan-12 5:44
tom gow27-Jan-12 5:44 
AnswerRe: Lock ASP.NET Page and Show Animated Image While Waiting for a Long Post-Back Pin
rperetz5-May-12 3:37
rperetz5-May-12 3:37 
QuestionAnimated image not appearing within a master page Pin
cooleo2k625-Jan-12 4:52
cooleo2k625-Jan-12 4:52 
AnswerRe: Animated image not appearing within a master page Pin
tom gow2-Feb-12 5:57
tom gow2-Feb-12 5:57 
GeneralRe: Animated image not appearing within a master page Pin
Eqquituz1-Feb-13 11:09
Eqquituz1-Feb-13 11:09 
GeneralRe: Animated image not appearing within a master page Pin
Member 815202123-Dec-14 18:44
Member 815202123-Dec-14 18:44 
Questionvery good Pin
Sachin Savadatti11-Sep-11 6:55
Sachin Savadatti11-Sep-11 6:55 
GeneralMy vote of 3 Pin
ribi_jacob7-Sep-11 4:25
ribi_jacob7-Sep-11 4:25 
GeneralVery good help, greetings from Germany Pin
Member 765472116-Jun-11 9:19
Member 765472116-Jun-11 9:19 
GeneralMy vote of 5 Pin
invincibleruler1238-Nov-10 8:48
invincibleruler1238-Nov-10 8:48 
QuestionHow can I use this during page load? Pin
Merlin443-Nov-10 11:10
Merlin443-Nov-10 11:10 
AnswerRe: How can I use this during page load? Pin
rperetz12-May-11 10:56
rperetz12-May-11 10:56 
AnswerRe: How can I use this during page load? Pin
rperetz13-May-11 4:15
rperetz13-May-11 4:15 
GeneralIt is possible to use update panel using Page_IsValid Pin
jhpajiri12-Oct-10 19:29
jhpajiri12-Oct-10 19:29 
GeneralRe: It is possible to use update panel using Page_IsValid Pin
rperetz13-Oct-10 4:14
rperetz13-Oct-10 4:14 
QuestionHow to implement the same with Dropdown and textbox Pin
Khaja A. Imtiaz3-Oct-10 3:36
Khaja A. Imtiaz3-Oct-10 3:36 
AnswerRe: How to implement the same with Dropdown and textbox Pin
rperetz4-Oct-10 3:39
rperetz4-Oct-10 3:39 
GeneralMy vote of 5 Pin
wrapperNo122-Sep-10 14:32
wrapperNo122-Sep-10 14:32 
Questionhow can we change the back color for blocking the div Pin
chiya2vas10-May-10 23:19
chiya2vas10-May-10 23:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.