ASP.Net HyperLink OnClick Event

Updated on 05 Jul 2012,
Published on 11 Nov 2009

The ASP.Net HyperLink control does not provide any in-built property to attach the client side onclick event by selecting it from the intellisense that appears in the HTML source view of ASP.Net web page. Instead you can add the onclick event forcibly as an attribute in the HTML markup code block of Hyperlink control. The onclick client side event allows you to call the client side JavaScript functions. The Hyperlink controls specified with onclick event execute the client side javascript first before navigating the web page to other page specified in the NavigateUrl property. You can control the navigation based on the true/false return value returned by the JavaScript function.

HyperLink Control Examples:

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

In ASP.Net you can attach the onclick event to Hyperlink control in two ways. First way is to add and assign the value at the time of designing by adding the onclick property as an attribute of HyperLink control in the HTML markup code block.

<asp:HyperLink ID="HyperLink1" 
    runat="server" 
    NavigateUrl="Default2.aspx" 
    onclick="return confirm('Are you sure?');">
    Hyperlink
</asp:HyperLink>

The Second way is to add the onclick attribute programmatically at the server side.

HyperLink1.Attributes.Add("onclick", "return confirm('Are you sure to navigate to other page?');");

You can add the above code at the Page_Load event of ASP.Net web page that will render the specified onclick event as an attribute of Hyperlink control.

As shown in the code above we have used "return" keyword before specifying the client script function name. It is required 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 Hyperlink control to navigate to other web page.

Example for ASP.Net Hyperlink Control OnClick Event

In the example below we have created a javascript function that will show a confirm message with Ok and cancel button. If the user will click the cancel button then it will return false otherwise true.

JavaScript Code
function confirmNavigation(){
    return confirm('Are you sure to navigate to other page?');
}
HTML Code
<asp:HyperLink ID="HyperLink1" 
    runat="server" 
    NavigateUrl="Default2.aspx" 
    onclick="return confirmNavigation();">
    Hyperlink
</asp:HyperLink>

In the above example code the onclick event added to the hyperlink control will call the JavaScript function before navigating the web page to the specified location.

Output:

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

HyperLink Control OnClick Event

Continue to the next tutorial: ASP.Net HyperLink Open in New Window to learn the use of onclick event and target property to open a new window when user clicks on it.

0 Responses to "ASP.Net HyperLink OnClick Event"
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email