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