Different ways of using Hyperlink control in data controls Samples and examples

Introduction:

In this article I am going to explain the different ways of using hyperlink control in asp.net data controls.

What is a Hyperlink control?

A hyperlink control is an server control which is used to navigate the client from one page to another page.Here is a simple example for hyperlink control :


<asp:HyperLink ID="HyperLink1" runat="server" Text="test"></asp:HyperLink >

How to Implementation HyperLink control in ASP.Net Data Controls?

In asp.net data controls like datagrid and gridview we have hyperlink column and hyperlink field.
Here I am going to explain the use of hyperlink field first and then hyperlink column.

Use HyperLink Field :

Here we have a GridView containing HyperLinkField as shown below where DataNavigateUrlFields and DataNavigateUrlFormatString are used to get fields from datasource and create the url for navigation to the respective page. In the DataGrid hyperlink column we have the same fields and you can follow the same procedure.


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
    <asp:HyperLinkField HeaderText="Category"  DataTextField="CategoryName" DataNavigateUrlFields="CategoryID"       DataNavigateUrlFormatString="~/page.aspx?id={0}"/>
</Columns>
</asp:GridView>

In code behind page(.aspx.cs):


protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        BindGrid();
    }
}
public void BindGrid()
{
    SqlConnection conn = new SqlConnection("Data Source='localhost';Initial Catalog='Northwind';Integrated Security=SSPI;Persist Security Info=False ");
    SqlDataAdapter da = new SqlDataAdapter("", conn);
    da.SelectCommand = new SqlCommand("select CategoryName,CategoryID from Categories", conn);
    DataSet ds = new DataSet();
    da.Fill(ds, "data");
    GridView1.DataSource = ds.Tables[0].DefaultView;
    GridView1.DataBind();
}

Using Mutliple data items :

If you want to send mutliple items to the target page, then you have to do like below :


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
    <asp:HyperLinkField HeaderText="Category"  DataTextField="CategoryName" DataNavigateUrlFields="CategoryID,CategoryName"   DataNavigateUrlFormatString="~/page.aspx?id={0}&name={1}" />
</Columns>
</asp:GridView>

In Runtime :

You can also set the hyperlinkfield in code behind at runtime. To do so, follow below code :

In Design View(.aspx) :


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"  OnRowDataBound="gdview_RowDataBound">
<Columns>
    <asp:HyperLinkField HeaderText="Category"  DataTextField="CategoryName"  runat="server"/>
</Columns>
</asp:GridView>

In code behind(.aspx.cs):


protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    HyperLinkField hlf = (HyperLinkField)GridView1.Columns[0];
    string[] items = new string[2];
    items[0] = "CategoryID";
    items[1] = "CategoryName";
    hlf.DataNavigateUrlFields = items;
    hlf.DataNavigateUrlFormatString ="~/page.aspx?id={0}&name={1}";
}

Using HyperLink Column :

To create a hyperlink column, use the element:


    <asp:HyperLinkColumn 
        HeaderText="Category"
        DataTextField="CategoryName" 
        DataNavigateUrlFormatString="~/page.aspx?id={0}"
        DataNavigateUrlField="CategoryID">
   </asp:HyperLinkColumn>

The HeaderText attribute specifies the column header text. The DataTextField attribute specifies the field of the data source bound to this DataGrid control whose value will be displayed in this column. The DataNavigateUrlFormatString attribute indicates the URL pointed to by this column. The "{0}" will be substituted with the value indicated by the data field specified in the DataNavigateUrlField attribute.

Using Hyperlink Control :

In the case of repeater and datalist we don’t have hyperlink column.In that case we have to use hyperlink control in item template.

For Ex :

In Design page(.aspx):


<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
    <table>
    <tr>
        <td>
            <asp:HyperLink ID="HyperLink1" runat="server" Text='<%#Eval("CategoryName")%>' NavigateUrl='<%#"page.aspx?id=" + DataBinder.Eval(Container.DataItem,"CategoryID") + "&name=" + DataBinder.Eval(Container.DataItem,"CategoryName")%>'  ></asp:HyperLink>
        </td>
    </tr>
    </table>
</ItemTemplate>
</asp:Repeater>

In code behind(.aspx.cs):


protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        BindRep();
    }
}
public void BindRep()
{
    SqlConnection conn = new SqlConnection("Data Source='localhost';Initial Catalog='Northwind';Integrated Security=SSPI;Persist Security Info=False ");
    SqlDataAdapter da = new SqlDataAdapter("", conn);
    da.SelectCommand = new SqlCommand("select CategoryName,CategoryID from Categories", conn);
    DataSet ds = new DataSet();
    da.Fill(ds, "data");
    Repeater1.DataSource = ds.Tables[0].DefaultView;
    Repeater1.DataBind();
}

Here in the above example we passed multiple data items to the targeted page. In the same way you can use hyperlink control in datalist control.

Suppose you want to bind the data to the hyperlink control in runtime. Then follow below code :

In Design Page(.aspx):


<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="rp1_ItemDataBound">
<ItemTemplate>
    <table>
    <tr>
        <td>
            <asp:HyperLink ID="HyperLink1" runat="server" Text='< %#Eval("CategoryName")%>'>
        </td>
    </tr>
    </table>
</ItemTemplate>
</asp:Repeater>

In Code Behind(.aspx.cs):


protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    HyperLink hl = (HyperLink)e.Item.FindControl("HyperLink1");
    hl.NavigateUrl = "page.aspx?id=" + DataBinder.Eval(e.Item.DataItem, "CategoryID") + "&name=" + DataBinder.Eval(e.Item.DataItem, "CategoryName");
}

Hope it helps you.

Thank You.

Different ways of using Hyperlink control in data controls