In this article I will explain how to make populate and bind NavigateUrl property of HyperLink inside ASP.Net GridView ItemTemplate of TemplateField.
More Articles on GridView and HyperLink
HTML Markup
The below HTML Markup consists of an ASP.Net GridView with 4 columns. The first and fourth column have HyperLinks inside the ItemTemplate of TemplateField.
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
RowStyle-BackColor="#A1DCF2" AlternatingRowStyle-BackColor="White" AlternatingRowStyle-ForeColor="#000"
runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText = "Id" ItemStyle-Width="30">
<ItemTemplate>
<asp:HyperLink runat="server" NavigateUrl='<%# Eval("Id", "~/Details.aspx?Id={0}") %>'
Text='<%# Eval("Id") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink runat="server" NavigateUrl='<%# string.Format("~/Details.aspx?Id={0}&Name={1}&Country={2}",
HttpUtility.UrlEncode(Eval("Id").ToString()), HttpUtility.UrlEncode(Eval("Name").ToString()), HttpUtility.UrlEncode(Eval("Country").ToString())) %>'
Text="View Details" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
NavigateUrl with Single QueryString Parameter
NavigateUrl='<%# Eval("Id", "~/Details.aspx?Id={0}") %>'
The first column HyperLink passes only one QueryString Parameter and hence the same has been set using the Eval function.
NavigateUrl with Multiple QueryString Parameters
NavigateUrl='<%# string.Format("~/Details.aspx?Id={0}&Name={1}&Country={2}",
HttpUtility.UrlEncode(Eval("Id").ToString()), HttpUtility.UrlEncode(Eval("Name").ToString()), HttpUtility.UrlEncode(Eval("Country").ToString())) %>'
Here we need to pass three QueryString parameters, thus we need to concatenate the Eval functions of the three fields using String Format function.
Binding the GridView
I have made use of DataTable with some dummy values for this article.
Namespaces
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
Accessing and displaying the QueryString Values on destination page
On the destination page I am extracting the QueryString values from the URL and displaying them on page.
HTML Markup
<table>
<tr>
<td>
<b>Id</b>
</td>
<td>
<asp:Label ID="lblId" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<b>Name</b>
</td>
<td>
<asp:Label ID="lblName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<b>Country</b>
</td>
<td>
<asp:Label ID="lblCountry" runat="server"></asp:Label>
</td>
</tr>
</table>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
lblId.Text = HttpUtility.UrlDecode(Request.QueryString["Id"]);
lblName.Text = HttpUtility.UrlDecode(Request.QueryString["Name"]);
lblCountry.Text = HttpUtility.UrlDecode(Request.QueryString["Country"]);
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})
dt.Rows.Add(1, "John Hammond", "United States")
dt.Rows.Add(2, "Mudassar Khan", "India")
dt.Rows.Add(3, "Suzanne Mathews", "France")
dt.Rows.Add(4, "Robert Schidner", "Russia")
GridView1.DataSource = dt
GridView1.DataBind()
End If
End Sub
Demo
Downloads