Using ASHX files to retrieve DB images

ASP.NET has a little-known feature that allows you to easily implement what is known as an HTTP Handler. Basically, when a request for a page comes into ASP.NET, eventually that request is handled by an object that implements the IHttpHandler interface. This interface includes a method called "ProcessRequest" that is responsible for writing all of the page content to the HttpContext.Response.Output stream. ASHX files allow you to easily write the IHttpHandler class without even having to pre-compile it. I used ASHX files in a recent project (coming soon) to retrieve images out of a SQL database. Here's how I did it.

You need to create a file in your project with an ASHX extension. I'm retrieving data from the Employees table of the Northwind sample database, so I called my page NWEmpPhoto.ashx. The contents of the ASHX file are as follows:

<%@ webhandler language="C#" class="NWEmpPhotoHandler" %>
using System; 
using System.Web; 
using System.Data; 
using System.Data.SqlClient; 
public class NWEmpPhotoHandler : IHttpHandler 
    public bool IsReusable { get { return true; } } 
    public void ProcessRequest(HttpContext ctx) 
        string id = ctx.Request.QueryString["id"]; 

        SqlConnection con = new SqlConnection(<<INSERT CONNECTION STRING HERE>>); 
        SqlCommand cmd = new SqlCommand("SELECT Photo FROM Employees WHERE EmployeeID = @EmpID", con); 
        cmd.CommandType = CommandType.Text; 
        cmd.Parameters.Add("@EmpID", id); 
        byte[] pict = (byte[])cmd.ExecuteScalar(); 

        ctx.Response.ContentType = "image/bmp"; 
        ctx.Response.OutputStream.Write(pict, 78, pict.Length - 78); 

As you can see, it's basically source code with the special <% webhandler %> tag at the top. The class implements two methods - IsReusable and ProcessRequest. IsReusable is for handler pooling, and as far as I can tell can be safely hard coded to return true, at least in this scenario. The ProcessRequest method implements the database access. It does some fairly straight forward ADO.NET to retrieve the image from the DB as a byte array. The primary key to the query is passed in on the query string. I'm using ExecuteScalar since I'm retrieving a single column from a single row. The photo column is returned as a byte array. We set the Response's correct content type (image/bmp in this case) and write the byte array containing the picture to the Response.OutputStream. By the way, the 78 byte offset is Northwind database specific. I'm not sure why the bitmap starts 78 bytes into the blob, but I was clued into the fact by an article by Dino Esposito .

To use the NW Photo Handler, you simply use an HTML image tag. Since the primary key is passed in on the query string, you need to include it as the src attribute of the image tag. Here's an example of the image tag:

<img src="NWEmpPhoto.ashx?id=1" />

You might also like...


Harry Pierson


Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“The difference between theory and practice is smaller in theory than in practice.”