Recipe 7.7 Displaying an Image from a Database in a Web Forms Control

Problem

You need to display an image from a database column in an ASP.NET control.

Solution

Fill an ASP.NET Image control from a database field by pointing the ImageUrl property of an Image control to a web page that retrieves the image from the database. The solution contains three files: the Web Forms page to display the image, its code-behind file, and the code-behind page that serves the image.

The Web Forms page sample code displays the employee image in the Image control employeeImage. The code for the Web Forms page is shown in Example 7-13.

Example 7-13. File: ADOCookbookCS0707.aspx

<asp:Image id="employeeImage"
    style="Z-INDEX: 102; LEFT: 16px; POSITION: absolute; TOP: 56px"
    runat="server">
</asp:Image>

The code-behind used with the Web Forms page contains one event handler:

Form.Load

Sets the ImageUrl property of the employeeImage Image control to the web page that serves the employee image, then a parameter passed in the URL indicates the employee ID to retrieve.

The C# code for the code-behind is shown in Example 7-14.

Example 7-14. File: ADOCookbookCS0707.aspx.cs

using System; 

//  . . . 

private void Page_Load(object sender, System.EventArgs e)
{
    // Set the image URL to the page containing just the image.
    employeeImage.ImageUrl = "ADOCookbookCS0707b.aspx?EmployeeId=" +
        employeeIdTextBox.Text;
}

The code-behind that serves the image contains one event handler:

Form.Load

Retrieves the image from the database for the specified employee ID. The image is served by setting the HTTP MIME type of the output stream to image/bmp and writing the image to the stream.

The C# code for the code-behind is shown in Example 7-15.

Example 7-15. File: ADOCookbookCS0707b.aspx.cs

// Namespaces, variables, and constants
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient; 

//  . . . 

private void Page_Load(object sender, System.EventArgs e)
{    // Create the command to retrieve employee image specified.
    SqlConnection conn = new SqlConnection(
        ConfigurationSettings.AppSettings["DataConnectString"]);
    String sqlText = "SELECT * FROM Employees WHERE EmployeeId = " +
        Request["EmployeeId"].ToString( );
    SqlCommand cmd = new SqlCommand(sqlText, conn);
    // Create a DataReader containing the record for the employee.
    conn.Open( );
    SqlDataReader dr = cmd.ExecuteReader( );
    if(dr.Read( ))
    {
        // Set the response content type type.
        Response.ContentType = "image/bmp";
        // Stream the binary image data in the response.
        Response.BinaryWrite((byte[])dr["Photo"]);
    }
    dr.Close( );
    conn.Close( );
}

Discussion

Rendering an image from a database in a Web Forms Image control is easy to do, but not straightforward. Fortunately, it is much simpler with ASP.NET than it was in ASP.

Two web pages are required: one that contains the user interface that the client sees and one that retrieves the required image from the database and serves it to the Image control on the web page that the client sees. The following steps outline the required tasks:

The ImageUrl property of the Image control gets or sets the location of the image to display in the control. The location can be specified as either an absolute or relative URL. Set the ImageUrl property of the Image control in the web page that the client sees to the web page that outputs the image from the database as a binary stream.

This example uses the modified version of Northwind, where the Photo field has been updated for all employees to remove the OLE image header. For more information, see the online sample code.