Introduction
It is often useful to display "Please wait" information in a Web application form submission, or an animated GIF picture, especially if the submission process is a long one. I recently developed a survey submission program in which internal users upload Excel spreadsheets through a Web page. The program inserts the uploaded spreadsheet data into the database. The process takes only a few seconds, but even in a few seconds, the page seems to be a very obvious waiting process. At the time of the program test, some users repeatedly click the Upload button. Therefore, it is useful to provide a visual information to tell people that uploads are in progress. And also hide the upload button together to prevent multiple clicks. The control described here is a subclass of the button control, which demonstrates how to encapsulate client-side JavaScript code in a ASP.net server control to provide convenience functionality.
Although there are a lot of javascript examples out there to do this, I find some problems when I try to encapsulate these features into the ASP.net control. I first tried to invalidate the button with JavaScript's onclick handle and replace it with another text. But I found it tricky, which would hinder the ASP.net server-side click event. And the way to make it work, and to have a good support for different browsers, is to have the button present in the div tag. The div can be hidden and does not interfere with the ASP.net click event.
Using the control
As a derivation of the normal button control, the Pleasewaitbutton function is essentially the same as it is. It manages the display of "Please wait" information or a picture after the button is clicked through three additional properties.
Pleasewaittext
This is the display of the client text information, if present, when the button is clicked it will replace the button.
Pleasewaitimage
This is the display of image files (such as GIF animated images), if present, when the button is clicked it will replace the button. This property will become the SRC attribute in the tag.
Pleasewaittype
One of the Pleasewaittypeenum enumeration values: Textonly,imageonly,textthenimage, or Imagethentext. It controls the layout of messages and pictures.
The following is an example of an. aspx file that demonstrates a Pleastwaitbutton that sets the Pleasewaittext and Pleasewaitimage.
<%@ Page language= "C #"%>
<%@ Register tagprefix= "cc1" namespace= "Javascriptcontrols"
Assembly= "Pleasewaitbutton"%>
<script runat= "server"
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 < DT)
{
//does 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>
<title>testing pleasewaitbutton</titl E>
<body>
<form id= "Form1" method= "POST" runat= "Server"
<p>testing the Pleasewaitbutton control.</p>
<cc1:pleasewaitbutto n id= "PleaseWaitButton1" runat= "Server"
text= "click me to start a time-consuming process"
Pl easewaittext= "Please wait"
pleasewaitimage= "pleasewait.gif"
onclick= pleasewaitbutton1_clic K "/>
<asp:panel id=" panelsuccess "runat=" Server "
Visible=" false "
Thank For the submitting this form. You are truly
the coolest user I ' ve ever had the pleasure of serving.
No, really, I mean it. There have been others, sure,
but you are really in a class by yourself.
</asp:panel>
</form>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
