Powered by Blogger.

Sunday, July 18, 2010

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


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 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 TextBox 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 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 TextBox 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 HTML tag. However, if UserSubmitBehavior property is set to false then control will render out as 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
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 element. . 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 tag.
Its properties like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. are implemented through style properites of 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 Control
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 (), 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!!!

No comments:

Post a Comment

  ©Template by Dicas Blogger.

TOPO