XML-Binary BASE64 image slideshow using ASP. NET - AJAX

Introduction

This article would illustrate how to create and use HTTPHandler in ashx file, XML binary base64 to change image format, using Asp.net / Ajax. This primarily aims to have a slide show which displays many user profiles and photos.

The Problem Statement

I was looking to develop a functionality to create a web-based slide show. The features include display more web pages on the click of Previous & Next buttons. Employees & their information in the organization have to be dynamically generated & shown.
Normally, we can use a page method to load images to the slide for showing dynamic slides. It should display some transition effects, and it should not cause page refreshment. While using the conventional methods, I faced much problems in extracting binary data from tables & convert into images & render it in web pages. So there is a necessity to arrive at a feasible solution of converting binary information (the image is stored in tables in binary form).

Solution approach

In order to over come all these problems, I thought of using XML binary base64 which includes the HTTP handler object, used to convert binary information into images.

In the link provided below, we could click the next & last buttons to browse the various user profiles. Ajax was used to implement the clicking of Previous & Next buttons for display and to avoid the page from refreshing, I used AJAX. There are a lot of AJAX frameworks and tools out there to choose from. But for this task, I used the ASP.NET 2.0 built-in AJAX.

HTTP Handler

HTTPHandler aspx file contains more features including transition effects. The included source code will demonstrate the use of this class, and also how to use HTTPHandler to make the request to get the next image file and apply the transition effects. The key aspect is to apply transition effects, so that the next image would be completely loaded before playing the effects, otherwise, the picture displayed will not be smooth and will flicker. All these were addressed in the HTTPHandler object.

If we develop with ASP.NET, we probably spend most of our time creating .aspx files with .cs files as code behind (or perhaps use .ascx files for our controls - and .asmx files for web services) & created an .ashx file (web handler). A web handler file works just like an aspx file except we are one step back away from the messy browser level where HTML and C# mix. One reason we would write an .ashx file instead of an .aspx file is that our output doesn't go to the browser directly. Working with .ashx keeps us away from all the browser technology we don't need in this case. We have to include the IsReusable property.

Purpose of HTTPHandler

It really takes a HTTPContext object and work out what to do with it. The best way to describe it would be with an example -
Usually we associate an HTTPHandler with either a new file type (eg. ".AGASP") or with a .ASHX file. In the pipeline, the Handler is called last and when it is called, the appropriate HTTPHandler is executed. The handler can print information out or analyze information. The HTTPApplication object will call the HTTPHandler to process the request and generate a response.
In this case, we can associate the HTTPHandler with the .stime extension and get it display the server time, when called.

They differ from HTTPModules because it has only one method, one property and no events.

Public Interface IHTTPHandler
Public ReadOnly Property IsReuseable as Boolean
Public Sub ProcessRequest(context as HttpContext)
End Interface

XML Binary Base64 Data

The XML data is present in binary format: base64 format. If we use large files, it takes more time for opening. Images are stored in SQL server as image type (data type). I created SQL scheduler so that on a daily basis transfer of xml data to the slide show (Asp.net birthday folder) server automatically.

SQL Server 2000 Server-Side XML

The major elements of server-side XML support in SQL Server 2000 are as follows:

1. The creation of XML fragments from relational data using the FOR XML extension to the SELECT statement.
   
2. The ability to shred XML data, using the OPENXML function, so that it can be imported into relational tables.
   
3. Storing XML data natively in the database.

FOR XML

The FOR XML extension allows the creation of XML from relational data. It supports several "modifiers" that dictate the shape of the resulting XML fragment. Following is the full syntax of the FOR XML clause:

FOR XML {RAW | AUTO | EXPLICIT}
[, XMLDATA]
[, ELEMENTS]
[, BINARY BASE64]

For Example:

(
[imgid] [int] identity(1,1) not null,
[image_type] [nvarchar](150) collate sql_latin1_general_cp1_ci_as null,[img] [image] null, constraint [pk_testimagestore] primary key clustered ([imgid] asc) with (pad_index  = off, ignore_dup_key = off) on [primary]
)
on [primary] textimage_on [primary]

And also using select statement like

select * from dbo.testimagestore for xml auto,elements, binary base64

 

In the above example XML file employee photo, data is present in binary base64 format. This format would be changed to image format.

Using Source code - Procedure

To use the source code, unzip the project files to a folder, load the imageSlideShow.aspx in Visual Studio 2005, and run it.