Click here to Skip to main content
Click here to Skip to main content

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

, 9 Apr 2009
Rate this:
Please Sign up or sign in to vote.
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:

<!-- 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).

// 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.

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:

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:

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.

<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).

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:

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.

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:

<%@ 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:

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)

About the Author

rperetz
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 Pinmemberrajmohan131129-May-14 3:01 
GeneralMy vote of 5 PinprofessionalSabyasachi Misra15-Oct-13 2:15 
GeneralMy vote of 5 Pinmemberavt2k69-May-13 6:14 
QuestionLock ASP.NET page issue! [modified] Pinmemberavt2k69-May-13 6:09 
AnswerRe: Lock ASP.NET page issue! Pinmemberavt2k69-May-13 8:16 
QuestionVery useful post Pinmemberamritha4446-Nov-12 0:24 
QuestionLock ASP.NET Page and Show Animated Image While Waiting for a Long Post-Back Pinmembertom gow27-Jan-12 5:44 
AnswerRe: Lock ASP.NET Page and Show Animated Image While Waiting for a Long Post-Back Pinmemberrperetz5-May-12 3:37 
same as you do it for a button push
You need to add a javascript event attribute to the control that start the job
you set that attribute in the code behind.
 

btnPushLongJob.Attributes.Add("onclick",
    "setTimeout(\"UpdateImg('Image1','images/Wait.gif');\",50);");

QuestionAnimated image not appearing within a master page Pinmembercooleo2k625-Jan-12 4:52 
AnswerRe: Animated image not appearing within a master page Pinmembertom gow2-Feb-12 5:57 
GeneralRe: Animated image not appearing within a master page PinmemberEqquituz1-Feb-13 11:09 
Questionvery good PinmemberSachin Savadatti11-Sep-11 6:55 
GeneralMy vote of 3 Pinmemberribi_jacob7-Sep-11 4:25 
GeneralVery good help, greetings from Germany PinmemberMember 765472116-Jun-11 9:19 
GeneralMy vote of 5 Pinmemberinvincibleruler1238-Nov-10 8:48 
QuestionHow can I use this during page load? PinmemberMerlin443-Nov-10 11:10 
AnswerRe: How can I use this during page load? Pinmemberrperetz12-May-11 10:56 
AnswerRe: How can I use this during page load? Pinmemberrperetz13-May-11 4:15 
GeneralIt is possible to use update panel using Page_IsValid Pinmemberjhpajiri12-Oct-10 19:29 
GeneralRe: It is possible to use update panel using Page_IsValid Pinmemberrperetz13-Oct-10 4:14 
QuestionHow to implement the same with Dropdown and textbox PinmemberKhaja A. Imtiaz3-Oct-10 3:36 
AnswerRe: How to implement the same with Dropdown and textbox Pinmemberrperetz4-Oct-10 3:39 
GeneralMy vote of 5 PinmemberwrapperNo122-Sep-10 14:32 
Questionhow can we change the back color for blocking the div Pinmemberchiya2vas10-May-10 23:19 
AnswerRe: how can we change the back color for blocking the div Pinmemberrperetz12-Aug-10 12:39 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 9 Apr 2009
Article Copyright 2009 by rperetz
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid