Monday, April 23, 2012

Monday, April 9, 2012

Load Images From Database To The Web Page Without Saving In File System Using New Image Generator control in ASP.Net 3.5

Introduction

Storing images in database BLOB field and displaying it on aspx page is one of the common tasks we do in asp.net projects. Asp.Net itself does not have an in build control to bind the image stored in database. To display an image stored in database, we will write an HttpHandler which will fetch the image from database and do a binary write. We all know that doing a binary write will become cumbersome when the number of images increases and the number of users becomes high. This week Microsoft have released a new control called ASP.NET Generated Image control to display image in ASP.Net page. This article will give you a kick start on this control and some of its features.

Pre-Requisites

Ø Download the control (Microsoft.Web.GeneratedImage.dll) from here.

Ø It Requires Visual Studio 2008 and .NetFramework 3.5 Sp1 to work. You can download .NetFramework 3.5 Sp1 it here.

GeneratedImage control in ASP.Net 3.5

This control can be used to display image faster, we can cache the generated image and we can do transformation on the generated image. To display the image, this control uses an Image HttpHandler which can accept parameters using NameValueCollection object. This Image HttpHandler is similar to normal HttpHandler which inherits an abstract class called ImageHandler. This ImageHandler abstract class internally inherits IHttpHandler.

public class ImageHandler1 : ImageHandler {

public ImageHandler1() {

// Set caching settings and add image transformations here

}

public override ImageInfo GenerateImage(NameValueCollection parameters) {

return new ImageInfo();

}

}

The implementation is really simple. Read the image from database as a byte array and convert the byte array to Microsoft.Web.ImageInfo object for the image to display. This object will come as a part of the control dll we are downloading. ImageInfo object has 2 overloaded constructors, one will take Image object and the other will take a byte array as an argument. We can pass the parameters to this handler by a collection called Parameters in GeneratedImage control. With this information, we will see how we can use this control to display images.

Using GeneratedImage control

Once you have downloaded the control, you can add it to the toolbox of Visual Studio 2008 by right clicking and selecting “Choose Items” option on the toolbar.

Displaying Image from Database

1. Drag a GeneratedImage control from the toolbox. This will add a new GeneratedImage control and @Register directive in the aspx page to register the control.

2. To add an HttpHandler, you can either click “Create Image Handler” option we get when we click the smart tag or by adding a generic handler through “Add New Items” option we get when we right click the visual studio solution.

In GenerateImage() method, read the image from database and pass the image byte array to the ImageInfo constructor.

Refer the below code.

public class ImageFromDB : ImageHandler {

public ImageFromDB() {

// Set caching settings and add image transformations here

}

public override ImageInfo GenerateImage(NameValueCollection parameters) {

// Add image generation logic here and return an instance of ImageInfo

string imageid = parameters["ImID"].ToString();

SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString);

connection.Open();

SqlCommand command = new SqlCommand("select Image from Image where ImageID=" + imageid, connection);

SqlDataReader dr = command.ExecuteReader();

dr.Read();

return new ImageInfo((Byte[])dr[0]);

}

}

The parameter “ImID” in the above code can be passed from the Parameters collection of the control from the aspx page.

For More Information Visit here.