Using hyperlink control with imagefield control in gridview - asp.net

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>