How to use HyperLinkField in GridView

GridView HyperLinkField
GridView server control allow us to display a data source values in a table where each column represents a field and each row represents a record of data source.

gridview AutoGenerateColumns property accept a Boolean value. if we set this property value to True then gridview creates an AutoGenerateField object for each field in the data source. if we set this property value to False then we need to specify manually which column fields appear in gridview. we also need to specify the column filed types such as BoundField, ButtonField, CheckBoxField, HyperLinkField etc.

HyperLinkField displays a field value in a data source as hyperlink. HyperLinkField enables us to bind a second field to the hyperlink's URL. gridview server control display HyperLinkField object as a column.

HyperLinkField Text property allow us to display a caption. NavigateUrl property specify the URL to navigate to when a hyperlink is clicked. Target property set the target window or frame in which to display the linked content.

HyperLinkField Text and NavigateUrl property share the same caption and navigation url for all hyperlinks in a gridview. Target property value also applies same target to all hyperlinks in a gridview.

Alternatively asp.net developers can bind the HyperLinkField object to fields in a data source. this way we can display different caption for each hyperlink and set different navigate url for each hyperlink in the HyperLinkField object.

HyperLinkField object's DataTextField property allow us to bind a field to a caption. DataNavigateUrlFields property set a comma separated list of fields to use to create the navigation url.

asp.net developers can specify a custom format for the hyperlinks captions and navigate URLs in the gridview. DataTextFormatString and DataNavigateUrlFormatString property allow us to do this.

we can hide hyperlinks from gridview by setting the HyperLinkField Visible property. HeaderText property allow us to show a caption in header section of gridview and HeaderImageUrl property allow us to display an image in header section.

the follwoing asp.net c# example code demonstrate us how can we use HyperLinkField in gridview server control.
GridViewHyperLinkFieldExample.aspx

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>asp.net asp:HyperLinkField example: how to use HyperLinkField in GridView</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:Red">GridView HyperLinkField Example</h2>
        <asp:Label ID="Label1" runat="server" Font-Italic="true" ForeColor="Red"></asp:Label>
        <asp:SqlDataSource 
            ID="SqlDataSource1"
            runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT CategoryID, CategoryName, Description FROM Categories"
            >
        </asp:SqlDataSource>
        <asp:GridView 
            ID="GridView1"
            runat="server"
            DataSourceID="SqlDataSource1"
            AllowPaging="true"
            ForeColor="AliceBlue"
            BackColor="DodgerBlue"
            BorderColor="LightSkyBlue"
            AutoGenerateColumns="false"
            HeaderStyle-BackColor="DarkBlue"
            >
            <Columns>
                <asp:BoundField HeaderText="Category ID" DataField="CategoryID" />
                <asp:HyperLinkField 
                    HeaderText="Category Name"
                    DataNavigateUrlFields="CategoryID"
                    DataNavigateUrlFormatString="~/CategoryDetails.aspx?CategoryID={0}"
                    DataTextField="CategoryName"
                    />
                <asp:BoundField HeaderText="Description" DataField="Description" />
            </Columns>
        </asp:GridView>        
    </div>
    </form>
</body>
</html>
CategoryDetails.aspx

<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Category Details Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:Red">Category Details</h2>
        <asp:SqlDataSource 
            ID="SqlDataSource1"
            runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT ProductID, ProductName, UnitPrice FROM Products WHERE CategoryID=@CategoryID"
            >
            <SelectParameters>
                <asp:QueryStringParameter
                     Name="CategoryID"
                     QueryStringField="CategoryID" 
                     />
            </SelectParameters>
        </asp:SqlDataSource>
        <asp:DetailsView 
            ID="DetailsView1"
            runat="server"
            DataSourceID="SqlDataSource1"
            AllowPaging="true"
            ForeColor="AliceBlue"
            BackColor="DodgerBlue"
            BorderColor="LightSkyBlue"
            >
        </asp:DetailsView>        
    </div>
    </form>
</body>
</html>


More asp.net examples