Skip to content

Single Click ASP.Net Button

June 20, 2008

Doesn’t the idea of some inconsiderate user double clicking (or more likely, hammering) your carefully made Submit buttons?  Multiple inserts, tied up connections all sorts of terrors spring to mind. 

After this sort of thing bites you in the ass once, one takes the time to find a way to prevent it.  I’ve used some javascript to modify buttons in the page-init and custom controls but recently had to do a sort of low tech page and find a way to stop users from their “If I click it more than once it’ll know that I’m in a hurry and process faster!” behaviour.

Score!

<asp:Button ID=”btnUpdate” runat=”server” UseSubmitBehavior=”false” OnClientClick=”if(Page_ClientValidate()) { this.disabled = true; } else {return false;}” Text = “Update” CssClass=”button” OnClick=”btnUpdate_Click” ValidationGroup=”vgNew”/>

The first thing to notice is the UseSubmitBehavior set to false.  From MSDN:

“When the UseSubmitBehavior property is false, control developers can use the GetPostBackEventReference method to return the client postback event for the Button. The string returned by the GetPostBackEventReference method contains the text of the client-side function call and can be inserted into a client-side event handler.”

The second thing to notice is the OnClientClick which is a sort of client side event but on a server side button.  A fool (like me) would have just put this.disabled = true;  there.  The fool would be very surprised when he clicks save and sees that he left a field blank and the validation prevented the POST but still locked the button.  Now the fool is screwed.

So we add the if(Page_ClientValidate()) to make sure we don’t lock the button until it really should be locked.  If I had multiple validation groups on the page and wanted to limit the scope for the button I can overload the call with Page_ClientValidate(‘group1’); and specify the validation group.

Advertisements
13 Comments leave one →
  1. Damien permalink
    July 3, 2008 4:00 pm

    This is just what i wanted. I knew there had to be a way to validate the page before I disabled the button but all the answers i found for single click just did the disable. Thanks!

  2. Phil permalink
    July 19, 2008 7:06 pm

    This is the first decent solution I’ve seen to solve this problem, and it’s mind-boggling because you’d think ASP.NET would ship with a button control that addresses this issue.

  3. January 21, 2009 4:32 pm

    Been trying to find a cross-browser solution, so will try this out.

    Thanks.

  4. jatin permalink
    May 29, 2009 9:59 am

    Good Work.. Well Done.. Its Just that solution i m looking for.. Thanks Alot

  5. Sam permalink
    August 13, 2009 9:30 am

    You rock! Cheers.

  6. John Walker permalink
    June 11, 2010 5:41 am

    Excellent. Simple implementation. Thank you.

  7. santi permalink
    July 14, 2010 3:08 pm

    thank u!

  8. Carlos A A Neves permalink
    October 19, 2011 11:36 pm

    you are the man! thank you!

  9. October 20, 2011 8:54 am

    Thanks.

  10. March 16, 2012 12:21 pm

    Perfect, thanks!

Trackbacks

  1. [RESOLVED]call button click only once | ASP Questions & Answers
  2. [RESOLVED]call button click only once | ASP Web Form Data Control
  3. [RESOLVED]call button click only once | ASP.NET MVC

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: