Create an Image Gallery from the Database

Adding an image gallery to your website is a necessity today as it enhances the UI. ComponentOne Gallery™ for ASP.NET Wijmo displays images and their thumbnails with options for slide show, slick transition effects, paging, theming, and much more. The source of these images are usually dynamic url links or the static images in the project folder itself. But, in many cases, the images stored in the database. This blog features the ability of C1Gallery to display the images saved in the database. The ImageUrl property specifies the image to be displayed in the specific C1GalleryItem. So, we will create a url, that will get the image from the database and display it in the C1Gallery. Here is how it goes: Change Byte Data to Image: Add a generic handler(.ashx) in the project and handle its ProcessRequest method. Basically, you need to fetch the byte data from the database and convert it in a bitmap image using MemoryStream. Here is the code:

public void ProcessRequest(HttpContext context)  
{  
  OleDbDataAdapter adap = new OleDbDataAdapter("Select * from Categories", new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\\\C1NWind.mdb;Persist Security Info=True"));  
  DataSet ds = new DataSet();  
  adap.Fill(ds);  
  DataTable dt = ds.Tables[0];  
  HttpRequest request = context.Request;  
  if (!string.IsNullOrEmpty(request.QueryString["id"]))  
   {  
     int rindex = Convert.ToInt32(request.QueryString["id"]);  
     byte[] picData = (byte[])dt.Rows[rindex][3];  
     if (picData != null)  
      {  
        // is this is an embedded object?  
        int bmData = (picData[0] == 0x15 && picData[1] == 0x1c) ? 78 : 0;  
        // load the picture  
        System.Drawing.Image b = null;  
        try  
        {  
          System.IO.MemoryStream ms = new System.IO.MemoryStream(picData, bmData, picData.Length - bmData);  
          b = System.Drawing.Image.FromStream(ms);  
          System.Drawing.Bitmap bitMap = new System.Drawing.Bitmap(b, b.Width, b.Height);  
          //changing content type of handler page  
          context.Response.ContentType = "image/jpeg";  
          bitMap.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);  
          bitMap.Dispose();  
        }  
        catch  
        {  
        }  
      }  
   }  
}  

Assign the image to ImageUrl property: Now, the image urls are generated using the generic handler, we will just assign the handler to the ImageUrl property of C1GalleryItem so that the image from the database returned by the handler can be displayed. Here is the code:

<wijmo:C1GalleryItem ID="C1GalleryItem1" runat="server" Caption="GalleryItem1" ImageUrl="ImageHandler.ashx?id=0" LinkUrl="ImageHandler.ashx?id=0" />  

Here is the preview for the final output: You may refer to the attached samples for complete implementation. C# Sample VB Sample