Home > ASP.Net > Display Image in Popup window with Gridview

Display Image in Popup window with Gridview


try this example to display image in popup window where i save image name in my database and upload image in folder in my website called Car_Image

First Example:

<asp:TemplateField HeaderText="Image" SortExpression="Image">
              <asp:Image ID="Image1" runat="server" Height="82px" ImageUrl='<%# Eval("Image", "~/Car_Image/{0}") %>'
                        Width="108px" />

and in code behind :-

protected void GridView1_DataBound(object sender, EventArgs e)
        foreach (GridViewRow row in GridView1.Rows)
            Image img = (Image)row.FindControl("Image1");
            string strImage = img.ImageUrl;
            //strImage = strImage.Replace("~", "..");
            img.Attributes.Add("onClick", "javascript:window.open('image.aspx?PId=" + strImage + "',null,'left=45px,top=15px, width=300px, height=300px,status=no, resizable= yes, scrollbars=yes, toolbar=no, location=no,menubar=no');");

 and in image.aspx page add image control

and in code behind of image.aspx page we will get image as we pass image name in querystring

protected void Page_Load(object sender, EventArgs e)
        string url = Request.QueryString["PId"].ToString();
        Image1.ImageUrl = url;

Second Example:

<script language="javascript" type="text/javascript">
function Openpopup(popurl)
winpops = window.open(popurl,"car","width=340, height=300, left=45, top=15, scrollbars=yes, menubar=no,resizable=no,directories=no,location=no")

<asp:TemplateField HeaderText="Image">
                   <a href="javascript:Openpopup('Image_Detail.aspx?PId=<%# Eval("Id") %>')">
                   <asp:Image ID="Image1" runat="server" Height="72px" ImageUrl='<%# Eval("Image", "Car_Image/{0}") %>'
                            Width="91px" /></a>
                <HeaderStyle HorizontalAlign="Center" />

and in Image_Detail.aspx page we will get image by Id from Query String

Hope it helps…….

Good Luck

Categories: ASP.Net
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: