How to display an image in a new window

Question

I have a follow-on question to How to display an image based on SelectedValue in a GridView?

What I would really like to do is have a ViewImage button on my GridView control so that when that is clicked, the image is displayed on a new page in a new browser window. How would I do that? I'm thinking perhaps do I need to create a

<asp:ButtonField>

How do I handle the click and how do I get the image to diplay on a new form in a new web browser window?

Thanks very much for looking.

Answer 1

You can use TemplateColumn, in that TemplateColumn you can define a button where you put javascript function to open new window.

Example:

<asp:TemplateField>
    <ItemTemplate>
        <input type="button" onclick="javascript:ShowImageInNewPage('PageToShowImage.aspx?tradeId=<%# Eval("TradeId") %>');" />
    </ItemTemplate>
</asp:TemplateField>

The "ShowImageInNewPage" function is a custom function you declare to popup/open new window with the selected image url.

In PageToShowImage.aspx, declare an img tag:

<asp:Image ID="imgBlah" runat="server" />

In code behind of PageToShowImage.aspx:

protected void Page_Load(object sender, EventArgs e)
{
    // this is querystring from GridView page
    if(Request.QueryString["tradeId"] != null)
    {
        imgBlah.Src = "GetImage.aspx?entityId=" + tradeId + "&entityType=T";
    }
    else
    {
        imgBlah.Src = "~/images/no-image.jpg"; // set no image
    }
}

HTH

Answer 2

I'm hoping that you're dealing with browser supported image formats. Assuming you are, you don't need a ButtonField . One approach would be to use an <asp:HyperLink> in a TemplateColumn , as Arief suggested.

<asp:TemplateField>
    <ItemTemplate>
        <asp:HyperLink ID="hyperLink1" runat="server" NavigatUrl="UrlToYourViewImagePage" Text="View Image" />
    </ItemTemplate>
</asp:TemplateField>

If you want the image to open in a new window, build a window.open call for each HyperLink's NavigateUrl.