Wijmo: Display Binary Images in Carousel Control

Carousel control in Wijmo suite provides us the ability to dynamically display text, images, controls, and more over web browsers. Typically users display images by directly providing the ImageUrl to the Carousel control and the images are then loaded onto the browser. However there might be cases when a user may want to directly pull the images from a database and then display them in the Carousel. This implementation provides a demonstration to display images from a local data source in the Carousel Control. So the first thing which we would want to do is to find a way to pull the images which are saved in the database. Using a Web Service would be the best option to do this. Since the images are saved in the binary format, we would need to convert them to an image file so that they can be displayed correctly. Since the ImageUrl property of the Carousel control only accepts a URL therefore we are using a WCF service here whose URL would be used to populate the control. To begin with, write a function to get the image:

public class Service1 : IService1  
{  
   public Stream GetImage(string Index)  
   {  
     int index = int.Parse(Index);  
     string strQuery = "Select photo from Employees";  
     string strConn = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\\Data\\Nwind.mdb;Persist Security Info=False";  
     OleDbConnection oleConn = new OleDbConnection(strConn);  
     OleDbDataAdapter da = new OleDbDataAdapter(strQuery,oleConn);  
     DataSet _ds = new DataSet();  
     da.Fill(_ds, "Employees");  
     byte[] imgData = (byte[])_ds.Tables[0].Rows[index][0];  
     MemoryStream imgStream = new MemoryStream(imgData, 78, imgData.Length - 78);  
     imgStream.Position = 0;  
     WebOperationContext.Current.OutgoingResponse.ContentType = "Image/jpeg";  
     return imgStream;  
  }  
}

For this blog implementation, OLEDB data source and Nwind database have being used. Images retrieved from the data source in the form of Byte array is used to create the memory stream. It is important to note here that there is a default OLE Header offset of size 78 for Northwind images and therefore we need to strip it off while creating the stream. The GetImage method is overloaded to accept the record index so that we can use it to display a particular image. Next we would need to create an OperationContract in the service Interface to call the GetImage method we created earlier.

[ServiceContract]  
public interface IService1  
{  
 [OperationContract]  
 [WebGet(UriTemplate = "/GetImage/{Index}", RequestFormat = WebMessageFormat.Xml, ResponseFormat = WebMessageFormat.Xml, BodyStyle = WebMessageBodyStyle.Bare)]  
 Stream GetImage(string Index);  
}

In addition to this, we will also need to specify the WebServiceHostFactory in the service markup as displayed below:

<%@ ServiceHost Language="C#" Debug="true" Service="ImageService.Service1" CodeBehind="Service1.svc.cs" Factory="System.ServiceModel.Activation.WebServiceHostFactory"%>

The final step involves adding content to the C1Carousel control. So in the ImageUrl property we will specify the service URL and the image index which we need to display. So it will look something like:

<wijmo:C1Carousel ID="C1Carousel1" runat="server" Width="750px" Height="300px" Display="1" EnableTheming="True">  
 <Items>  
   <wijmo:C1CarouselItem ID="C1CarouselItem1" runat="server" ImageUrl="http://localhost:2915/Service1.svc/GetImage/1" Caption="Test Image 1"></wijmo:C1CarouselItem>  
   <wijmo:C1CarouselItem ID="C1CarouselItem2" runat="server" ImageUrl="http://localhost:2915/Service1.svc/GetImage/2" Caption="Test Image 2"></wijmo:C1CarouselItem>  
   <wijmo:C1CarouselItem ID="C1CarouselItem3" runat="server" ImageUrl="http://localhost:2915/Service1.svc/GetImage/3" Caption="Test Image 3"></wijmo:C1CarouselItem>  
   <wijmo:C1CarouselItem ID="C1CarouselItem4" runat="server" ImageUrl="http://localhost:2915/Service1.svc/GetImage/4" Caption="Test Image 4"></wijmo:C1CarouselItem>  
   <wijmo:C1CarouselItem ID="C1CarouselItem5" runat="server" ImageUrl="http://localhost:2915/Service1.svc/GetImage/5" Caption="Test Image 5"></wijmo:C1CarouselItem>  
   <wijmo:C1CarouselItem ID="C1CarouselItem6" runat="server" ImageUrl="http://localhost:2915/Service1.svc/GetImage/6" Caption="Test Image 6"></wijmo:C1CarouselItem>  
   <wijmo:C1CarouselItem ID="C1CarouselItem7" runat="server" ImageUrl="http://localhost:2915/Service1.svc/GetImage/7" Caption="Test Image 7"></wijmo:C1CarouselItem>  
   <wijmo:C1CarouselItem ID="C1CarouselItem8" runat="server" ImageUrl="http://localhost:2915/Service1.svc/GetImage/8" Caption="Test Image 8"></wijmo:C1CarouselItem>  
 </Items>  
</wijmo:C1Carousel>

Refer to the attached samples for complete implementation. Note: Please modify the connection string to correct the location of the Nwind.mdb database path as installed in your local machine. Attached samples uses the location C:\Data. BinaryImages_C# BinaryImages_VB.NET