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

One Click Button Control

, 9 Oct 2006 CPOL
Rate this:
Please Sign up or sign in to vote.
Some users like to click twice or more on the Submit button especially if the postback does not respond immediately. This scenario can bring problems on the server in case, for instance, if the “first click” already disposed some resources. In this article, I am going to discuss one of the solutions

Introduction

Some users like to click twice or more on the Submit button especially if the postback does not respond immediately. This scenario can bring problems on the server in case, for instance, if the "first click" already disposed some resources in the session state or view state. So the next click will cause an exception. More problems could be caused if the submit button runs some financial transactions. In this case, the system will do more than the user expected.

One of the solutions to this is hiding the button after the first click and giving time to the system to complete the postback. Here is a simple example in JavaScript:

<INPUT onclick="this.disabled = true" type=submit value=Submit />

It works fine for a simple HTML form without ASP.NET whereas implementing this approach on an ASP.NET page will enforce us to consider the ability to assign "hiding the code" of the onclick JavaScript event and running this code if the ASP.NET validation process on the client side is completed successfully. Because, if the validation on the client-side fails, the form does not postback to the server and we do not need to hide the button yet.

You may say that ASP.NET does client-side validation and we do not need to check it manually, but we need to do this before making a decision whether we need to make the postback or not. This small block of code checks if the client side validation is completed successfully:

if (typeof(Page_ClientValidate) == 'function') {
    if (Page_ClientValidate() == false){
        return false;
    }
}

After that, we can hide the button and even change the button value to, for instance, "Please wait..." to inform the user that the page is posting back to the server.

this.value = 'Please wait...';
this.disabled = true;

To combine all this functionality in to one control, we will use the Button control as a base:

public class OneClickButton : Button
{
    private string replaceTitleTo;
    public string ReplaceTitleTo
    {
        get { return this.replaceTitleTo; }
        set { this.replaceTitleTo = value; }
    }
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        StringBuilder script = new StringBuilder();
        script.Append("if (typeof(Page_ClientValidate) == 'function') { ");
        script.Append("if (Page_ClientValidate() == false) { return false; }} ");
        if (!String.IsNullOrEmpty(this.replaceTitleTo))
        {
            script.Append("this.value = '");
            script.Append(this.replaceTitleTo);
            script.Append("';");
        }
        script.Append("this.disabled = true;");
        script.Append(this.Page.GetPostBackEventReference(this));
        script.Append(";");
        this.Attributes.Add("onclick", script.ToString());
    }
}

I added the property ReplaceTitleTo and check if it is not empty. If yes, I replace the value of the button to change the button title. For example, I can replace the Button control with this one:

<uc:OneClickButton id="butSubmit" 
   ReplaceTitleTo="Please wait..." runat="server" />

License

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

Share

About the Author

Alexander Kleshchevnikov
Web Developer
Ukraine Ukraine
Alexander is freelance web developer with 4 years experience. He has skills in ASP.NET/MS SQL Server, PHP/MySQL, Ruby On Rails, XHTML, CSS. You can contact with me by seigo.ua@gmail.com. Also check my homepage at www.klalex.com.

Comments and Discussions

 
GeneralPerfect Solution Pinmemberkoese3-Oct-07 18:51 
GeneralGet code! Pinmemberjgoeke15-Feb-07 10:54 
Generalit is good but.. Pinmemberhbn10-Oct-06 5:27 
GeneralRe: it is good but.. Pinmembercowboybvi@yahoo.co.uk4-Dec-06 23:46 
GeneralRe: it is good but.. PinmemberExtra Gravy13-Sep-07 11:42 

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 | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 9 Oct 2006
Article Copyright 2006 by Alexander Kleshchevnikov
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid