Click here to Skip to main content
11,932,461 members (57,612 online)
Click here to Skip to main content
Add your own
alternative version


24 bookmarked

Hyperlinked Image in ASP.NET GridView

, 13 Jul 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
3 different techniques of adding hyperlinked image to GridView control in data-centric RIA
This is an old version of the currently published tip/trick.
Typical scenario in data-centric RIA development is to insert into GridView control a web image corresponding to some "Image_URL" value stored in the data field of underlying database, which is "hyperlinked" to another "Target_URL" also stored in the database. Image OnClick event should open the target web page. In most general case the image could be missing, thus the alternative text should serve as a hyperlinked text. Three different solutions pertinent to ASP.NET GridView control are described below.

1. TemplateField with pair of Hyperlink field and img element

Listing 1

        <asp:HyperLink runat="server" NavigateUrl='<%# Eval("Wiki_URL") %>' Target="_blank">
            <img src="<%# Eval("Image_URL") %>" alt="Read online" />

2. TemplateField with ImageButton

This technique though it provides the minimum coding and fairly robust results is not recommended as it uses PostBack and thus requires the server "round-trip", dramatically degrading the responsiveness of RIA and negatively impacting the overall user experience (it's brought here mostly for didactic purpose):

Listing 2

  <asp:ImageButton runat="server" ImageUrl='<%# Eval("Image_URL") %>' PostBackUrl='<%# Eval("Target_URL") %>' AlternateText="Read online" />

3. TemplateField with ImageButton and javascript onClick

This method requires some additional Javascript coding, but provides maximum flexibility in terms of formatting the target window to be opened on image click event:

Listing 3

 <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("Image_URL") %>' 
                        OnClientClick='<%# String.Format("javascript:return openTargetURL(\"{0}\")", Eval("Target_URL")) %>'  AlternateText="Read online" />
Javascript snippet to be added to head section
This sample Javascript code snippet allows opening target web page in new browser window with customized appearance set programmatically:
<script type="text/javascript">
    function openTargetURL(url) 
    {, "newWindow", "resizable=1,menubar=0,toolbar=0,scrollbars=1"); }


ASP.NET GridView Hyperlinked image technique as described above has been used in Online Music Library: click on the sample snapshot shown below to see the working demo:

Music Library implemented as nested GridView controls

Design Notes: Server side Image rendering

Be aware that pertinent to Listing 1, the image is rendered as "img" element, while in two other cases it is rendered as "input type="image" element. Corresponding sample CSS3 code snippet in Listing 4 shows the best practices addressing these differences:

Listing 4

<style type="text/css">
    /* image rendered as img element within table */
    img { width:200px; }
    /* image rendered as <input> element within table */
    input[type="image"] {width:200px; }

Image decoration via HTML5/CSS3

Various aesthetic enhancement techniques, namely single and double borders, borders with inset shadows and color gradients could be applied to the image as described in [1].


1. Add Image Borders using HTML5/CSS3[^]

Note to editors/readers: as FYI, the system incorrectly renders the html tags pertinent to ASP.NET section; it seems to cut off the closing tags, thus the resulting HTML code snippet looks kinda weird


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

President Infosoft International Inc
United States United States
Dr. A. Bell has 20+ years of Software and Electrical Engineering experience: Win/Web veteran, published 300+ articles and authored 37 inventions, credited for 10+ Enterprise level projects (>250k code lines); currently focused on .NET/WPF/C#, Javascript/jQuery, 'Big Data', AI, IoT and Mobile apps. Participated in App Innovation Contest (AIC 2102/2013) with several winning submissions. Sample projects/pubs follow:
  1. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
  2. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  3. Engineering Calculator VOLTA-2013 (contest winner)
  4. Online 3 Fractions Calculator (#1 on Goog)
  5. Engineering Calculator VOLTA-814 for Windows
  6. Real-time NY Bus monitoring app
  7. Inflation Calculator
  8. PaydayNY-2015 Payroll Tax Calculator (Win)
  9. Multilingual Geocoder with Interactive Map
  10. Semantic Analyzer (Concordance Calculator)
  11. Prime Factoring Calculator

You may also be interested in...

Comments and Discussions

Discussions posted for the Published version of this article. Posting a message here will take you to the publicly available article in order to continue your conversation in public.
GeneralMy vote of 3 Pin
ChenShaoHsi12-Feb-15 3:22
memberChenShaoHsi12-Feb-15 3:22 
QuestionNice Article Pin
khaliqhamid20-May-14 1:56
memberkhaliqhamid20-May-14 1:56 
AnswerRe: Nice Article Pin
DrABELL21-May-14 4:09
professionalDrABELL21-May-14 4:09 
GeneralReason for my vote of 3 sdfghjkl Pin
Jailendra Singh27-Nov-11 20:07
memberJailendra Singh27-Nov-11 20:07 
GeneralRe: Sorry, but I did not understand your message. Pin
DrABELL14-Dec-11 2:43
memberDrABELL14-Dec-11 2:43 
GeneralReason for my vote of 5 great! Pin
Marcio_Coelho27-Sep-11 11:57
memberMarcio_Coelho27-Sep-11 11:57 
GeneralRe: Thanks! Pin
DrABELL27-Sep-11 12:40
memberDrABELL27-Sep-11 12:40 
GeneralReason for my vote of 4 Good Article Pin
mandar13054-Aug-11 23:45
membermandar13054-Aug-11 23:45 
GeneralReason for my vote of 5 nice Pin
Monjurul Habib27-Jul-11 23:17
memberMonjurul Habib27-Jul-11 23:17 
GeneralRe: Thanks! Pin
DrABELL28-Jul-11 4:07
memberDrABELL28-Jul-11 4:07 
GeneralReason for my vote of 5 Good one Alex. Pin
thatraja14-Jul-11 8:20
mvpthatraja14-Jul-11 8:20 
GeneralRe: Many thanks! Pin
DrABELL14-Jul-11 9:58
memberDrABELL14-Jul-11 9:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.151126.1 | Last Updated 13 Jul 2011
Article Copyright 2011 by DrABELL
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid