Difference between asp:LinkButton, asp:ImageButton, asp:Button and asp:HyperLink control

SheoNarayan
Posted by in ASP.NET category on for Intermediate level | Views : 181510 red flag
Rating: 3.67 out of 5  
 3 vote(s)

In this article, I am going to describe what are the main differences between asp:LinkButton, asp:ImageButton, asp:Button and asp:HyperLink control and how/where to use them effectively.
Introduction
In our day to day programming, we almost daily use asp:LinkButton, asp:ImageButton, asp:Button and asp:HyperLink controls. I am trying to describe what are the main differences and similarities between them and where/how to use them effectively. 
asp:LinkButton Control
LinkButton control is a control just like a Button control along with the flexibility to make it look like a Hyperlink.  It implements an anchor <a/> tag that uses only ASP.NET postback mechanism to post the data on the server. Despite being a hyperlink, you can't specify the target URL. There is no UserSubmitBehavior property like Button control with this control.

Its properties like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. are implemented through style properites of <a/> tag. You can set its Text property either by setting Text properties in the .aspx page or from server side page. (other properties can also be set from both sides)

Following are some important properties that are very useful.
CausesValidation Value can be set as true/false. This indicates whether validation will be performed when this button will be clicked.
PostBackUrl Indicates the URL on which the Form will be posted back if this button will be clicked.
ValidationGroup Gets or Sets the name of the validation group that the button belongs to. This is used to validate only a set of Form controls with this Button.
OnClick

Attach a server side method that will fire when this button will be clicked.

OnClientClick Attach a client side (javascript) method that will fire when this button will be clicked.

Note that this button will not work if JavaScript is disabled in the browser as ASP.NET write its own function to post data to the server when this button is clicked.

Where /When to use asp:LinkButton Conntrol

Usually, this control is used to give a uniform look and feel through out the page/site if you are using hyperlink to navigate through the site. Also if you have less space and want to show a control that can actually fire server side event, placing Button control will not work as this take more space as well as its look and feel is completely different than LinkButton control.

For more details and demo: http://www.dotnetfunda.com/tutorials/controls/linkbutton.aspx

asp:ImageButton Control

ImageButton control is used to post the form or fire an event either client side or server side. Its like a asp:Button control, the only difference is, you have the ability to place your own image as a button. ImageButton control is generally used to post the form or fire an event either client side or server side. When it is rendered on the page, generally it is implemented through <input type=image > HTML tag.

There is no UserSubmitBehavior property like Button control with this control.

Its properties like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. are implemented through style properites of <input> tag. You can set its Image location either by setting ImageURL properties in the .aspx page or from server side page. (other properties can also be set from both pages)

Following are some important properties that are very useful.

ImageUrl Gets or Sets the location of the image to display as button control.
CausesValidation Value can be set as true/false. This indicates whether validation should be performed when this button is clicked.
PostBackUrl Indicates the URL on which the Form will be posted back when this button will be clicked.
ValidationGroup Gets or Sets the name of the validation group that the button belongs to. This is used to validate only a set of Form controls with this Button.
OnClick Attach a server side method that will fire when this button will be clicked. 
OnClientClick Attach a client side (javascript) method that will fire when this button will be clicked.

As in the case of LinkButton, ImageButton control will also not work if JavaScript is disabled in the browser as ASP.NET write its own function to post data to the server when this button is clicked.

Where / When to use asp:ImageButton Conrol?

Usually, this control is used to attract user attention and maintain uniformity thorugh out the site. You can create same type (look and feel) of image for every action user need to perform in your website/application and use it.

For more details and demo: http://www.dotnetfunda.com/tutorials/controls/imagebutton.aspx

asp:Button Control

Button control is used to post the form or fire an event either client side or server side. Button control is generally used to post the form or fire an event either client side or server side. When it is rendered on the page, it is generally implemented through <input type=submit> HTML tag. However, if UserSubmitBehavior property is set to false then control will render out as <input type=button>.

Its properties like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. are implemented through style properites of <input> tag. You can set its Text property either by setting Text property in the .aspx page or from server side page. (other properties can also be set from both pages)

A button can be set as default button (Default button is a button that fires automatically when an user presses Enter key while filling a form.) by specifying DefaultButton property of the <form> tag or to the asp:Panel tag in which it is placed. eg. If we have to set a button with id btnSubmit as default button we can add following properties to the <form> element. <form id="Form1" DefaultButton="btnSubmit" runat="server">.

Following are some important properties that are very useful.

UserSubmitBehavior true/false. If true, the button will be used as client browser submit mechanism else asp.net postback mechanism.
CausesValidation Value can be set as true/false. This indicates whether validation will be performed when this button is clicked.
PostBackUrl Indicates the URL on which the Form will be posted back when this button will be clicked.
ValidationGroup Gets or Sets the name of the validation group that the button belongs to. This is used to validate only a set of Form controls with this Button.
OnClick Attach a server side method that will fire when this button will be clicked. 
OnClientClick Attach a client side (javascript) event that will fire when this button will be clicked.

Irrespective of whether JavaScript is enabled or not, this button will work if UserSubmitBehavior property is set to true for this control. If this property is set to false and JavaScript is disabled this control will not work.

Where / When to use asp:Button control?

This is a traditional control and generally used to submit forms to the server. This is the most oftenly used control, as you have flexibility to use styles in this control, you can customize it as per your need.

For more details and demo: http://www.dotnetfunda.com/tutorials/controls/button.aspx

asp:HyperLink Control

Hyperlink control is used to jump to another location or to execute the script code. When rendered on the page, it implements an anchor <a/> tag.

Its properties like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. are implemented through style properites of <a/> HTML tag. You can set its Text either by setting Text property in the .aspx page or from server side page. (other properties can also be set from both pages)

Following are some important properties that are useful.

NavigateUrl Used to specify the location to jump to.
ImageUrl Used to place an image instead of text as Hyperlink.

If you need to fire any client side function (JavaScript) after clicking this, you need to prefix its NavigateUrl property with JavaScirpt like this. NavigateUrl="javascript:MyFunction()"

Where /When to use asp:Hyperlink Contro?

As this control is the server side form of HTML anchor tag so it is preferred to not use it and use simply anchor tag (<a />), however there are certain scenario where you need to decide the navigational url or text for the link through server side dynamically, in that scenario you can use it.

Fore more details and demo: http://www.dotnetfunda.com/tutorials/controls/hyperlink.aspx

Conclusion

In this article, we understood the difference between asp:LinkButton, asp:ImageButton, asp:Button and asp:Hyperlink control and its use.

Hope this article will helped someone. Please let me know if you have any feedback or suggestions. Thanks

Happy Coding!!!

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com

Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)