Display Email Link In GridView (mailto:)

Objective: This article describes how to do display clickable email links (mailto:) in a ASP.NET GridView.

Background: Often in our projects, it is a requirement to display clickable email links in a GridView perhapse along other information. Because of the initial and seemingly convoluted nature of ASP.NET, even a simple task as such can seem daunting. Well, fear not because this is really simple to do.

Procedure: Follow instructions below to accomplish this task. This article uses Visual Web Developer Express 2008, SQL Server Express 2005.

1. Create a new web form in your site and name it anything.
2. Drag and drop a GridView onto the page.
3. Configure your DataSource. Select a table that displays email addresses.
4. Once you have configured your GridView and DataSource, click on the GridView’s smart tag and select “edit columns”.
5. In the selected fields window click to highlight the field that contains the email addresses.
6. On the right side, click on the “convert this field into a TemplateField link.
7. Click OK to close this window and go into source view look at GridView’s ItemTemplate. It should look something like this:

   <ItemTemplate>
       <asp:Label ID="Label1" runat="server" Text='<%# Bind("Email") %>'></asp:Label>
   </ItemTemplate>

8. Now let’s modify this code to create clickable mailto: email addresses. To do this, replace the above code with the one below.

   <ItemTemplate>
       <a href="Mailto:<%# Eval("email") %>"><%#Eval("email")%></a>
   </ItemTemplate>

   This will result looking something like the image below:

   

9. If you don’t want to show the actual email addresses as the link maybe to have all the links a uniform look and size, you can do something like the following.

   <ItemTemplate>
       <a href="Mailto:<%# Eval("email") %>">Click To Email</a>
   </ItemTemplate>

   This will result in something like the image below.

   

10. That’s it! Enjoy.