Monday, February 8, 2010

Disable ASP.NET Button while processing in Background

Today, I was stuck in a simple scenario, where I wanted to restrict end user to click a button only once. Looked simple, and while starting implementation, doesn't found it simple enough.

I asked my friends and different people gave me different opinions and options. I was looking for the good option without putting extra code.

So here is the Default2.aspx code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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>Background Processing while disabling main button</title>
<script type="text/javascript" language="javascript">
function disableBtn(btnID, newText) {

var btn = document.getElementById(btnID);
setTimeout("setImage('"+btnID+"')", 10);
btn.disabled = true;
btn.value = newText;
}
//using absolute url for image to avoid complication
function setImage(btnID) {
var btn = document.getElementById(btnID);
btn.style.background = 'url(http://images.ysatech.com/ajax-loader.gif)';
}
</script>
</head>

<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnOne" runat="server" Text="Process" OnClientClick="disableBtn(this.id, 'Processing...')"
UseSubmitBehavior="false" OnClick="btnOne_Click"/>
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>

And then Default2.aspx.cs code here:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void btnOne_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
Label1.Text = DateTime.Now.ToLongDateString();
}
}

Special Thanks to Bryian.