Making hyperlinks active in gridview of database results

Back to the tutorials list

Introduction

You created a gridview showing records from a database table having a field with entries of the type: www.someplace.com with the free tutorial called "Displaying results from a database", and saved that page as DatabaseResultsPage.aspx.

This tutorial will show you how to make those fields clickable hyperlinks.

Making the hyperlinks work

With VWD, open your test website (it was named MyTutorialsWebsite), and then open the page called "DatabaseResultsPage.aspx". That page should display the database results you previously generated in a gridview, and the records include some inoperable hyperlinks.

1. Click on the gridview, and then on the expander arrow in the upper right corner of the GridView and choose Add New Column.

2. Choose a Field of Type: Hyperlink field from the drop down menu.

3. For Header Text, enter a sensible name for the column, for example "WebsiteLink".

4. For the hyperlink text, choose the "Get text from data field" and select the "website" field from the drop down list. Leave the Text format string box blank.

5. For the Hyperlink URL, check the box "Get URL from data field" and choose the field "website" from the drop-down list

6. For the URL format string, type: http://{0} Note: this causes the data from the website field to replace the placeholder {0}.

7. Click OK, Save, preview in browser, and you should find the Links column contains working hyperlinks.

The only problem is that you also still have the Website column (complete with non-functional web addresses) showing. To remove this column from the GridView, highlight it in GridView, click the expander arrow, and choose remove column.

Save your work and you are done. All the hyperlinks should now be active, and clicking them will take you to their associated website.