http://www.codeproject.com/aspnet/pleasewaitbutton.asp
Download Source Project - 5.17 KB Download Demo Project - 18.4 KB
Introduction
It is often useful upon a form submission in a web application to display a "please wait" message, or animated .gif image, particularly if the submission process lasts a few seconds or more. I recently developed a survey submission application in which internal users upload excel spreadsheets through a web page. The application inserts the uploaded data from the spreadsheets into a database. The upload / insert process may only take a few seconds, but even a few seconds on the web is a noticeable wait. When testing, some users clicked the upload button repeatedly; it was useful to provide a visual clue that the upload was underway For that matter, it was useful to hide the upload button altogether, preventing multiple clicks The control presented here, a subclass of the Button control.. Demonstrates How Client-Side JavaScript Code Encapsulated In an ASP.NET Server Control CAN Provide Such FunctionAlicity ConvenientLy.
Though there are lots of JavaScript examples out there to accomplish this type of thing, I came across some issues when attempting to encapsulate this functionality in an ASP.NET control. My initial attempts involved disabling the button with a JavaScript onClick handler and substituting different text , but I found this would interfere with the functioning of the ASP.NET server-side Click event. What ultimately worked, providing better cross-browser support as well, was to have the button rendered within a
USING THE Control
As its descendent, the PleaseWaitButton functions just like a regular Button control. It exposes three additional properties to govern the display of the "Please Wait" message or image once the button is clicked.PleaseWaitTextThis is the client-side text message to display, if Any, in place of the button at when clicked.
PleasewaitiMageThis is The Image (Typically An Animated .gif) To Display, IF ANY, IN Place of The Button When Clicked. This Property Serves as the src attribute for the resulting TAG.
PleaseWaitTypeone of The PleaseWaittypeenum Values - Textonly, ImageOnly, TextThenImage, Or ImagThentext - Which Governs The Layout of the message and / or image.
Here is an es, .aspx file demonstrating a pleasewaitbutton with pleasewaittext and pleasewaitiitiitiit Set:
<% @ Page language = "c #"%>
<% @ Register tagprefix = "cc1" Namespace = "javascriptcontrols"
AskEMBLY = "pleasewaitbutton"%>
Private void pleasewaitbutton1_click (Object Sender, System.Eventargs E)
{
// Server-Side Click EVENT HANDLER;
// Simulate Something That Could Take a long time,
// like a file upload or time-consuming server processing
DateTime DT = DateTime.Now.AddSeconds (5);
While (datetime.now
{
// do Nothing; Simulate A 5-Second Pause
}
// at the end of the loop display a success message
// and hide the submit form
PANELSUCCESS.Visible = TRUE
Pleasewaitbutton1.visible = false;
}
script>
hEAD>