Sunday, October 16, 2011

Displaying Images as a thumbnail image in a DataView from Database in ASP.NET

In this article i will be showing a example to retrieve image from Database and to display it as a thumbnail image in a dataview.

I have stored the image in a table named tblImage. SQL Server supports a datatype named as image for storing the image. 

A brief description about image datatype is as follows:-

image : Variable-length binary data from 0 through 2^31-1 (2,147,483,647) bytes.

The following query can be used to create a table:

CREATE TABLE [dbo].[tblImage] (
        [ID] [int] IDENTITY ,
        [Image_Name] [varchar] (500) NULL ,
        [Image] [image] NULL
In the create table statement, ID is declared as IDENTITY column.

Now I will be creating a simple Image Handler page using aspx page, that will be used to retrieve images from the database and write them to the Response Stream. The image ID will be passed as a QueryString to this image handler page, based on which the image byte array will be retrieved from database table and will be written to Response stream.

Step 1: ImageThumbnailCreation.aspx.cs

This class will work as a handler for processing the retrieved byte array from database and to write it as a Response stream.

public partial class ImageThumbnailCreation : System.Web.UI.Page
 protected void Page_Load(object sender, EventArgs e)
    if (Request.QueryString["ID"] != null//tblImage ID column value
     string strQuery = "select Image from tblImage where ID=@ID";
     string strID = Request.QueryString["ID"];

     //defining the connection string for the SqlConnection object
     SqlConnection connection = new  

     //opening the connection
     SqlCommand cmd = new SqlCommand(strQuery);

     //creating a parameter and binding it to the command object
     cmd.Parameters.Add("@id", SqlDbType.Int).Value= Convert.ToInt32(strID);                               
     cmd.CommandType = CommandType.Text;
     cmd.Connection = connection;

     //retrieving the byte array from command object
     byte[] byteArray = (byte[])cmd.ExecuteScalar();               
     //Creating image from the retrieved byteArray
     System.Drawing.Image image = System.Drawing.Image.FromStream(new 
     //Creating the thumnailimage
     System.Drawing.Image thumbImage = image.GetThumbnailImage(80,80, new 
     System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero);

     // memory stream object to store image bytes
     MemoryStream imgStream = new MemoryStream();

     // storing image into the memory stream
     thumbImage.Save(imgStream, System.Drawing.Imaging.ImageFormat.Jpeg);

     // byte array declaration as the same size of the image
     byte[] byteImage = new Byte[imgStream.Length];

     // resetting the memory stream
     imgStream.Position = 0;

     // load the byte array with the image
     imgStream.Read(byteImage, 0, (int)imgStream.Length);

     // return byteImage to caller with image type
     Response.ContentType = "image/jpeg";

 public bool ThumbnailCallback()
   return true;

Step 2: Using Template Field with Image Control on GridView (ShowingImageinGridView.aspx)

The GridView, contains the following columns:
a) ID column as BoundField
b) Image Name column as BoundField
c) Image column as a TemplateField with a Image control

It can be seen that the Image control ImageUrl property is referring to the respective handler page (ImageThumbnailCreation.aspx) and ID using the Eval statement.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" RowStyle-Width="100%">
   <asp:BoundField HeaderText="ID" DataField="ID" />
   <asp:BoundField HeaderText="Image Name" DataField="Image_Name" />               
   <asp:TemplateField HeaderText="Image">
    <asp:Image ID="Image1" runat="server" ImageUrl='<%# "ImageThumbnailCreation.aspx?ID=" + 

In the code behind of ShowingImageinGridView.aspx, following code is used to retrieve the image byte array from database and binding it to the GridView control.

void RetrieveAndBindImage()
 //defining the connection string for the SqlConnection object
 SqlConnection connection = new 

    //opening the connection

    SqlCommand cmd = new SqlCommand();
    //select statement creation as a commandText
    cmd.CommandText = "Select * from tblImage";
    cmd.Connection = connection;
    DataSet ds = new DataSet();
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    GridView1.DataSource = ds;
 catch (Exception ex)
 {  }

   if (connection != null)

Following figure below displays the GridView with the thumbnail images from database:

Using this article one can create and show thumbnail images on the GridView control in aspx page.

Happy Coding....

No comments :

Post a Comment