Introduction to ASP.NET Hyperlink
ASP.NET HyperLink control is used to create a hyperlink and this control is a server-side control. The main purpose of this control is to refer any web page on the server, it acts in response to the click event. For creating a Hyperlink either we can use drag and drop function which exists on Visual Studio IDE or we can use code for hyperlinking. Hyperlink control which generates the link allows users to navigate from one page to another page. It contains several properties like text property, imageUrl, navigateUrl and so on.
Syntax:
ASP.NET makes available with own tag to build it and ASP.NET Hyperlink is a server-side control. Let’s see the format for the hyperlink control below,
<asp:HyperLinkID="HyperLink_ID" runat="server" Text="Name to be displayed" NavigateUrl="~/PageLink.aspx"></asp:HyperLink>
Properties of ASP.NET Hyperlink
The different properties of ASP.NET Hyperlink explained with the description below.
| Property | Description |
| AccessKey | Access Key is used for setting shortcuts of controls in the keyboard. |
| TabIndex | TabIndex is used for setting the control to the tab order. |
| BackColor | This property is used for setting the background color of the control. |
| BorderColor | This property is used for setting the border color of the control. |
| BorderWidth | This property is used for setting the width of the border of the control. |
| Font | This property is used to set the font for the control text. |
| ForeColor | This forecolor is used to set the color of the control text. |
| Text | This property is used to show the text to be shown for the control. |
| ToolTip | This property is used to show the text to be displayed when the mouse is over the control. |
| Visible | This property is used to set the visibility of control on the form, it may be either true or false. |
| Height | This property is used to set the height of the control. |
| Width | To set the width of the control. |
| NavigateUrl | This property is used to set navigate URL, to navigate from one page to another. |
| Target | This property is the Target frame for the navigate URL. |
How to Implement ASP.NET Hyperlink?
ASP.NET Hyperlink controls are used to create a form design, the implementation is the process of converting the design into actual code. The form design or implementation method is completed after the designing task over. The objective is to offer the logical order for developing the modules and for the creation of the system. The system implementation in the server and checked for its performance and accuracy. Successful implementation of the software is accomplished. An effort works made to satisfy the following goals in orders specify,
- Minimization of response time.
- Minimization of the amount of memory used.
- Clarity and simplicity of code.
Steps to Access HyperLink Control in ASP.Net:
- Open the Visual Studio –> Create New Web Site
- To add a Web Forms for redirecting pages, Add New Item – > Add Web Form for display hyperlink and other for navigation to corresponding WebPages.
- To Drag and drop the HyperLink control on Web Form from the Toolbox.
- Set property as your desired way, such as font-name, border-color, and text and so on for the Hyperlink Control.
- The important property is to set NavigateUrlProperty for redirecting the destination web page.
Examples of ASP.NET Hyperlink
This control ASP.Net Hyperlink is a server-side control. Let’s see the example for the HyperLink on ASP.Net, here in the below implementation I have designed the webpage “HyperLinkExamples.aspx” in this have created three hyperlinks Example for HyperLink – 1, Example for HyperLink – 2 and Example for HyperLink – 3 for each hyperlink have set the property of NavigateUrl which defines the link to another webpage.
Example #1
HyperLinkExamples.aspx:
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HyperLinkExamples.aspx.cs" Inherits="HyperLinkExamples" %>
<!DOCTYPE html>
<html xmlns="https://www.educba.com/">
<head id="Head1" runat="server">
<title>Demo On HyperLink</title>
</head>
<body>
<form id="form1" runat="server">
<div style="margin-left: 40px">
<h2 style="color:black; margin-left: 160px;">ASP.NET - HyperLink Example</h2>
<asp:HyperLink
ID="HyperLink1"
runat="server"
Text="Example for HyperLink - 1 "
NavigateUrl="~/SignIn.aspx"
></asp:HyperLink> <br /> <br />
<asp:HyperLink
ID="HyperLink2"
runat="server"
Text="Example for HyperLink - 2"
NavigateUrl="~/ForgotPassword.aspx"
></asp:HyperLink>
<br/>
<br/>
<asp:HyperLink
ID="HyperLink3"
runat="server"
Text="Example for HyperLink - 3"
NavigateUrl="~/HOMEPage.aspx"
></asp:HyperLink>
</div>
</form>
</body>
</html>
Output:
When we click on the Link-1, it redirects to the corresponding webpage called “~/SignIn.aspx”, let’s see the hyperlink webpage’s when clicking on it.
We can create hyperlinks either in link format or can set image by clicking on this it redirects to the path mentioned in the NavigateUrl property. In the above image, you can see the hyperlinks like New User, Forgot Password as the link and also have designed the image/button hyperlinks like Home button, Log-In page and so on. By clicking on it redirects you to the corresponding WebPages.
When we click on the Link-2, it redirects to the corresponding webpage called “~/ForgotPassword.aspx”, let’s see the hyperlink webpage’s when clicking on it.
Let’s see few codes for the above example webpage redirection to the corresponding page linked clicked,
Example #2
ForgotPassword.aspx:
Code:
<asp:Panel ID="Panel2" runat="server" BackColor="#FFFFCC"
BackImageUrl="~/IMG/bgPetal.jpg"> <br/> <br/>
<asp:Label ID="Label2"
runat="server"
Text="Fill in your email below to request a password which u have created."></asp:Label>
<br/>
<table cellpadding="7" cellspacing="7">
<tr> <td>
<asp:Label ID="Label1" runat="server" Text="E-Mail Address :"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" Height="21px" Width="198px"></asp:TextBox>
</td> </tr> <tr> <td> </td>
<td>
<asp:Button ID="btnSubmit" runat="server" BackColor="Silver" Font-Bold="True"
Font-Names="Times New Roman" ForeColor="#009900" Height="33px"
onclick="btnSubmit_Click" Text="SUBMIT" Width="95px" />
</td> </tr> <tr> <td> </td>
<td>
<asp:Label ID="lbltxt" runat="server"></asp:Label>
</td>
</tr>
</table>
</asp:Panel>
Output:
We can set any properties as we like, let’s see the same form attributes with addition property samples,
In the above form output, the first link contains several properties such as ForeColor, BorderColor, ToolTip and so on. The properties are shown below,
<asp:HyperLink
ID="HyperLink1"
runat="server"
Text="Example for HyperLink - 1 "
NavigateUrl="~/SignIn.aspx"
BackColor="#CCCCCC"
BorderColor="#999999"
BorderWidth="1px"
Font-Bold="True"
Font-Names="Times New Roman"
Font-Size="Medium"
ForeColor="#990099"
ToolTip="Click Here">
</asp:HyperLink>
Conclusion
In this article, we learned about the working process of ASP.NET Hyperlink and its properties to use in the WebPages. I hope this article would have helped out you in placing the control and usage of it in the WebPages. I hope in this article you are understandable with all that has been shared with examples.
Recommended Articles
This is a guide to ASP.NET Hyperlink. Here we discuss the Introduction and properties of ASP.NET Hyperlink along with examples and code implementation. You may also look at the following articles to learn more –
