Web Forms - Working with ASP.NET server controls

Using Hyperlinks

Web pages can contain hyperlinks, and in Visual Basic .NET Web applications, you use the HyperLink control to create hyperlinks. Such hyperlinks can link to another page in your Web application or anywhere on the Web. You can specify the location of the linked page in an absolute way, where you use the linked page's complete URL, or in a relative way, with respect to the current page.

You can see both types of links in Figure 14.11, in the HyperLink example in the code for this book—this example supports hyperlinks both to Microsoft's Web site (using an absolute URL: "http://www.microsoft.com") and to an HTML page in the same project (using a relative URL: "HTMLPage1.htm"). In that figure, the link to the other page in the same project (an HTML page, HTMLPage1.htm, that's been added to the project) has been clicked, bringing up that page.

Figure 14.11
The HyperLink example.

The HTML used to support hyperlinks is, of course, the <a> element; here's the HTML generated for the two hyperlinks you see in Figure 14.11:

<a id="HyperLink1" href="HTMLPage1.htm" target="_blank"
style="Z-INDEX: 102; LEFT: 174px; POSITION: absolute; TOP: 103px">
The Other Page</a>

<a id="HyperLink2" href="http://www.microsoft.com"
style="Z-INDEX: 103; LEFT: 158px; POSITION: absolute; TOP: 157px">
Microsoft's Web Site</a>

You use the System.Web.UI.WebControls.HyperLink class to create hyperlinks in Web applications. Here is the hierarchy of that class:


You can find the significant public properties of the System.Web.UI.WebControls.HyperLink objects in Table 14.6. (This class has no non-inherited methods or events.) Note that as with other Web server controls, this table does not list the significant properties, methods, and events this class inherits from the Control and WebControl classes—you can find them in Tables 12.1 to 12.5.

Table 14.6 Significant Public Properties of HyperLink Objects

Property Means
ImageUrl Returns or sets the URL of an image for use in the hyperlink.
NavigateUrl Returns or sets the URL to navigate to when the hyperlink is clicked.
Target Returns or sets the target window or frame to display the linked-to content in when the hyperlink is clicked.
Text Returns or sets the clickable text displayed in the Web page for the hyperlink.

You create hyperlink controls by dragging them from the toolbox at design time, and, as with any other control, you can also create them in code.

When you create a hyperlink, you need to set the text it displays, as well as the URL it links to. The text in the hyperlink control is specified with the Text property. You can also display an image, which you specify with the ImageUrl property. You set the URL that the link navigates to with the NavigateUrl property.

Tip - If both the Text and ImageUrl properties are set, the ImageUrl property is used. If the image to display is not available, the text in the Text property is displayed instead.

You can set the Text property at design time simply by entering the hyperlink's text into the Text property in the Properties window. When you click the NavigateUrl property's ellipsis (...) button in the Properties window, the Select URL dialog opens, as you see in Figure 14.12. You can select the type of URL you want to specify with the URL Type drop-down list box; the various types are Absolute, Document Relative, or Root Relative. In Figure 14.12, we're setting a hyperlink to a relative URL to the HTML page added to the project, HTMLPage1.htm. To connect to an absolute URL on the Internet, set the URL Type to absolute and type the URL into the URL text box.

Figure 14.12

The Select URL dialog.

There's more to this story—you can also specify how you want to display the new page when its URL is clicked, using the Target property. The target specifies where the linked-to content will be displayed. By default, when you click a hyperlink control, the linked-to content replaces the current page in the browser, and no new browser window is opened. However, you can open a new window if you prefer by setting the Target property to the name of a window or frame or one of these HTML values:

  • _blank—Will display the linked-to content in a new window, without frames.

  • _parent—Will display the linked-to content in the frameset parent of the current window.

  • _self—Will display the linked-to content in the frame with focus.

  • _top—Will display the linked-to content in the top window without frames.

You can also create hyperlinks in code, of course, as you see in the CreateHyperLink example in the code for the book. You can see this example at work in Figure 14.13; when you click the Create HyperLink button, a new HyperLink control is created and added to a panel control.

Figure 14.13

The CreateHyperLink example.

You can create a new hyperlink control as we've created other Web server controls; here, we'll use the Dim statement to create the control in code, customize its properties, and add it to a panel using the panel's Controls collection's Add method:

Dim HyperLink1 As New HyperLink

Private Sub Button1_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles Button1.Click
   HyperLink1.Text = "Microsoft's Web Site" HyperLink1.NavigateUrl = "http://www.microsoft.com"

End Sub

To make sure that the new control reappears each time the page is reloaded, you can add the control to the panel in the Page_Load event handler. First, we create a new Boolean variable, blnHyperLinkVisible, and set it to True after the button has been clicked:

Dim HyperLink1 As New HyperLink

Dim blnHyperLinkVisible As Boolean = False

Private Sub Button1_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles Button1.Click
  HyperLink1.Text = "Microsoft's Web Site"
  HyperLink1.NavigateUrl = "http://www.microsoft.com" Panel1.Controls.Add(HyperLink1)
  blnHyperLinkVisible = True
End Sub

In the Page_Load event handler, all you have to do is to check blnHyperLinkVisible and display the hyperlink if it's True:

Private Sub Page_Load(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles MyBase.Load
  blnHyperLinkVisible = Me.ViewState("blnHyperLinkVisible")
  If blnHyperLinkVisible Then
    HyperLink1.Text = "Microsoft's Web Site"
    HyperLink1.NavigateUrl = "http://www.microsoft.com"
  End If

End Sub

Note that hyperlinks like the ones we've been working with are really just HTML <a> controls made into Web server controls—besides customizing their text, targets, and URLs, you can't do much with them in code. They don't even have a Click event. But link buttons do.

You might also like...



Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“The most exciting phrase to hear in science, the one that heralds new discoveries, is not 'Eureka!' but 'That's funny...'” - Isaac Asimov