GridView HyperLinkField
GridView server control allows us to display data source values in a
table where each column represents a field and each row represents a record of
the data source.
GridView AutoGenerateColumns property accepts 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 a hyperlink. HyperLinkField enables us to bind a second field to the hyperlink's URL. GridView server control displays the HyperLinkField object as a column.
HyperLinkField Text property allows us to display a caption. NavigateUrl property specifies 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 the 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 captions for each hyperlink and set different navigate URLs for each hyperlink in the HyperLinkField object.
HyperLinkField object's DataTextField property allows 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 properties allow us to do this.
We can hide hyperlinks from GridView by setting the HyperLinkField Visible property. The HeaderText property allows us to show a caption in the header section of GridView and the HeaderImageUrl property allows us to display an image in the header section.
The following ASP.NET C# example code demonstrates to us how can we use HyperLinkField in GridView server control.
GridView AutoGenerateColumns property accepts 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 a hyperlink. HyperLinkField enables us to bind a second field to the hyperlink's URL. GridView server control displays the HyperLinkField object as a column.
HyperLinkField Text property allows us to display a caption. NavigateUrl property specifies 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 the 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 captions for each hyperlink and set different navigate URLs for each hyperlink in the HyperLinkField object.
HyperLinkField object's DataTextField property allows 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 properties allow us to do this.
We can hide hyperlinks from GridView by setting the HyperLinkField Visible property. The HeaderText property allows us to show a caption in the header section of GridView and the HeaderImageUrl property allows us to display an image in the header section.
The following ASP.NET C# example code demonstrates to 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>
