HyperLink Control

A HyperLink control behaves very similarly to an HTML <a> element control, except that you can program it using server code. Indeed, the control is rendered on the client browser as an HTML anchor element (i.e., <a>) with the control’s properties reflected in the element’s attributes.

The HyperLink control has four control-specific properties:

ImageUrl

Sets the path to an image to be displayed by the control rather than text set in the Text property.

NavigateUrl

The target URL to navigate to once the user clicks on the hyperlink.

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 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—z, except for the special values shown in Table 4-6, all of which begin with an underscore. Note that these are the standard HTML values for the target attribute of an <a> element.

Table 4-6. 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.

To demonstrate a HyperLink control, add a new web form called HyperLinkDemo.aspx to the C4_BasicControls website. On the page are a HyperLink control and a DropDownList. The value selected in the list will determine the value of the HyperLink control’s Target property, which you can then verify by clicking the link. The content file is shown in Example 4-14.

Example 4-14. HyperLinkDemo.aspx

<%@ Page Language="C#" AutoEventWireup="true"
   CodeFile="HyperLinkDemo.aspx.cs" Inherits="HyperLinkDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>HyperLink Demo</title>
</head>

<body>
   <form id="form1" runat="server">
   <div>
      <asp:HyperLink ID="hypLink" runat="server"
         NavigateUrl="http://www.microsoft.com"
         ToolTip="Visit Microsoft" Font-Names="Verdana">
         Show Microsoft.com
      </asp:HyperLink> &nbsp;in&nbsp;
      <asp:DropDownList ID="ddl Target" runat="server" AutoPostBack="true">
         <asp:ListItem Text="A New Window" Value="_blank" Selected="True" />
         <asp:ListItem Text="This Window" Value="_self" />
      </asp:DropDownList>
   </div>
   </form>
</body>
</html>

To keep it simple, the HyperLink control’s Target property is set when the page loads (as highlighted in Example 4-15) and the DropDownList’s AutoPostBack property is set to true so that the Target property is reset whenever the value selected in the list changes.

Example 4-15. HyperLinkDemo.aspx.cs in full

using System;

public partial class HyperLinkDemo : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {
      hypLink.Target = ddlTarget.SelectedValue;
   }
}

When the HyperLinkDemo page is run, it looks like Figure 4-8.

Switch between the two values in the DropDownList and verify that the hyperlink does or does not open a new window when clicked. You can also see how the <a> element’s Target attribute changes by examining the generated markup for the web page on your browser.

HyperLinkDemo.aspx in action

Figure 4-8. HyperLinkDemo.aspx in action

Tip

A HyperLink control may look similar to a LinkButton control, but they are fundamentally different. Once clicked, a HyperLink control immediately navigates to the target URL without a postback. A LinkButton control, meanwhile, will post back the form to the server once clicked and will navigate to a URL only if its Click event handler is written to do that. It could just as easily display some text on the screen or refresh some data displayed on the page.

Get Programming ASP.NET 3.5, 4th 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.

Start your free trial