Wednesday, January 28, 2009

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

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

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.

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.

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.
Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

No comments:

Post a Comment

blogger templates 3 columns | Make Money Online