The <asp:HyperLinkField> control appears in a GridView as linking text for each record displayed. Clicking the link directs to a Web page. A HyperLinkField is coded inside the <Columns> section along with other bound field controls. Properties associated with this control are shown in Figure 7-16.

When the NavigateUrl property is supplied, all records share the same URL. The associated Text property sets the displayed text that serves as the clickable link. The Target property specifies the window or frame in which to open the linked page. Its values can be "_blank" to open the page in a new browser window, "_self" to open the page in the current window, "_top" to open the page in the current full browser window, "_parent" to open the page in the next higher level window of a frameset, or the name of a frame in the current window.

Rather than using the same link for all records, you can bind the link to fields in the GridView's data source to link to different pages. The caption for the link is set by the DataTextField property, supplying its format through the DataTextFormatString property. The URL is given by the DataNavigateUrlFields property, with formatting supplied by the DataNavigateUrlFormatString property. As in the case with the ImageField control, the {0} format string serves as a placeholder for inserting values inside a text string coded as the DataTextFormatString and inside a URL coded as the DataNavigateUrlFormatString.

A GridView table that displays links for records from the eCommerce.mdb database is shown below. In this case a link is made to an image file which displays in an <iframe> coded on the page.

<asp:AccessDataSource id="Products" Runat="Server"
  DataFile="../Databases/eCommerce.mdb"
  SelectCommand="SELECT ItemNumber, ItemName FROM Products WHERE ItemType='Graphics'"/>
	
<asp:GridView id="ProductsGrid" DataSourceID="Products" Runat="Server"
  Style="float:left"
  AutoGenerateColumns="False"
  CellPadding="3"
    HeaderStyle-BackColor="#707070"
    HeaderStyle-ForeColor="#FFFFFF">

  <Columns>
	
  <asp:BoundField
    DataField="ItemNumber"
    HeaderText="Number"/>
	
  <asp:BoundField
    DataField="ItemName"
    HeaderText="Name"/>

  <asp:HyperLinkField
    HeaderText="Photo"
    DataTextField="ItemNumber"
    DataTextFormatString="Picture of {0}"
    DataNavigateUrlFields="ItemNumber"
    DataNavigateUrlFormatString="../Pictures/{0}.jpg"
    Target="PictureFrame"
    ItemStyle-Font-Size="10pt"/>
	
  </Columns>

</asp:GridView>

<iframe name="PictureFrame" style="width:130px; height:160px"></iframe>

The ItemNumber from the associated record is inserted into the DataTextFormatString to produce a text link. In a similar manner, the ItemNumber is inserted into the DataNavigateUrlFormatString to produce a URL for the picture relative to the current page.

The target for the link is an <iframe> tag named PictureFrame appearing along side the GridView table. This positioning requires the GridView to be floated to the left margin of the page by adding a CSS style setting to the GridView: Style="float:left". A Target property is added to the HyperLinkField specifying the frame name as the target for the URL. Notice that the <iframe> tag does not require an id or a Runat="Server" attribute in order to be accessible by the HyperLinkField.