Click here to Skip to main content
Click here to Skip to main content

Hyperlinked Images in ASP.NET GridView

, 7 May 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
3 different techniques of adding hyperlinked image to ASP.NET GridView in data-centric RIA

Problem to solve

Common development task is to place inside GridView the image corresponding to some "Image_URL" typically 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. If image is missing then the alternative text should serve as a hyperlinked text.
 
Three possible solutions pertinent to the ASP.NET GridView control are described below:

1. TemplateField with Hyperlink and img element

Listing 1

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

2. TemplateField with ImageButton

This technique, even 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:TemplateField>
    <ItemTemplate>
            <asp:ImageButton runat="server" ImageUrl='<%# Eval("Image_URL") %>'
            PostBackUrl='<%# Eval("Target_URL") %>' AlternateText="Read online" />
    </ItemTemplate>
</asp:TemplateField>

3. TemplateField with ImageButton and Javascript window.open added to 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

<itemtemplate>
 <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("Image_URL") %>' 
                        OnClientClick='<%# String.Format("javascript:return openTargetURL(\"{0}\")", Eval("Target_URL")) %>'  AlternateText="Read online" />
</itemtemplate>
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) 
    { window.open(url, "newWindow", "resizable=1,menubar=0,toolbar=0,scrollbars=1"); }
</script>

DEMO

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; }
</style>

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].

References

  1. Add Image Borders using HTML5/CSS3[^]
  2. Online Slide Show as pure HTML5 / CSS3 solution: NO Javascript[^]

License

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

Share

About the Author

DrABELL
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, currently focused on: Windows 7/8, HTML5, CSS3, jQuery, .NET, ASP.NET, WPF, C#, SQL, 'Big Data', AI, Speech Technology and Mobile apps. He participated in App Innovation Contest (AIC 2102/2013) with several winning submissions. Sample pubs follow:
  1. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  2. Engineering Calculator VOLTA-2013 (contest winner)
  3. HTML5 Best Practices: Table formatting via CSS3
  4. Engineering Calculator VOLTA-814D
  5. SQL generates large data sequence
  6. Aggregate Product function extends SQL
  7. Watch Your Mouse!
  8. Top-100 Digital Cameras
  9. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
Dr. Bell is personally credited for 10+ Enterprise level projects w/total code base exceeding 250k lines.
Follow on   Twitter

Comments and Discussions

 
QuestionNice Article Pinmemberkhaliqhamid20-May-14 0:56 
AnswerRe: Nice Article PinprofessionalDrABELL21-May-14 3:09 
GeneralReason for my vote of 3 sdfghjkl PinmemberJailendra Singh27-Nov-11 19:07 
GeneralRe: Sorry, but I did not understand your message. PinmemberDrABELL14-Dec-11 1:43 
GeneralReason for my vote of 5 great! PinmemberMarcio_Coelho27-Sep-11 10:57 
GeneralRe: Thanks! PinmemberDrABELL27-Sep-11 11:40 
GeneralReason for my vote of 4 Good Article Pinmembermandar13054-Aug-11 22:45 
GeneralReason for my vote of 5 nice PinmemberMonjurul Habib27-Jul-11 22:17 
GeneralRe: Thanks! PinmemberDrABELL28-Jul-11 3:07 
Thanks!
GeneralReason for my vote of 5 Good one Alex. Pinmvpthatraja14-Jul-11 7:20 
GeneralRe: Many thanks! PinmemberDrABELL14-Jul-11 8:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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 | Mobile
Web03 | 2.8.141022.1 | Last Updated 8 May 2013
Article Copyright 2011 by DrABELL
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid