This topic shows how to integrate BinaryImage control into a DataList control to display images stored as binary images, in data binding scenarios. The ImageData property is used to add the image from the database to the BinaryImage control.

In the Designer

Complete the following steps:

1. In Visual Studio, create a new ASP.Net WebApplication and add a new Web Form.
2. In the ToolBox, locate the DataList control and drag it onto the Web Form.
3. Click the DataList Smart Tag  and select <New data source...> from the Choose Data Source drop down list. This will open the Data Source Configuration Wizard. Select SQL Database and click OK. This will open the Configure Data Source dialog box.
4. In the Configure Data Source dialog box, click New Connection. This will open the Add Connection dialog box. Change  DataSource to Microsoft Access Database File (OLE DB) and select C1NWind in the Database file name. Click OK.
5. Click Next. Save the connection and click Next. Specify the columns to add to the DataList and click Next. Test Query and click Finish.

In Source View

Replace the <asp:Label ID="PictureLabel" runat="server" Text='<%# Eval("Picture") %>' /> tag, within the <ItemTemplate></ItemTemplate> tags with the following markup:

<br />
<cc1:C1BinaryImage ID="BinaryImage1" runat="server" ImageData='<%# Eval("Picture") %>' />

Following is the final markup for <asp:DataList>:

<asp:DataList ID="DataList1" runat="server" DataKeyField="CategoryID" 
        DataSourceID="SqlDataSource1" RepeatDirection="Horizontal" RepeatColumns="4" Width="100%">
                <ItemTemplate>               
        Picture:<br />
        <cc1:C1BinaryImage ID="BinaryImage1" runat="server" ImageData='<%# Eval("Picture") %>'  />                          
        <br />
        Description:
        <asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("Description") %>' />
        <br />
        CategoryName:
        <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />
        <br />
        CategoryID:
        <asp:Label ID="CategoryIDLabel" runat="server" Text='<%# Eval("CategoryID") %>' />
                </ItemTemplate>
</asp:DataList>      

What You've Accomplished

The images are displayed with the BinaryImage control integrated in the DataList control, as shown in the image below: