Submit Once with an ASP.NET Button Server Control
Illustrate how to submit data once with an ASP.NET button server control
Introduction
It is often a required functionality at a web site that a button is only allowed to be clicked once during data submission, especially for a data critical web application, such as an e-commerce site, in which clicking a button more than once could cause irrecoverable damage.
Implementation of the “submit once” functionality with an ASP.NET button server control may involve the following steps:
- Properly set up the properties of the button server control to enable client side click event and to change its submission behavior
- Code client side JavaScript with consideration of making ASP.NET validation controls functional
- Apply proper styles to HTML
<div>elements during submission to achieve desired visual presentation
In this article, I'll illustrate three cases of “submit once” using the ASP.NET button server control:
- Disable the button upon a click
- Display a message while the button is disabled, and
- Gray out current page upon a button click
A demo application has been prepared for download, in which there are three ASP.NET pages corresponding to the above cases respectively.
Set Up Button Server Control Properties
Two of the properties of an ASP.NET button server control are of our interest:
UseSubmitBehavior:FalseOnClientClick:ClientSideClick(this)
When UseSubmitBehavior is set to False, the button server control is rendered to a client browser as an HTML “button” (HTML <input> tag with type=“button”) instead of an HTML “submit button” (HTML <input> tag with type=”submit”) which is the default behavior. As a result, client side JavaScript is able to intercept the submission process when the button is clicked.
The OnClientClick property specifies a client side JavaScript function. Here, the function is named as ClienSideClick(this). When the button is clicked, this function is executed first before submitting data to server. A decision can be made at client side for whether or not the submission should continue based on the result of client side validation.
HTML code of an ASP.NET button server control with the UseSubmitBehavior and OnClientclick properties at design time is shown below:
<asp:Button ID="btnSubmit" runat="server" CssClass="btn-active"
Text="Submit Data" onclientclick="ClientSideClick(this)" UseSubmitBehavior="False"
onclick="btnSubmit_Click" Width="120px"/>
After being rendered to a client browser, the HTML code will look like that shown below. Note that the type is “button” but not “submit”. The event handler WebForm_DoPostBackWithOptions(...) deals with server side click while the onclick="ClientSideClick(this)" is for client side click.
<input type="button" name="btnSubmit" value="Submit Data" onclick="ClientSideClick(this);
WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnSubmit",
"", true, "", "", false, true))" id="btnSubmit"
class="btn-active" style="width:120px;" />
With the above two properties properly set, the button can be disabled at client side during submission to prevent it from being clicked more than once. In addition, a warning message may also be displayed or the current page may be completely grayed out to indicate the progress of data processing at server side.
Disable Button During Submission
On the DisableButton.aspx page in the demo application, there are two TextBoxes and two corresponding RequiredFieldValidators. Upon a click on the button, if no data is entered in the boxes, the RequiredFieldValidators take action. If boxes are both filled, the button is immediately disabled and stays disabled for the whole duration of server side data processing. The following screen shot shows a disabled button. Its caption has been changed to “processing” to indicate the status of server side activity.
Let’s take a look at the client side JavaScript listed below:
<script type="text/javascript">
function ClientSideClick(myButton) {
// Client side validation
if (typeof (Page_ClientValidate) == 'function') {
if (Page_ClientValidate() == false)
{ return false; }
}
//make sure the button is not of type "submit" but "button"
if (myButton.getAttribute('type') == 'button') {
// disable the button
myButton.disabled = true;
myButton.className = "btn-inactive";
myButton.value = "processing...";
}
return true;
}
</script>
The top portion checks client side validation. Please note that client side validation is auto-generated by the .NET Framework through RequiredFieldValidator server controls. If validation fails, the function returns false. Submission is aborted. Otherwise, execution continues to the bottom portion, which disables the button so that no more clicks are accepted, changes the button caption to “processing…”, and applies a different style to the button. The function then returns true, and submission process continues to the server.
In a real world application, data processing at server side may take a noticeable period of time for mathematic calculation, data transformation, or interaction with database, which is simulated with one line of code in our demo application.
System.Threading.Thread.Sleep(2000);
This causes an adequate delay to let us see the effect of a disabled button. During this time, the button becomes not responsive and a subsequent click does not result in any postback.
Display a Message During Submission
In addition to disabling the button during submission as discussed above, a message box may be displayed to web user as shown in the following screen shot.
This is accomplished using JavaScript in conjunction with an HTML <div> element, message-div. The <div> HTML code is shown below:
<div id="message-div">
<div>Processing data, please wait...</div>
</div>
Its style is defined as follows:
<style type="text/css">
#message-div
{
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -150px;
background-color: #0066FF;
filter: progid:DXImageTransform.Microsoft.Gradient(
GradientType=0,StartColorStr='#0066FF',
EndColorStr='#CCFFFF');
width: 500px;
height: 300px;
border: 2px solid #FF6600;
font-family: Arial;
text-align:center;
color:#FFFFFF;
font-size: 18px;
display:none;
}
#message-div div
{
padding:70px;
}
</style>
The style specifies box size, font, color, etc., and positions the <div> at the center of a browser window. All attributes can be easily modified to produce a desired visual presentation. However, the key attribute for our purpose is the display. Its value is initially set to “none” which makes the <div> invisible when page is loaded into a client browser.
The JavaScript associated with client side button click is listed as follows:
<script type="text/javascript">
function ClientSideClick(myButton) {
// Client side validation
if (typeof (Page_ClientValidate) == 'function') {
if (Page_ClientValidate() == false)
{ return false; }
}
//make sure the button is not of type "submit" but "button"
if (myButton.getAttribute('type') == 'button') {
// disable the button
myButton.disabled = true;
myButton.className = "btn-inactive";
myButton.value = "processing...";
//display message
document.getElementById("message-div").style.display = "block";
}
return true;
}
</script>
This script is almost identical with that in the previous section except that one more line of code is added to the end:
//display message
document.getElementById("message-div").style.display = "block";
This code modifies the value of the style attribute display from “none” to “block”. This change makes the <div> show up at the center of a browser. As a result, a predefined message is presented to our web user.
Gray Out Current Page During Submission
Furthermore, the current page may be completely grayed out upon a button click so that data is only submitted once. The following screen shot illustrates this effect:
To implement this, two <div> elements are required. On the Grayoutbackground.aspx page in our demo application, graybackground-div and message-div are present.
<div id="graybackground-div">
</div>
<div id="message-div">
<div>Processing data, please wait...</div>
</div>
Their corresponding styles are listed below:
<style type="text/css">
#graybackground-div
{
position:absolute;
top:0px;
left:0px;
overflow:hidden;
width:100%;
height:100%;
background-color:#808080;
opacity:0.5;
filter:alpha(opacity=50);
z-index:10;
display:none;
}
#message-div
{
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -150px;
background-color: #0066FF;
filter: progid:DXImageTransform.Microsoft.Gradient(
GradientType=0,StartColorStr='#0066FF',
EndColorStr='#CCFFFF');
width: 500px;
height: 300px;
border: 2px solid #FF6600;
font-family: Arial;
text-align:center;
color:#FFFFFF;
font-size: 18px;
z-index:20;
display:none;
}
#message-div div
{
padding:70px;
}
</style>
The style “#message-div” has been discussed in the previous section and it plays the same role here as it does previously, which is to show a message to web user. Let’s take a look at the style “#graybackground-div”. Its width and height are both set to 100%. It covers a whole browser window when it is displayed. Two attribute, opacity and filter, are particularly important. Appropriate values would make all HTML elements on the page still visible in a dimmed fashion even though covered by the graybackground-div. Consequently, user would see an effect of “gray-out” instead of “black-out” during submission. The attribute of display is initially set to “none” so that the <div> is invisible before button is clicked.
The JavaScript associated with the client side button click is listed below:
<script type="text/javascript">
function ClientSideClick(myButton) {
// Client side validation
if (typeof (Page_ClientValidate) == 'function') {
if (Page_ClientValidate() == false)
{ return false; }
}
//make sure the button is not of type "submit" but "button"
if (myButton.getAttribute('type') == 'button') {
// disable the button
myButton.disabled = true;
myButton.className = "btn-inactive";
myButton.value = "processing...";
//display gray background and message
document.getElementById("graybackground-div").style.display = "block";
document.getElementById("message-div").style.display = "block";
}
return true;
}
</script>
Compared with the earlier listings, two lines of code are added to the end:
//display gray background and message
document.getElementById("graybackground-div").style.display = "block";
document.getElementById("message-div").style.display = "block";
This code simply displays the two pre-defined <div> elements, graybackground-div and message-div in order for us to see a message box backed by a whole page of gray background. That is all we have to do.
Summary
I have illustrated three simple cases of web presentation to implement the functionality of “submit once” using an ASP.NET button server control. For simplicity, the message-div and background-div as well as their style definition are directly placed on ASP.NET pages. Alternatively, these can all be generated using JavaScript.
I am interested to know other ways to achieve the same goal, particularly how it can be done using ASP.NET AJAX Control Toolkit. If you have the knowledge, please share.