Displaying multiple dynamic images in a WebForm

Introduction

This article will provide you with the basic guidelines on displaying multiple, dynamically generated images in a single .aspx page. We know that it's a standard practice to use a separate web form to generate a dynamic image and use the URL of that page when creating an image. This is a simple way to extend that to display multiple dynamic images in the same page, using the same WebForm as the URL.

Background

A small recap. To display a single dynamic image in a web form, we put it in a session variable called, for example, "ImageBinary" (I usually insert a byte array of the image into the session, instead of a bitmap). Then, we create a separate .aspx page (let's say, ImageViewer.aspx). In its page load method, we write the contents of the session that we initialized earlier, into the output stream of the response (I use Response.BinaryWrite (byte[])). Then we create an image wherever we want and set the URL of that image to the URL of the page which we created in the previous step. We could create any image in ImageViewer.aspx and write it to the output stream, without using the session variable.

But there's one major drawback to this method. You cannot display separate images using the same page as the URL. When one image gets updated, all the images with that URL ("ImageViewer.aspx") gets updated. I will explain how to rectify this in the next section. (You can find many articles giving detailed descriptions of the method I outlined here, on the net. Please refer to them for additional information.)

Using the code

To explain how to display multiple dynamic images in a single WebForm, let's take an example scenario. We have stored our images in an SQL database as byte[]s. We want to take a set of records matching a certain criteria, and display all the results in a single page. We want the images stored in the database to be displayed along with the other details. Let's assume that we have completed the ordeal of getting the records and creating a table to display those records (the table will be created dynamically by adding rows to a table set as a server control).

First, we insert the byte[]s (which represent the images) that we got from the database into an ArrayList.

//For each record in the recordset

int index=0;    //you will see the use of this variable later on

{
    ArrayList laryImgArray = new ArrayList();
    .
    .

    laryImgArray.Add(laryPic);    //larypic is the byte[] from the database

    index++;
}

Then we create an image with the URL set to the page that we will be creating soon (e.g.: MultipleImaging.aspx).

    string lstrImgString = "<img src=\"MultipleImaging.aspx?Index = 
           "+index+"\" width=\"50\""+
           "height=\"50\" hspace=\"5\" vspace=\"5\">";
    lcelPic.Controls.Add(new LiteralControl(lstrImgString));
    lcelPic.Align = "center";

You can use any method to create an image and set the path to the appropriate page. Just be sure that you add the parameter "Index" to the end of the URL ("MultipleImaging.aspx?Index = "+ index).

Then we insert an array of byte[]s to a new session (e.g., "ImageBinaryArray"):

Session["ImageBinaryArray"]=(byte[][])laryImgArray.ToArray(typeof(byte[]));

Then we create a new WebForm called "MultipleImaging.aspx". In the Page_Load method of this page, we write some code similar to that given below:

private void Page_Load(object sender, EventArgs e)
{
    if((Session["ImageBinaryArray"]!=null) && 
         Session["ImageBinaryArray"].GetType().Equals(typeof(byte[][])))
    {
        byte[][] laryImages = (byte[][])Session["ImageBinaryArray"];
        int index  = Int32.Parse(Request.Params.Get(0).ToString());
        if(laryImages[index].Length > 0)
            Response.BinaryWrite(laryImages[index]);
        else
        {
            //send a default image

        }
    }
}

That's it! You might not be able to apply the coding straightaway, but with some modifications I think you would be able to turn it into something useful.

Points of Interest

This method can be used to display images in web pages without having to store them in a temporary location. That would save a lot of people the time spent on thinking about multiple requests and managing the temp space efficiently.