Using hyperlink control with imagefield control in gridview

Question

I have a gridview and a column of that gridview is displaying images whose path is stored in a database & image is stored in locale folder inside my website. My problem is that I want to use the hyperlink control with the image, so that when the image is clicked it should jump to another page. How can I do that?

Answer 1

Firstly, you should bind data to your grid (in the code-behind):

public override void DataBind()
{
    // you implementation of getting data
    yourGridId.DataSource = GetData();
    yourGridId.DataBind();
}

Then I'd suggest to use template field for your image:

<asp:gridview id="yourGridId"
    runat="server">
    <columns>
        <asp:templatefield headertext="An Image">
            <itemtemplate>
                <a href="pageWhereToGo.aspx">
                    <img src='<%# ResolveUrl((string)Eval("ImageUrl"))%>' />
                </a>            
            </itemtemplate>
        </asp:templatefield>
    </columns>
  </asp:gridview>

The code above is assuming that the paths to images in your database are stored as a relative paths from your application (e.g. ~/assets/images/image1.jpg) or as full paths (e.g. http://www.contoso.com/assets/images/image1.jpg). Also assuming that your data source holds a path to image in ImageUrl field.

So the example above is a simplest grid with one asp:templatefield column: here is a clickable image which goes to the pageWhereToGo.aspx page on click event.

More about Gridview Column Fields could be found here.

Answer 2

Instead of using DataBound fields you can also use TemplateFiled within a GridView:

<asp:TemplateField HeaderText="SomeText" >
    <ItemTemplate>
        // Put any kind of .NET Code in here
        // you can access the data bound values like this:
        <%# Eval("NameOfPropertyOnDataBoundObject")%>
    </ItemTemplate>
    <ItemStyle CssClass="tworows"></ItemStyle>
</asp:TemplateField>