Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Scenario:

Say you have a databound control like Gridview, Repeater or ListView that contains a column with link (HyperLink)  to another page. In most of the cases, you might want to pass a value to another page to know which row or item was clicked by the use. E.g. You have a page that displays Customer records in a GridView and you have a link, when clicked takes the user to another page, where you want to display detailed information of the customer record the user selected in the GridView.

There are different ways to do this. You can use any of these depending on your scenario. I would say all these are already documented but I am just putting it together.

Note: I will be taking example of GridView these concepts should work for other databound Controls like Repeater, DataList, Listview, etc. There might need little modifications though based on which control you are using. All different ways shown below might not work will all but atleast on of them should work.  If you find any difficulty post your question on www.asp.net forums and a link to that question as a comment to this post. I will look into it and post back.

1-a: Using HyperLinkField of GridView

Below is the code with GridView bound to a SqlDataSource (SDS). The SDS fetches CustomerID, CompanyName and ContactName from Northwind database. There is a link, Details, clicking on which will take you to another page CustomeDetails.aspx which will display more details about that customer. For that we need at least a CustomerId, which we can pass it via querystring to customer details page. The code below uses HyperLinkField that will display Details link.

<ASP:GRIDVIEW id=GridView1 runat="server" autogeneratecolumns="False" datakeynames="CustomerID" datasourceid="SqlDataSource1">     
    <COLUMNS>     
        <ASP:HYPERLINKFIELD text="Detail" datanavigateurlfields="CustomerID" datanavigateurlformatstring="CustomerDetails.aspx?customerId={0}"></ASP:HYPERLINKFIELD>         
        <ASP:BOUNDFIELD datafield="CustomerID" headertext="CustomerID" readonly="True" sortexpression="CustomerID"></ASP:BOUNDFIELD>         
        <ASP:BOUNDFIELD datafield="CompanyName" headertext="CompanyName" sortexpression="CompanyName"></ASP:BOUNDFIELD>         
        <ASP:BOUNDFIELD datafield="ContactName" headertext="ContactName" sortexpression="ContactName"></ASP:BOUNDFIELD>     
    </COLUMNS> 
</ASP:GRIDVIEW> 
 
<ASP:SQLDATASOURCE id=SqlDataSource1 runat="server" connectionstring="<%$ ConnectionStrings:NORTHWNDConnectionString %>" 
selectcommand="SELECT [CustomerID], [CompanyName], [ContactName] FROM [Customers]"> 
</ASP:SQLDATASOURCE>
 

Points to Note:

a) DataNavigateUrlFields: This corresponds to the field whose value we want to pass it into the querystring. Here it is CustomerID which we want to pass it to querystring.

b) DataNavigateUrlFormatString:This is the format of your url that will be rendered with the link. So in our e.g.CustomerDetails.aspx?customerId={0}, {0} corresponds to the "first field" in DataNavigateUrlFields i.e. CustomerID. When I said - first field -, it means yes we can have more than one fields, and is discussed next.

1-b: Passing more than one Querystring parameter with HyperLinkField in GridView:

Now what if we want to pass more than one parameter to the querystring? We need to change the two fields discussed above. I the code below, I am passing CompanyName as well in the querystring.

<asp:hyperlinkfield text="Detail" datanavigateurlfields="CustomerID,CompanyName" 
 
datanavigateurlformatstring="CustomerDetails.aspx?customerId={0}&amp;companyName={1}" />

Points to Note:

a) The order of fields in DataNavigateUrlFields matters. i.e. {0} refers to CustomerID because it is the first field and {1} means CompanyName here.

2-a: Set NavigateUrl property of HyperLink in TemplateField in Markup

If you want more granular control, you can use HyperLink control inside TemplateField column type instead of HypeLinkField. Then the code for HyperLink will look like below:

<asp:TemplateField> 
                <ItemTemplate> 
                <asp:HyperLink ID="hlDetails1" Text="Details" runat="server" 
                NavigateUrl='<%# "CustomerDetails.aspx?customer=" + Eval("CustomerID") + "&CompanyName=" + Server.UrlEncode(Eval("CompanyName").ToString())%>' /> 
                </ItemTemplate> 
    </asp:TemplateField>

Points to Note:

a)  NavigateUrl: You will be using here the NavigateUrl property of HyperLink control and build it like a string.

b) Eval : Using Eval method to get the field values e.g. Eval("CustomerID"

c) Server.UrlEncode: If you think your field is going to have spaces or special characters then use that. e.g. here the CompanyName can have spaces.

2-b: Set NavigateUrl property of HyperLink by Calling method in code-behind:

In this case, say you don't want to have too much manipulation in your markup or want some dynamic way to get the pagename, here is one another way to set the NavigateUrl property of HyperLink Field. This is the method that should work with almost all DataBound controls i.e. GV,DataList, Repeater, DetailsView, ListView, etc.

<asp:TemplateField> 
    <ItemTemplate> 
        <asp:HyperLink id="hlDetails2" Text="Details" Runat="server" 
        NavigateUrl='<%# GetUrl(Eval("CustomerID"),Eval("CompanyName"))%>' /> 
    </ItemTemplate> 
</asp:TemplateField>

public string GetUrl(object id, object companyname) 
 { 
 //here you can do validation e.g. if companyname is not null or something 
 //Also you can do some customization based on your logged-in user 
 //You can get the Page location dynamically from say web.config
 
 string url = 
"~/CustomerDetails.aspx?customerid=" + id.ToString() + "&companyname=" + 
Server.UrlEncode(companyname.ToString()); 
 
 return url; 
 }

Points to Note:

a) NavigateUrl now calls GetUrl method in the code-behind. Our GetUrl method takes 2 parameters namely customerid and companyname which we want to pass as querystring parameter.

b) GetUrl being in the code-behind, you can use all sort of customization/validation basically anything you want to build your url.

2-c: Set NavigateUrl in RowDataBound event

In this method we will use RowDataBound event of GridView Control. Now if you want to use it with Repeater or ListView or other control, you will be using corresponding event for that control. e.g. For Repeater you will be using ItemDataBound control. Below is the code:

i) Add RowDataBound event to GV. So your markup will change like below(in C#).

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID" 
DataSourceID="SqlDataSource1" onrowdatabound="GridView1_RowDataBound">
...
...
</asp:GridView>

ii) Add this to your code-behind:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
 if (e.Row.RowType == DataControlRowType.DataRow) 
 { 
    HyperLink hl = (HyperLink)e.Row.FindControl("hlDetails2"); 
    if (hl != null) 
    { 
        DataRowView drv = (DataRowView)e.Row.DataItem; 
        string id = drv["CustomerID"].ToString(); 
        string companyname = drv["CompanyName"].ToString(); 
        hl.NavigateUrl = "~/CustomerDetails.aspx?customerid=" + id.ToString() + "&companyname=" + Server.UrlEncode(companyname.ToString()); 
    } 
 } 
}

Points To Note:

a) As I said earlier this concept will work for other databound controls but will need to make sure you use right event and right properties.

Conclusion:

Hope one of these methods will come handy. There might be some errors or some other ways. Let me know if you find any and I will update this post accordingly.

Sorry for the code-formatting. It is giving me hard time. So I have used in half and not in other.

Update: Finally I think the code-formatting now looks better.

Update 9/9/2011: From the comment by wonjartran below let me point out that for using DataRowView, you will need to import System.Data namespace.

i.e.  using System.Data (C#) / Imports System.Data (VB.NET)

Published Thursday, September 23, 2010 1:53 PM by guru_sarkar

Comments

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Thursday, September 8, 2011 5:03 PM by wonjartran

forums.asp.net/.../1

Question on Set NavigateUrl in RowDataBound event.

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Friday, September 9, 2011 1:16 PM by guru_sarkar

Thanks wonjartran,

I updated the post to include that information.

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Wednesday, November 23, 2011 2:25 AM by Bhanu Prakash Inturi

Hi,

This Blog help me very very much thanks for giving such a excellent information for us.

my mail id - bhanu.inturi@gmail.com

can you please provide if any new information regarding othe controls also

thanks

Bhanu Prakash

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Thursday, November 24, 2011 5:11 PM by Joe

i have a problem, i've manage to make the page load to another page that have details of the product

my question,

how do i make the receive page to receive the ID of the product and then show the desired product based on the id...because right now it only showing the first product only...

oh yeah..

im using datalist on sender page

and formview on receiver page

do i need to add code behind in the receiver page? because my datbase connection are only through the sqldatasource and not hardcoded like the dataset and dataadapter

thkn you

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Monday, November 28, 2011 1:14 PM by guru_sarkar

Joe,

If you are using querystring to pass id from parent to details page, you can use the QueryStringField in SqlDataSource Paramter's collection. It's very simple.

Check these references:

msdn.microsoft.com/.../xt50s8kz.aspx

msdn.microsoft.com/.../aa581793.aspx

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Monday, November 28, 2011 1:15 PM by guru_sarkar

Bhanu Prakash,

Can you tell what exactly the information you are looking for? If you provide more details, I can point you in right direction.

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Friday, February 3, 2012 7:04 AM by Chris

Works an absolute treat! Thanks! :)

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Tuesday, February 28, 2012 12:15 AM by Sonali

Thats superb.I was trying for it for the last day.Only your code helped.Thaaaaaanxxxxxxxxxxx

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Thursday, March 1, 2012 2:32 PM by guru_sarkar

@Chris & @Sonali,

You are welcome. Glad it helped.

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Wednesday, March 14, 2012 12:20 AM by Dev

Can you please provide the 'CustomerDetails.aspx' code behind as well? I mean after redirecting it to the customer details page, how do i show the details based on the user input?

There should be one single CustomerDetails.aspx page, and on clicking the hyperlink of a particular customer in the gridview of the previous page, the detail of that particular customer should be displayed in the CustomerDetails.aspx page. What should i code in the CustomerDetails.aspx page in order to achieve this?

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Thursday, March 22, 2012 1:44 AM by Kushal

Thanks! Very good article.

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Monday, March 26, 2012 1:10 PM by guru_sarkar

Dev,

It will depend how you want to fetch the data from the database. Basic step would be:

1)Fetch the id from querystring on the CustomerDetails.aspx and

2)Pass it to your database query/storedproc to fetch the data. It could be either manual or you could use SqlDataSource or other similar ones.

Check the tutorials on www.asp.net (Webforms section)

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Tuesday, September 18, 2012 9:52 AM by anil

Your blog is very help full,

I have one requirement like this

I have a table CUSTOMER in that CUSTID,NAME,URL columns is thier

CUSTID  NAME   URL

1        asp    www.asp.net

2        weblog www.weblogs.asp.net

3        google www.google.com

My question is  I opening perticular url based on CUSTID

I am Passing parameter Like www.Example.com?CUSTID=1 That corressponding URL data(Ex:www.asp.net) It will open directly in browser using asp.net........

plz help me ...........

Thank you,

anil

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Thursday, September 20, 2012 8:56 AM by Mark

Thanks, tihs article help

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Monday, September 24, 2012 1:47 AM by ANILBABU

I have one requirement like this

I have a table CUSTOMER in that CUSTID,NAME,URL columns is thier

CUSTID NAME URL

1 asp www.asp.net

2 weblog www.weblogs.asp.net

3 google www.google.com

My question is I opening perticular url based on CUSTID

I am Passing parameter Like www.Example.com?CUSTID=1 That

corressponding URL data(Ex:www.asp.net) It will open directly in browser

using asp.net........

plz help me ...........

Thank you,

anil

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Tuesday, September 25, 2012 6:27 AM by ANILBABU

I have a requirement like this,

I have a page One url QR code image is their I acn scan that QR code Image then after that, appropriate NextUrl page will be displayed based on tag id.

This URL AND tagid values comes from database.....

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Tuesday, April 9, 2013 8:36 AM by khizerjalal

Thanks, Really Helpful =)

/KhiZer

# re: Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView

Tuesday, January 14, 2014 10:52 AM by Javier Q.

How can I do Paging and sorting gridView in MVC 2,  my information filled in DataTable from Model

Leave a Comment

(required) 
(required) 
(optional)
(required)