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:

Customer_Edit.aspx?customerid=4

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 .