One Click Button Control

• Download demo project - 2.5 Kb

Introduction

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

One of the solution is hiding the button after the first click and give a system to complete the post back. The simple example in JavaScript:

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

It works fine for simple html form without ASP.NET whereas implementing this approach on ASP.NET page will enforce us to consider the ability to assign "hiding code" to onclick JavaScript event and run this code in case ASP.NET validation process on the client side is completed successfully. Because if validation on the client side failed form does not post back to the server and we do not need to hide the button yet.

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

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

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

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

To combine all this functionality in one control we will use 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 property ReplaceTitleTo and check if it is not empty. If yes, I replace value of button to change button title. For example, one I can replace Button control with this one:

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