Displaying an image icon in a gridview column with a href value in asp.net

I have a gridview column in which I have one column that point to a pdf file on the file server. I need to have another column right beside this, displaying the pdf icon. The user should be able to click the icon and launch the file from the file server.

My code is:

<asp:GridView ID="gvInvoices" AutoGenerateColumns="false" runat="server" Font-Names="Arial" Font-Size="Small" Width="50%">
                        <Columns>
                            <asp:TemplateField HeaderText="File Type">
                                <ItemTemplat开发者_开发知识库e><img runat="server" src="Images/img_Pdf.gif" id="imgFileType" /></ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Name">
                                <ItemTemplate><%#Eval("InvoiceNumber")%></ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                        </asp:GridView>  

How can I add a "NavugateURL" or href="" to the img ?

Rather than using an HTML img control, try using an ASP.Net Server control. A good choice would be the Hyperlink Control:

Instead of:

<img runat="server" src="Images/img_Pdf.gif" id="imgFileType" />

Use:

<asp:HyperLink ID="imgFileType" ImageUrl="Images/img_Pdf.gif" NavigateUrl="" runat="server">HyperLink</asp:HyperLink>

Just set your NavigateUrl property.

you need to wrap your icon around an anchor tag, and set the href of the anchor tag using DataBinding expression Eval. This assumes your Datasource field "PDFPath" is an absolute path.

  <asp:GridView ID="gvInvoices" AutoGenerateColumns="false" runat="server" Font-Names="Arial" Font-Size="Small" Width="50%">
                            <Columns>
                                <asp:TemplateField HeaderText="File Type">
                                    <ItemTemplate><a href='<%#Eval("PDFPath")%>'> <img runat="server" src="Images/img_Pdf.gif" id="imgFileType" /></a></ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Name">
                                    <ItemTemplate><%#Eval("InvoiceNumber")%></ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                            </asp:GridView> 

inside the RowDataBind event look for your image control and set its NavigateUrl property

protected void gvInvoices_RowDataBound(object Sender , GridViewRowEventArgs e)
{
        if(e.Row.RowType==DataRow)
        {
          HtmlControl icon = e.Row.FindControl("imgFileType") as HtmlControl;
          icon.NavigateUrl = ((MyDataType)e.Row.DataRow).PDFPath;
        }  
}

Note it is free hand writing so you may find some syntax errors that you should fix