Ajax- Image Handling

Ajax like image display. This is a very simple way to display images, and slid the images using generic handlers provided by Asp.Net 2005.

Very simple way to handle images and change images according to user input. This is not exact ajax, but we can use query string to change the image.

We are going to use generic handlers or .ashx file to display image, and change the image simply changing the query string of the ashx file.

This article will be a kick start for the creating web based photo album applications.

We will use Html Image Tag as follows

<br /><br /><img id="Image1" src="Image.ashx?id=1" onmouseover="zoomImage(this.src)" height="210px" width="211px" /><br /><br />

In the source of image, instead of giving image URL we are giving, URL of ashx file.


Our HTML code for form tag is as follows

<br /><br /><form id="form1" runat="server"><br /><br /><table border="1"><br /><br /><tr><br /><br /><td><br /><br /><img id="Image1" src="Image.ashx?id=1" onmouseover="zoomImage(this.src)" height="210px" width="211px" /><br /><br /></td><br /><br /></tr><br /><br /><tr><br /><br /><td><br /><br /><table cellpadding="0" cellspacing="0" style="width: 211px; height: 23px"><br /><br /><tr><br /><br /><td onclick="changeImage(-1)" style="height: 19px"><br /><br /><---Prev</td><br /><br /><td style="height: 19px"><br /><br /> </td><br /><br /><td onclick="changeImage(1)" style="height: 19px"><br /><br />Next---></td><br /><br /></tr><br /><br /></table><br /><br /></td><br /><br /></tr><br /><br /></table><br /><br /><div id="'imageShow'" style="display: none; width: 391px; height: 270px; left: 314px; position: absolute; top: 16px;"><br /><br /><img id="'ifimageShow'" src="" style="width: 435px; height: 435px" /><br /><br /></div><br /><br /><asp:hiddenfield id="hdnId" runat="server" value="2"><br /><br /></form><br /><br />

In above HTML code , we have one div tag with id “imageShow”, on mouse over event of “Image1” we will display original full size image in this div tag.


Hidden field named “hdnId” is used to maintain the id in query string to ASHX file.


We also have following JavaScript function on main page to change the query string of the image source.

<br /><br /><script language="javascript"><br /><br />function changeImage(id)<br /><br />{<br /><br />var hId = parseInt(window.document.getElementById('hdnId').value,0) + id;<br /><br />window.document.getElementById('hdnId').value = hId;<br /><br />window.document.getElementById('Image1').src = "Image.ashx?id=" + hId;<br /><br />}<br /><br />function zoomImage(src)<br /><br />{<br /><br />window.document.getElementById('imageShow').style.display = '';<br /><br />window.document.getElementById('ifimageShow').src = src;<br /><br />}<br /><br /></script><br /><br />

At this point our client side code is done.


Now following is our serverside code written in ashx file.

Ashx is a generic handler, we can use it if there is no need to run any server side page event.

<br /><br />using System;<br /><br />using System.Web;<br /><br />using System.IO;<br /><br />using System.Xml;<br /><br />public class Image : IHttpHandler {<br /><br />byte[] imageFileBytes = null;<br /><br />string img = string.Empty;<br /><br />public void ProcessRequest (HttpContext context)<br /><br />{<br /><br />context.Response.ContentType = "Application/octet-stream";<br /><br />if (context.Request["id"] != null)<br /><br />{<br /><br />img = "Images/" + context.Request["id"] + ".jpg";<br /><br />}<br /><br />else<br /><br />{<br /><br />img = "Images/1.jpg";<br /><br />}<br /><br />string physicalPath = context.Server.MapPath(img);<br /><br />if(File.Exists(physicalPath))<br /><br />{<br /><br />imageFileBytes = File.ReadAllBytes(physicalPath);<br /><br />context.Response.BinaryWrite(imageFileBytes);<br /><br />//Write image in binary format over Http.<br /><br />}<br /><br /><br />}<br /><br />public bool IsReusable {<br /><br />get {<br /><br />return false;<br /><br />}<br /><br />}<br /><br />

We have to set the contentType for binary stream, since we are writing data as a stream.


This is very simple to implement, we can develop complex image album web application using this logic. One Ashx page will be enough to handle many requests.