ASP.Net ImageButton OnClientClick Property

Updated on 09 Jul 2012,
Published on 24 Nov 2009

The OnClientClick property of ASP.Net ImageButton provides the functionality to execute the client side script before sending the form data to the server. If you will specify any client side code for this property of ImageButton control it will be executed at the time of Click event whether it is being handled by the 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 ImageButton Control.

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

ImageButton Control Examples:

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

<asp:ImageButton ID="ImageButton1" 
    runat="server" 
    ImageUrl="images/imgButton1.jpg" 
    OnClientClick="javascript:return ClientClick();" />

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

ImageButton1.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 ImageButton.

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

Example for ASP.Net ImageButton Control OnClientClick Property

In the example below we have created a javascript function that will open up a confirm message box displaying a message along with OK and Cancel button:

JavaScript Code
function ClientClick(){
    if(confirm('Are you sure, you want to execute this action???')) {
        // you clicked the OK button.
        // you can allow the form to post the data.
        return true;
    }
    else {
        document.getElementById('<%=lblMessage.ClientID %>').innerHTML = "You clicked the Cancel button.";
        // you clicked the Cancel button.
        // you can disallow the form submission.
        return false;
    }

}
C# Code
protected void ImageButton1_Click1(object sender, ImageClickEventArgs e)
{
    // You can add the server code here
}

Above example shows that you can execute both client-side script and server-side event handler code on a single click using OnClientClick property and Click method of ASP.Net ImageButton Control. When user will click the imagebutton it will pop-up the JavaScript confirm message box displaying a message along with OK and Cancel buttons. When user will hit Cancel button it will return false that will disable the web page to submit the form data to the server. When user will hit the OK button then it will return true allowing the web page to post the form data to the server side thereby it also executes the server side Click event handler code.

Output:

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

ImageButton OnClientClick Property

Continue to the next tutorial: ASP.Net ImageButton PostBackUrl Property to learn how to post the form data to the other web page using the cross-page PostBack event of imagebutton.

4 Responses to "ASP.Net ImageButton OnClientClick Property"
I tried this way on IE7,XP, but actually, I don't think "return false" from onClientClick can stop submitting form.
Ah, my fault, another part of my code caused the problem. Forget my last message.
Aijaz
Can anybody help me ?

I want to open and outlook (to send email with email-id) when image button is press in visual studio 2005 C#.

Thanks in advance.
Ezineasp.net
Hi Aijaz

You can use the OnClientClick method of ASP.Net ImageButton control to open up the Outlook express mail box. Try the following code:

OnClientClick="javascript:location.href = 'mailto:demo@demo.com'; return false;"

you can learn about rest of the parameters of mailto link from the following tutorial:

HTML Email Hyperlink href mailto

Hope this will help you.

Good Luck.
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email