HyperLink Control

A HyperLink control looks similar to a LinkButton control with a fundamental difference: the HyperLink control immediately navigates to the target URL without a postback, while the LinkButton control posts the form. If the LinkButton event handler chooses, it will navigate to the target URL. A HyperLink control behaves very similarly to an HTML control.

The HyperLink control has four specific attributes:

ImageUrl

The path to an image (rather than text) to display. If this attribute is used, the control appears to the user as identical to an ImageButton control, though the ImageButton control still posts the form and the HyperLink control only navigates.

NavigateUrl

The target URL to navigate to.

Text

The text string that will be displayed on the browser as the link. If the Text and ImageUrl properties are both set, the ImageUrl takes precedence. The text will be displayed if the image is unavailable.

If the browser supports tool tips and the ToolTip property (inherited from the WebControl class) has not been set, the Text value will display as a tool tip. If the ToolTip property has been set, the ToolTip text string will display as a tool tip.

Target

Defines the target window or frame that will load the linked page. The value is case-insensitive and must begin with a character in the range of a to z, except for the special values shown in Table 4-3, all of which begin with an underscore.

Table 4-3. Special values of the Target attribute

Target value

Description

_blank

Renders the content in a new unnamed window without frames.

_new

Not documented, but behaves the same as _blank.

_parent

Renders the content in the parent window or frameset of the window or frame with the hyperlink. If the child container is a window or top-level frame, it behaves the same as _self.

_self

Renders the content in the current frame or window with focus. This is the default value.

_top

Renders the content in the current full window without frames.

The following example, HyperLinkDemo, demonstrates a HyperLink control. The content file is shown in Example 4-11. Since the HyperLink control does not post back to the server, there is no code-behind file in this example.

Example 4-11. Default.aspx from HyperLinkDemo

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs"
         Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>HyperLink Control</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <h1>HyperLink Control</h1>

       <asp:HyperLink ID="hypLink" runat="server"
                      NavigateUrl="//localhost/websites/TargetPage.aspx"
                      Target="_self"
                      Font-Names="Impact"
                      Font-Size="16"
                      ToolTip="Click here to go to target page.">
          HyperLink to Target Page
       </asp:HyperLink>
    </div>
    </form>
</body>
</html>

When the HyperLinkDemo page is run, it looks like Figure 4-5. For this page to work correctly as written, there must be a page called TargetPage.aspx located in the physical directory that corresponds to the websites virtual directory on your local machine.

HyperLinkDemo

Figure 4-5. HyperLinkDemo

The HyperLink control is rendered on the client browser as an HTML anchor tag (that is, <a>). You can verify this by examining the source code for the web page on your browser.

Get Programming ASP.NET, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.