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

Disabling button at client side before firing server side event

, 6 Sep 2007
Rate this:
Please Sign up or sign in to vote.
Disabling a button at client side before firing a server side event.

Introduction

Many times it's required to disable a button at client side before firing a server side event. One example is while processing credit card payments, the button has to be disabled until the card details are processed which is a time consuming job. This may sometimes seem to be unresponsive, so if the user clicks the button once again, the risk is that payment may get processed twice.

So to avoid this, it's a best practice to disable the button at client side once the user clicks the button and re-enable it after the processing is complete. Disabling the button can be achieved through a simple JavaScript function and an attribute. But the problem is the server side event doesn't get fired once the button is disabled using JavaScript.

I found a cool feature to overcome this in ASP.NET 2.0: ClientScript.GetPostBackEventReference. The main function of ClientScript.GetPostBackEventReference is that it returns a string that can be used in a client event to cause postback to the server. http://msdn2.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.getpostbackeventreference.aspx.

Using the code

//Code Behind
//Add this within the Page_Load()
btnClick.Attributes.Add("onclick", 
   ClientScript.GetPostBackEventReference(btnClick, "") + 
   ";this.value='Processing Credit Card Payment...';this.disabled = true;"); 
 
//The actual code with which I tested
protected void Page_Load(object sender, EventArgs e)
{
    btnClick.Attributes.Add("onclick", 
      ClientScript.GetPostBackEventReference(btnClick, "") + 
      ";this.value='Processing Credit Card Payment...';this.disabled = true;");
}
protected void btnClick_Click(object sender, EventArgs e)
{
  System.Threading.Thread.Sleep(2000);
}
ASPX page
<%@ Page Language="C#" AutoEventWireup="true" 
   CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnClick" runat="server" Text="ClickMe" OnClick="btnClick_Click" />
</div>
</form>
</body>
</html>

<h2>
This would do the job perfectly!
</h2>

License

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

Share

About the Author

spraman
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
GeneralAnother solution PinmemberJon Sagara6-Sep-07 6:16 
GeneralSome problems Pinmemberkpumuk6-Sep-07 5:54 

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 | Mobile
Web02 | 2.8.140827.1 | Last Updated 6 Sep 2007
Article Copyright 2007 by spraman
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid