GridView with Thumbnail Images

GridView with Thumbnail Images – Part 2 In Part 1, we have seen how to display the full image in a popup window when the user clicks the thumbnail image displayed in the GridView. We all know that displaying something on a popup window will not give a better user experience. There might be a chance where the popup blocker is turned on in the user’s machine and it will not allow the user to view the full image. Part 2 of this article will also generate the thumbnail image for the images stored in database to display on the GridView. Like Part 1, when the user clicks on the thumbnail image it will also display the full image, but inside a DIV tag on the same page instead of a popup, which gives a better user experience.
Creating the thumbnail image and displaying the full image is done by the same HttpHandler implementation we have used in Part 1. Creating Thumbnail Image For reference purpose, we will have the HttpHandler implementation here also. For description of the code refer Part 1. Thumbnail.ashx public void ProcessRequest (HttpContext context) { string imageid = context.Request.QueryString["ImID"]; if (imageid == null || imageid == "") { //Set a default imageID imageid = "1"; } SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString); connection.Open(); SqlCommand command = new SqlCommand("select Image from Image where ImageID="+imageid, connection); SqlDataReader dr = command.ExecuteReader(); dr.Read(); Stream str = new MemoryStream((Byte[])dr[0]); Bitmap loBMP = new Bitmap(str); Bitmap bmpOut = new Bitmap(100, 100); Graphics g = Graphics.FromImage(bmpOut); g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; g.FillRectangle(Brushes.White, 0, 0, 100, 100); g.DrawImage(loBMP, 0, 0, 100, 100); MemoryStream ms = new MemoryStream(); bmpOut.Save(ms, System.Drawing.Imaging.ImageFormat.Png); byte[] bmpBytes = ms.GetBuffer(); bmpOut.Dispose(); ms.Close(); context.Response.BinaryWrite(bmpBytes); connection.Close(); context.Response.End(); } Displaying the Original Image FullImage.ashx public void ProcessRequest (HttpContext context) { string imageid = context.Request.QueryString["ImID"]; if (imageid == null || imageid == "") { //Set a default imageID imageid = "1"; } SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString); connection.Open(); SqlCommand command = new SqlCommand("select Image from Image where ImageID="+imageid, connection); SqlDataReader dr = command.ExecuteReader(); dr.Read(); context.Response.BinaryWrite((Byte[])dr[0]); connection.Close(); context.Response.End(); } Note I have given only the ProcessRequest() method in the above code. Refer the source code attachment for the full code. I have set default imageID, make sure you are giving an existing imageId in database for the code to work without any errors. Using DIV Tag to display the full image To implement this, we will declare a DIV tag in the ASPX page with display property set to none. This indicates that the DIV tag will not be visible by default when the page is loaded. Declare a tag inside this DIV tag to display the full image. When the user clicks the thumbnail image, we can enable the DIV tag through a javascript function and pass the ImID of the image to call the FullImage.ashx HttpHandler for displaying the full image in the tag. Also, we will have a button called Close inside the DIV tag to close the display of full image i.e. on click of this button we will again make the DIV tag’s display property to none. Refer the below Jscript code, Sponsors Useful Books For Developers More books.. Similar Articles Custom Paging for GridView using LINQ Posted on 6/11/2009 @ 9:09 AM By Satheesh Babu DatePicker Control in ASP.Net Posted on 6/4/2009 @ 6:19 AM By Satheesh Babu Using the Validator Controls in ASP.Net Projects Posted on 5/27/2009 @ 8:57 AM By Bala Murugan Tips for Deploying ASP.Net Application in Production Posted on 5/15/2009 @ 1:46 AM By Satheesh Babu Choosing the Right DataBound Control in ASP.Net Posted on 4/30/2009 @ 11:24 AM By Satheesh Babu <script language="javascript"> function ShowDIV(ImID) { var obj = document.getElementById("IMGDIV"); var im = document.getElementById("imIMG"); if ( obj != null ) { obj.style.display = "block"; im.src = "FullImage.ashx?ImID="+ImID; } } function HideDIV() { var obj = document.getElementById("IMGDIV"); if ( obj != null ) { obj.style.display = "none"; } } </script> ASPX <form id="form1" runat="server"> <div> <asp:GridView Width="500px" ID="gvImages" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" > <Columns> <asp:BoundField HeaderText = "Image Name" DataField="imagename" /> <asp:TemplateField HeaderText="Image"> <ItemTemplate> <a href="javascript:void(ShowDIV('<%# Eval("ImageID")%>'));" > <asp:Image ID="Image1" runat="server" ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImageID") %>'/> </a> </ItemTemplate> </asp:TemplateField> </Columns> <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <RowStyle BackColor="#FFFBD6" ForeColor="#333333" /> <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" /> <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" /> <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView> </div> <div id="IMGDIV" align="center" valign="middle" runat="server" style="position: absolute;left: 35%;top: 25%;display:none;visibility:visible;vertical-align:middle;border-style:inset;border-color:black;background-color:#c8d1d4;"> <table><tr><td><img id="imIMG" /></td></tr><tr><td> <input type="button" style="vertical-align:text-top" value="Close" onclick="return HideDIV();" /></td></tr></table> </div> </form> ASPX '));" > '/> When we execute the page we will get an output similar to below. On clicking the thumbnail image, we can view the full image inside a DIV tag like below, Clicking Close button will close the image, in other words it closes the DIV tag. Note The source code attached with this article has a page for uploading images. Create a table with name Image with columns ImageID(Identity), ImageName(Varchar(50)) and Image(image). Configure the connection string in the web.config file corresponding to the sqlserver you use.
	Download Source Code Conclusion When we bind the images of different dimensions stored in database to a gridview it will give an inconsistent look to the gridview. This article will address this issue by creating a thumbnail image for the images and then binding it to a gridview. Thus, displaying the full image inside a DIV tag will give a better user experience when compared to popup window. Happy Coding!!!