Pass querystring parameter with NavigaterUrl in HyperLink inside a GridView


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 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">     
        <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>     
<ASP:SQLDATASOURCE id=SqlDataSource1 runat="server" connectionstring="<%$ ConnectionStrings:NORTHWNDConnectionString %>" 
selectcommand="SELECT [CustomerID], [CompanyName], [ContactName] FROM [Customers]"> 

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:HyperLink ID="hlDetails1" Text="Details" runat="server" 
                NavigateUrl='<%# "CustomerDetails.aspx?customer=" + Eval("CustomerID") + "&CompanyName=" + Server.UrlEncode(Eval("CompanyName").ToString())%>' /> 

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:HyperLink id="hlDetails2" Text="Details" Runat="server" 
        NavigateUrl='<%# GetUrl(Eval("CustomerID"),Eval("CompanyName"))%>' /> 

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=" + 
 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">

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.


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)



    Question on Set NavigateUrl in RowDataBound event.

  • Thanks wonjartran,
    I updated the post to include that information.

  • 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

  • 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:

  • 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.

  • Works an absolute treat! Thanks! :)

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

  • @Chris & @Sonali,

    You are welcome. Glad it helped.

  • 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?

  • Thanks! Very good article.

  • 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 (Webforms section)

  • 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
    1 asp
    2 weblog
    3 google

    My question is I opening perticular url based on CUSTID

    I am Passing parameter Like That corressponding URL data( It will open directly in browser using
    plz help me ...........
    Thank you,

  • Thanks, tihs article help

  • I have one requirement like this
    I have a table CUSTOMER in that CUSTID,NAME,URL columns is thier
    1 asp
    2 weblog
    3 google

    My question is I opening perticular url based on CUSTID

    I am Passing parameter Like That

    corressponding URL data( It will open directly in browser

    plz help me ...........
    Thank you,

  • 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.....

  • Thanks, Really Helpful =)


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

Comments have been disabled for this content.