C1Carousel 显示数据库中图片

Wijmo 套包中的Carousel 控件提供在浏览器中动态显示文本、图像控件。用户只可以通过设置图像链接即可显示图片到Carousel 控件中，但是，有些用户希望把数据库中的图片显示在Carousel中。

本篇文章将阐述如何实现把数据库中图片显示到Carousel 控件中。

我们要做的第一件事是从数据库中取出图片。可以通过使用Web Service 可以实现。因为images 以binary 格式保存，我们需要把其转化为图片进而显示。, 因为Carousel 控件只接受链接形式的图片，因此我们需要使用WCF service 来以URL形式传递图片:

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;
            }
        }

本篇博客的数据源为 OLEDB 数据源， Nwind 数据库。使用memory stream 存储二进制图片。重载GetImage 方法设置图片下标，

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

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

另外，我们需要设置Service 中的WebServiceHostFactory ，代码如下:

最后，添加内容到C1Carousel 控件。设置service URL给 ImageUrl ，代码如下:

<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>

更详细信息请参考附件中 Demo

注意:请根据本机Nwind.mdb数据库正确位置修改连接字符串。

BinaryImages_C#
BinaryImages_VB.NET