Home Page
"Join my free Amazing ASP.NET newsletter"
It's safe and easy to signup. You get:
  • Notified anytime a new article comes out
  • Technical step-by-step tutorials on all important ASP.NET topics
  • Expert guidance so you can reach unlimited ASP.NET success
  • Important ASP.NET news updates
Enter your Email

Click here to download the source code for this lesson.  When you open the project files, set Customer_List.aspx as the Start Page.

In this lesson, I am going to demonstrate how to use the ASP.NET GridView to display data from the database and create a dynamic hyperlink in each row of the grid.  When the user clicks on a hyperlink in one of the rows, the application will go to another web page and pass some information over.

In my example GridView, I am showing a list of customers and I want the user to be able to edit the information about each customer.  Each row of my GridView contains the first name and last name of a customer.  I would like to add another column to the GridView that is a hyperlink and displays the text “Edit”.  Then when the user clicks on Edit, the application should take them to another web form where they can edit the customer’s information.  In this scenario I have two web forms:

Customer_List.aspx - Displays the list of customers from the database.  Contains a hyperlink that when clicked will go to the web form Customer_Edit.aspx.

Customer_Edit.aspx - Allows the user to edit information about a specific customer.

So how can this be accomplished?  We first there has to be a mechanism to transfer the user from the first page to the second page.  That can be done by using a HyperLinkField column in the GridView on the Customer_List.aspx web form.  A HyperLinkField column in a GridView is basically a web hyperlink, just like you see on any Internet web pages.  In HTML terms it produces an anchor tag.  We also need a way to pass information to the edit web form so that it knows what customer’s information can be edited.  This can be accomplished by using a QueryString.  A QueryString is basically variables that can be passed from one web page to another in the URL.  In order to pass information to the Customer_Edit.aspx page I can use a QueryString like this:


Notice the ? question mark and following that the name of my variable “customerid” with a value of 4.  The Customer_Edit.aspx can read the QueryString and determine that it needs to display information about the customer who’s customerid value is 4.

Now let’s take a look at what is involved to actually do this with the GridView.  If you have a GridView on your web form, put your cursor over it and click on the little arrow button that appears next to the GridView.  This will bring up the Tasks window.  In the Tasks window, click Edit Columns and the fields window will appear.  When that comes up, click on HyperLinkField and then Add.  Click on the newly added HyperLinkField in the Selected fields list.  Set the Text property to “Edit”.  Set the DataNavigateUrlFields property to “customer_id”.  Finally set the DataNavigateUrlFormatString to “Customer_Edit.aspx?customerid={0}”.  Now let me explain what these properties mean.

Both of these properties help to create a dynamic hyperlink in the GridView.  The DataNavigateUrlFields property specifies which field values from the database you are going to use in the dynamic hyperlink.  You can specify multiple fields, separated by comma.  In my example, there is only one: customer_id.

The DataNavigateUrlFormatString property specifies the dynamic URL of the hyperlink.  It is dynamic because you can reference fields from the database.  Fields are dynamically referenced by using the curly braces { }.  Inside the curly braces you have to put the field number that corresponds to the DataNavigateUrlFields property.  When you only have one field, like in my situation, the only number that is available is {0}.  If I had a second field in the DataNavigateUrlFields property (e.g. customer_id, last_name), then I could reference it by using {1} which would get the last_name.  For a third it would be {2} and so on.  Notice that just like in the C# language, indexes begin with 0 (i.e. they are zero-based).

Now that I setup these properties, when I run the application, the GridView will create a hyperlink with the URL “Customer_Edit.aspx?customerid=” for every row.  Each hyperlink will have a value of the customerid variable that corresponds to that row.

Click here to watch an example video where I setup the dynamic data bound HyperLinkField in a GridView .

"Want the secret resource that beginning web programmers don't normally have access to? Want to start practicing with ASP.NET quickly and easily?"

Jump start your ASP.NET learning in a matter of minutes
Practice hands on with fully functional sample ASP.NET web sites
Master the most common ASP.NET programming techniques
Have tons of fun learning interactively
Improve at your own pace from the comfort of your computer

Click below to get started within minutes...
You too can MASTER ASP.NET Web Development Techniques


  1. good explanation, but how to retrieve the customerid at the target
    .aspx file?

    Comment by sonu — March 3, 2009 @ 3:07 am

  2. To retrieve the customerid in Customer_Edit.aspx check out the following blog post (which is next in Mid-level ASP.NET):


    Comment by ted — March 3, 2009 @ 8:16 am

  3. A clear explaination of the DataNavigationUrlFields and DataNavigateUrlFormatString properties.

    Comment by Nadine — March 13, 2009 @ 7:01 am

  4. Hi,

    Very nice explanation. Thanks so much. I have one question. By clicking on the link, a user can easily see the customerid or any other data that the hyperlink is passing to another page. I am looking for a way to not to show the values that we pass in the querystring by using the same hyperlink field. Is it possible?

    Comment by svnml — June 1, 2009 @ 1:36 am

  5. hi,

    is it possible to have one of the placeholders in datanavigationurlfields to be a viewstate or session variable.

    i know it can be done in rowdatabound event, but just wondering if can be done in aspx page?


    Comment by pradeep — August 3, 2009 @ 7:48 pm

  6. good explanation. one question though. How can I jump/hyperlink to different pages based on values in the gridview. for example, if I have column x with different values, I want to use a hyperlink jump to different details pages based on value of column x. How can I do this?

    Comment by egess — January 1, 2010 @ 11:12 am

  7. egess,

    If you want to make the page name dynamic do it like this:
    set DataNavigateUrlFormatString = “{0}.aspx”
    set DataNavigateUrlFields = “database_column_containing_page_name”

    Comment by ted — January 3, 2010 @ 8:38 pm

RSS feed for comments on this post.

Leave a comment