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