Making email addresses in a gridview clickable

Back to the tutorials list

Introduction

You created a gridview showing records from a database table having a field with entries of the type: name@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 email fields clickable hyperlinks.

Making the email links 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 email links.

1. The first step is to add a Hyperlink column to the GridView. To do this, In Design View, click on the little expander arrow on the upper right of the GridView and choose Add New Column. In the Choose a Field Type box select a Hyperlink field. For Header Text Type in a suitable name for the column we are adding to the GridView, for example "EmailLinks".

2. For the hyperlink text you have two choices: You can select Hyperlink Text and then type something like "Send this person an Email" in which case that text will show in every record. Or you can select Get Text from Data field, and choose the "email" field. This will cause each persons email address to show in their record.

3. For the Hyperlink URL, select "Get URL from data field", and select the "email" field, and for the URL format string field, type mailto:{0} (the {0} is a placeholder into which the contents of the email field get placed when the link is clicked). Click OK. Your GridView should now have a column named EmailLinks and entries like underlined "abc".

4. Highlight the EmailLinks column, click on Edit Columns. In the lower right window, highlight the EmailLinks column and then click the "Convert this field into a template field" link. Then click ok.

Save, Preview in Browser, and test the email links.

Note that your GridView still shows the original database Email column having the non-clickable addresses in it, in addition to the new EmailLinks column with the clickable addresses. Remove the Email column from the GridView by clicking the expander arrow at the upper right of the GridView, select Edit Colunns, then in the lower left of the window select the Email field and click the red X to remove that field.