Create a web form that reads the image data from the database and
streams the image to the Response object.
In the .aspx file, enter an @Page directive—omitting any head or body tags to link
the .aspx page to the code-behind class that
retrieves and displays the images.
Read the image ID that is generated by the running application—for example, the image ID passed in the URL for accessing the web form.
Open a connection to the database that contains the images.
Build a query string, and read the byte array of the desired image from the database.
Set the content type for the image and write it to the
Responseobject.
Example 12-10 through Example 12-12 show the .aspx file and
VB and C# code-behind files for an application that implements the
image-building portion of the solution.
To use this dynamic image generation technique in your application,
set the src attribute of the image tags used to
display the images to the URL of the ASP.NET page that reads the
images from the database, passing the image ID in the URL.
In the .aspx file for the page, add an
img tag for displaying the image.
In the code-behind class for the page that uses the image, use the
.NET language of your choice to set the src
attribute of the image tag to the URL for the web form just
described, passing the ID of the image in the URL.
Example 12-13 through Example 12-15 show the .aspx file and
VB and C# code-behind files for an application that uses the dynamic
image generation. Figure 12-3 shows some typical
output from the application.
If you have images in a database that you want to display on a web
form, chances are you’ve considered using an image
tag to display them. Nevertheless, you may be searching for a
practical way to set the image tag’s
src attribute and move the image data to the
browser while maintaining the maximum flexibility in selecting the
images you need.
The solution we favor that meets these requirements involves creating
a web form that reads an image from a database and streams it to the
Response object. A convenient way to specify the
image to read from the database is to include an image ID in the URL
used to call the web form that retrieves and returns the image to the
browser.
Our example that illustrates this solution consists of two web forms. The first web form renders no HTML but instead processes the request for reading an image from the database. The second web form is used to demonstrate displaying an image from the database.
The .aspx file of the first form contains no
head or body; it simply contains the @
Page directive to link the page to its code-behind
class.
The Page_Load method of the code-behind performs
the following steps to retrieve the requested image from the database
and then send it to the browser:
Retrieve the ID of the requested image from the URL
Read the byte array of the image from the database
Set the
ContentTypeof the type of image stored in the database (GIF in this example)Write the byte array of the image to the
Responseobject
To use the ASP.NET page to retrieve images from the database, we need
to set the src attribute of an image tag to the
name of the page just described, passing the ID of the desired image
in the URL. A sample URL is shown here:
src="CH12ImageFromDatabaseVB.aspx?ImageID=5"
In our example, the src attribute of an
img tag is set in the view image button click
event of the test page code-behind. To make things a little easier
and avoid hardcoding page names and querystring
information, two constants (PAGE_NAME and
QS_IMAGE_ID) are defined in the code-behind of the
page that reads the images from the database and are used here in
building the URL.
The performance of this solution can be significantly improved by
caching the images retrieved from the database instead of retrieving
them for each request. Refer to Recipe 13.2 for an example of how to cache the
results as a function of the data passed in the
QueryString.
An HttpHandler can be used to implement the same
functionality described in this recipe. Refer to Recipe 17.1 for an example of retrieving images
from a database using an HttpHandler.
Images can be stored in a database using the technique described in Recipe 15.4.
Recipe 13.2; Recipe 15.4; Recipe 17.1
Example 12-10. Reading images from a database (.aspx)
<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="CH12ImageFromDatabaseVB.aspx.vb"
Inherits="ASPNetCookbook.VBExamples.CH12ImageFromDatabaseVB" %>Example 12-11. Reading images from a database code-behind (.vb)
Option Explicit On
Option Strict On
'-----------------------------------------------------------------------------
'
' Module Name: CH12ImageFromDatabaseVB.aspx.vb
'
' Description: This module provides the code behind for the
' CH12ImageFromDatabaseVB.aspx page.
'
'*****************************************************************************
Imports Microsoft.VisualBasic
Imports System
Imports System.Configuration
Imports System.Data
Imports System.Data.OleDb
Imports System.IO
Namespace ASPNetCookbook.VBExamples
Public Class CH12ImageFromDatabaseVB
Inherits System.Web.UI.Page
'constants used to create URLs to this page
Public Const PAGE_NAME As String = "CH12ImageFromDatabaseVB.aspx"
Public Const QS_IMAGE_ID As String = "ImageID"
'***************************************************************************
'
' ROUTINE: Page_Load
'
' DESCRIPTION: This routine provides the event handler for the page load
' event. It is responsible for initializing the controls
' on the page.
'---------------------------------------------------------------------------
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
Dim dbConn As OleDbConnection
Dim dCmd As OleDbCommand
Dim imageData( ) As Byte
Dim strConnection As String
Dim strSQL As String
Dim imageID As String
If (Not Page.IsPostBack) Then
Try
'get the ID of the image to retrieve from the database
imageID = Request.QueryString(QS_IMAGE_ID)
'get the connection string from web.config and open a connection
'to the database
strConnection = _
ConfigurationSettings.AppSettings("dbConnectionString")
dbConn = New OleDb.OleDbConnection(strConnection)
dbConn.Open( )
'build the query string and get the data from the database
strSQL = "SELECT ImageData " & _
"FROM BookImage " & _
"WHERE BookImageID=?"
dCmd = New OleDbCommand(strSQL, dbConn)
dCmd.Parameters.Add(New OleDbParameter("BookImageID", imageID))
imageData = CType(dCmd.ExecuteScalar( ), Byte( ))
'set the content type for the image and write it to the response
Response.ContentType = "image/gif"
Response.BinaryWrite(imageData)
Finally
'clean up
If (Not IsNothing(dbConn)) Then
dbConn.Close( )
End If
End Try
End If
End Sub 'Page_Load
End Class 'CH12ImageFromDatabaseVB
End NamespaceExample 12-12. Reading images from a database code-behind (.cs)
//----------------------------------------------------------------------------
//
// Module Name: CH12ImageFromDatabaseCS.aspx.cs
//
// Description: This module provides the code behind for the
// CH12ImageFromDatabaseCS.aspx page
//
//****************************************************************************
using System;
using System.Configuration;
using System.Data;
using System.Data.OleDb;
namespace ASPNetCookbook.CSExamples
{
public class CH12ImageFromDatabaseCS : System.Web.UI.Page
{
// constants used to create URLs to this page
public const String PAGE_NAME = "CH12ImageFromDatabaseCS.aspx";
public const String QS_IMAGE_ID = "ImageID";
//************************************************************************
//
// ROUTINE: Page_Load
//
// DESCRIPTION: This routine provides the event handler for the page
// load event. It is responsible for initializing the
// controls on the page.
//------------------------------------------------------------------------
private void Page_Load(object sender, System.EventArgs e)
{
OleDbConnection dbConn = null;
OleDbCommand dCmd = null;
byte[] imageData = null;
String strConnection = null;
String strSQL = null;
String imageID = null;
if (!Page.IsPostBack)
{
try
{
// get the ID of the image to retrieve from the database
imageID = Request.QueryString[QS_IMAGE_ID];
// get the connection string from web.config and open a connection
// to the database
strConnection =
ConfigurationSettings.AppSettings["dbConnectionString"];
dbConn = new OleDbConnection(strConnection);
dbConn.Open( );
// build the query string and get the data from the database
strSQL = "SELECT ImageData " +
"FROM BookImage " +
"WHERE BookImageID=?";
dCmd = new OleDbCommand(strSQL, dbConn);
dCmd.Parameters.Add(new OleDbParameter("BookImageID", imageID));
imageData = (byte[])(dCmd.ExecuteScalar( ));
// set the content type for the image and write it to the response
Response.ContentType = "image/gif";
Response.BinaryWrite(imageData);
}
finally
{
// clean up
if (dbConn != null)
{
dbConn.Close( );
}
}
}
} // Page_Load
} // CH12ImageFromDatabaseCS
}Example 12-13. Displaying images from a database (.aspx)
<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="CH12TestImageFromDatabaseVB.aspx.vb"
Inherits="ASPNetCookbook.VBExamples.CH12TestImageFromDatabaseVB" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test Image From Database</title>
<link rel="stylesheet" href="css/ASPNetCookbook.css">
</head>
<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<form id="frmTestImageDB" method="post" runat="server">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<img src="images/ASPNETCookbookHeading_blue.gif">
</td>
</tr>
<tr>
<td class="dividerLine">
<img src="images/spacer.gif" height="6" border="0"></td>
</tr>
</table>
<table width="90%" align="center" border="0">
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center" class="PageHeading">
Display Image From Database (VB)
</td>
</tr>
<tr>
<td><img src="images/spacer.gif" height="10" border="0"></td>
</tr>
<tr>
<td align="center">
<table>
<tr>
<td>
<asp:DropDownList ID="ddImages" Runat="server" />
</td>
<td>
<input id="btnViewImage" runat="server" type="button"
value="View">
</td>
</tr>
<tr>
<td id="tdSelectedImage" runat="server"
colspan="2" align="center" class="SubHeading">
<br /><br />
Selected Image<br /><br />
<img id="imgBook" runat="server" border="0">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>Example 12-14. Displaying images from a database code-behind (.vb)
Option Explicit On
Option Strict On
'-----------------------------------------------------------------------------
'
' Module Name: CH12TestImageFromDatabaseVB.aspx.vb
'
' Description: This module provides the code behind for the
' CH12TestImageFromDatabaseVB.aspx page.
'
'*****************************************************************************
Imports Microsoft.VisualBasic
Imports System
Imports System.Configuration
Imports System.Data
Imports System.Data.OleDb
Namespace ASPNetCookbook.VBExamples
Public Class CH12TestImageFromDatabaseVB
Inherits System.Web.UI.Page
'controls on the form
Protected ddImages As System.Web.UI.WebControls.DropDownList
Protected WithEvents btnViewImage As System.Web.UI.HtmlControls.HtmlInputButton
Protected imgBook As System.Web.UI.HtmlControls.HtmlImage
Protected tdSelectedImage As System.Web.UI.HtmlControls.HtmlTableCell
'***************************************************************************
'
' ROUTINE: Page_Load
'
' DESCRIPTION: This routine provides the event handler for the page load
' event. It is responsible for initializing the controls
' on the page.
'---------------------------------------------------------------------------
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
Dim dbConn As OleDbConnection
Dim dc As OleDbCommand
Dim dr As OleDbDataReader
Dim strConnection As String
Dim strSQL As String
If (Not Page.IsPostBack) Then
'initially hide the selected image since one is not selected
tdSelectedImage.Visible = False
Try
'get the connection string from web.config and open a connection
'to the database
strConnection = _
ConfigurationSettings.AppSettings("dbConnectionString")
dbConn = New OleDb.OleDbConnection(strConnection)
dbConn.Open( )
'build the query string and get the data from the database
strSQL = "SELECT BookImageID, Title " & _
"FROM BookImage"
dc = New OleDbCommand(strSQL, dbConn)
dr = dc.ExecuteReader( )
'set the source of the data for the repeater control and bind it
ddImages.DataSource = dr
ddImages.DataTextField = "Title"
ddImages.DataValueField = "BookImageID"
ddImages.DataBind( )
Finally
'clean up
If (Not IsNothing(dbConn)) Then
dbConn.Close( )
End If
End Try
End If
End Sub 'Page_Load
'***************************************************************************
'
' ROUTINE: btnViewImage_ServerClick
'
' DESCRIPTION: This routine provides the event handler for the view
' image click event. It is responsible for setting the
' src attibute of the imgBook tag to the page that will
' retrieve the image data from the database and stream
' it to the browser.
'---------------------------------------------------------------------------
Private Sub btnViewImage_ServerClick(ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles btnViewImage.ServerClick
'set the source for the selected image tag
imgBook.Src = CH12ImageFromDatabaseVB.PAGE_NAME & "?" & _
CH12ImageFromDatabaseVB.QS_IMAGE_ID & "=" & _
ddImages.SelectedItem.Value.ToString( )
'make the selected image visible
tdSelectedImage.Visible = True
End Sub 'btnViewImage_ServerClick
End Class 'CH12TestImageFromDatabaseVB
End NamespaceExample 12-15. Displaying images from a database code-behind (.cs)
//----------------------------------------------------------------------------
//
// Module Name: CH12TestImageFromDatabaseCS.aspx.cs
//
// Description: This module provides the code behind for the
// CH12TestImageFromDatabaseCS.aspx page
//
//****************************************************************************
using System;
using System.Configuration;
using System.Data;
using System.Data.OleDb;
namespace ASPNetCookbook.CSExamples
{
public class CH12TestImageFromDatabaseCS : System.Web.UI.Page
{
// controls on the form
protected System.Web.UI.WebControls.DropDownList ddImages;
protected System.Web.UI.HtmlControls.HtmlInputButton btnViewImage;
protected System.Web.UI.HtmlControls.HtmlImage imgBook;
protected System.Web.UI.HtmlControls.HtmlTableCell tdSelectedImage;
//************************************************************************
//
// ROUTINE: Page_Load
//
// DESCRIPTION: This routine provides the event handler for the page
// load event. It is responsible for initializing the
// controls on the page.
//------------------------------------------------------------------------
private void Page_Load(object sender, System.EventArgs e)
{
OleDbConnection dbConn = null;
OleDbCommand dc = null;
OleDbDataReader dr = null;
String strConnection = null;
String strSQL = null;
// wire the view button click event
this.btnViewImage.ServerClick +=
new EventHandler(this.btnViewImage_ServerClick);
if (!Page.IsPostBack)
{
// initially hide the selected image since one is not selected
tdSelectedImage.Visible = false;
try
{
// get the connection string from web.config and open a connection
// to the database
strConnection =
ConfigurationSettings.AppSettings["dbConnectionString"];
dbConn = new OleDbConnection(strConnection);
dbConn.Open( );
// build the query string and get the data from the database
strSQL = "SELECT BookImageID, Title " +
"FROM BookImage";
dc = new OleDbCommand(strSQL, dbConn);
dr = dc.ExecuteReader( );
// set the source of the data for the repeater control and bind it
ddImages.DataSource = dr;
ddImages.DataTextField = "Title";
ddImages.DataValueField = "BookImageID";
ddImages.DataBind( );
}
finally
{
// clean up
if (dbConn != null)
{
dbConn.Close( );
}
}
}
} // Page_Load
//************************************************************************
//
// ROUTINE: btnViewImage_ServerClick
//
// DESCRIPTION: This routine provides the event handler for the view
// image click event. It is responsible for setting the
// src attibute of the imgBook tag to the page that will
// retrieve the image data from the database and stream
// it to the browser.
//------------------------------------------------------------------------
private void btnViewImage_ServerClick(Object sender,
System.EventArgs e)
{
// set the source for the selected image tag
imgBook.Src = CH12ImageFromDatabaseCS.PAGE_NAME + "?" +
CH12ImageFromDatabaseCS.QS_IMAGE_ID + "=" +
ddImages.SelectedItem.Value.ToString( );
// make the selected image visible
tdSelectedImage.Visible = true;
} // btnViewImage_ServerClick
} // CH12TestImageFromDatabaseCS
}