Displaying an Image from a Database in a Web Forms Control

[ Team LiB ]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

[ Team LiB ]

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:

1 Create a web page that outputs a binary stream containing the image from the database

2 Create a SQL statement to retrieve the required image from the database and retrieve the image using a DataReader A DataTable or DataSet filled using a DataAdapter can also be used

3 Set the ContentType property of the HttpResponse object to the MIME type of the image in the database The ContentType property of the HttpResponse object gets

or sets the MIME type of the output stream The default value is text/html, but

other types can be specified to output

Response.ContentType = "image/bmp";

4 Use the BinaryWrite( ) method of the HttpResponse object to output the image as

a binary stream The BinaryWrite( ) method of the HttpResponse object writes a stream of binary characters to the HTTP output stream rather than a textual stream Response.BinaryWrite((byte[])dr["Photo"]);

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

[ Team LiB ]