ASP.Net Button OnClientClick Property

Updated on 02 Jul 2012,
Published on 25 Sep 2009

The OnClientClick property of ASP.Net Button provides the functionality to execute the client script before sending the data to server. If you will specify any client script code for this property of Button control it will be executed at the time of Click event whether it is handled by Click event handler or Command event handler at the server. You can create the JavaScript functions as a client side script that can be used as a value for OnClientClick property of the Button Control.

In ASP.Net you can specify the value for Button Control's OnClientClick property in two ways. First way is to assign the value at the time of design time by adding the OnClientClick property as an attribute of Button control in the HTML markup code block.

Button Control Examples:

You can see the live samples and examples of Button Control from the following links:

<asp:Button ID="Button1" 
    runat="server" 
    Text="Button" 
    OnClientClick="javascript:return ClientClick();" />

The Second way is to add the OnClientClick property value programmatically at the server side.

Button1.OnClientClick = "javascript:return ClientClick();";

You can add the above code at the Page_Load event of ASP.Net web page that will render the specified client script value for OnClientClick property along with the associated ASP.Net Button control.

As shown in the code above we have used "javascript" and colon ":" before specifying the client script function name. These attributes are required only if you are specifying the javascript function that will return the Boolean value as true/false. The javascript functions that return true/false enable/disable the associated Button control to submit the form data to the server.

Example for ASP.Net Button Control OnClientClick Property

In the example below we have created a javascript function that sets the value of ASP.Net Button control at client side. It will indicate the user that the server code is executing at back end.

HTML Code
<script type="text/javascript">

    function ClientClick(){
        document.getElementById('<%=Button1.ClientID %>').value = 'Processing please wait...';
        return true;
    }

</script>

<asp:Button ID="Button1" 
runat="server" 
Text="Button" 
OnClientClick="javascript:return ClientClick();" 
OnClick="Button1_Click" />
C# Code
protected void Button1_Click(object sender, EventArgs e)
{
    // Server code will go here.
}

Above example shows that you can execute both client-side script and server-side event handler code on a single button click using OnClientClick property and Click method of ASP.Net Button Control.

Output:

Get the output for above discussed code from the following link:

Button OnClientClick Property

Continue to the next tutorial: ASP.Net Button Confirm Message Box to learn how to show the pop up message box to the user to confirm the action taken by him.

4 Responses to "ASP.Net Button OnClientClick Property"
James Khouri
I thought at the beginning of my ASP.NET learnings, I was taught to create the OnClientClick code in the C# code behind file. Like so, HTML page: <asp:Button ID="blah" OnClientClick="blah_ClientClick".. Code behind: protected void blah_ClientClick(object sender, EventArgs e) { } Is there ever a time that can be done? Or am I confusing that with the server side OnClick event that is written like that?
juan s
Thank you. I had been forever trying to figure out what the "javascript:" did inside the OnClientClick attribute. You clarified this for me. Thank you.
Meenakshisundaram M
Below is a web application using vb.net which used client messagebox and works based on its return value.
here, default.aspx page redirects to test.aspx only if textbox has value in it.

In default.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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>
<script>
function validate_this()
{
if (document.getElementById("TextBox1").value.length == 0)
{return false;}
else
{
return confirm('Do you wish to continue');
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick = "javascript:return validate_this();"/>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>
</form>
</body>
</html>

In default.aspx.vb
Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
If TextBox1.Text <> "" Then
Response.Redirect("test.aspx")
End If
End Sub
End Class

Hope this information is clear to try
Thank you so much. Your post has been of unprecedented help for me. Best of luck to you. Jack.
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email