One Click Button Control

• Download demo project - 2.41 KB

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