FAJAX Image Buttons

by Admin 17. November 2010 15:40

I had an interesting question the other day.  "How can I use AJAX to stream images back from a database to the web browser?"  The answer is, you dont need to. This functionality has been around since .net 1.0.  You can create an HTTP Handler.  Http Handlers give you control over any request recieved from the client.  In the case of an Image streamed from... whatever, you can do it quite simply...  Here is all of the code you need:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SlideShow.aspx.cs" Inherits="SlideShow" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Slide Show</title>
    <script>
        var index = 1;
        function getImage() {
            //increment counter
            if(index == 5){
                index = 1;
            }
            else{
                index ++
            }

            document.getElementById("sldImage").src = index + ".ipg";
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div id="slidePanel">
        <img id="sldImage" src="1.ipg" alt="slideImg" />
    </div>
    <input type="button" value="Next" onclick="getImage();return false;" />
    </form>
</body>
</html>

In the code above I am I am using an "IPG" extension as a replacement for jpegs.  This code will also support gif as "IIF".  The Image Handler would look as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
/// <summary>
/// Summary description for Class1
/// </summary>
public class HttpImageHandler : IHttpHandler
{
    public void ProcessRequest(System.Web.HttpContext context)
    {
        long fileID = 0;
        long.TryParse(Path.GetFileNameWithoutExtension(context.Request.Path), out fileID);

        context.Response.ContentType = getContentType(context.Request.Path);
        FileInfo fi = null;
        switch (fileID)
        {
            case 1:
                fi = new FileInfo("C:\\Pics\\Chrysanthemum.jpg");
                break;
            case 2:
                fi = new FileInfo("C:\\Pics\\Desert.jpg");
                break;
            case 3:
                fi = new FileInfo("C:\\Pics\\Hydrangeas.jpg");
                break;
            case 4:
                fi = new FileInfo("C:\\Pics\\Jellyfish.jpg");
                break;
            case 5:
                fi = new FileInfo("C:\\Pics\\Koala.jpg");
                break;
        }
        context.Response.BinaryWrite(getImage(fi.OpenRead(), Path.GetExtension(context.Request.Path)));
        
        context.Response.End();
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

    /// <summary>
    /// Gets the image steram as a byte array
    /// </summary>
    /// <param name="path">The </param>
    /// <returns></returns>
    private byte[] getImage(Stream imageData, string ImageType)
    {
        Bitmap imgIn = new Bitmap(imageData);
        System.IO.MemoryStream outStream = new System.IO.MemoryStream();

        imgIn.Save(outStream, getImageFormat(ImageType));

        return outStream.ToArray();
    }
    private string getContentType(String path)
    {
        switch (Path.GetExtension(path))
        {
            case ".ipg": return "Image/jpeg";
            case ".iif": return "Image/gif";
            default: break;
        }
        return "";
    }
    private ImageFormat getImageFormat(String ImageType)
    {
        switch (ImageType)
        {
            case ".ipg": return ImageFormat.Jpeg;
            case ".iif": return ImageFormat.Gif;

            default: break;
        }
        return ImageFormat.Jpeg;
    }
}

In this example I am just using the default images that ship with windows.  You will need to make a few changes to your web config, and if you are using IIS 6.0 or below, you will need to add the filter to your list of served content.

<!-- in system.web -->
    <httpHandlers>
      <add verb="*" path="*.ipg"
        type="HttpImageHandler"/>
      <add verb="*" path="*.iif"
        type="HttpImageHandler"/>
    </httpHandlers>
<!-- system.webServer -->
    <handlers>
      <add  verb="*" path="*.ipg"
            name="HttpImageHandler"
            type="HttpImageHandler"/>
      <add  verb="*" path="*.iif"
            name="HttpImageHandler"
            type="HttpImageHandler"/>        
    </handlers>

That is pretty much it...  pressing the next button will go to the server and retrieve the corresponding image file, however it is stored.

Tags: ,

ASP.NET

First Entry

by Admin 16. November 2010 17:23

This site will be dedicated to articles that I feel will be helpful to the .NET community.  I will be approaching the articles pragmatically and removing much of the fluff that I feel is present in many of the examples on the web.  How many times have you searched for a simple function and had to wade through 30 pages of WCF code or ASP.NET code that has nothing to do with the problem you are trying to solve.

I will try to combat this by

  1. taking suggestions on content
  2. Keep the articles short and to the point
  3. Make sure the articles give everything the user needs to accomplish a specific task and keep it lean and clean.

Hopefully this will be a good learning experince for you and me.  Comments are always welcome as are contributors

Tags:

Calendar

<<  August 2014  >>
MoTuWeThFrSaSu
28293031123
45678910
11121314151617
18192021222324
25262728293031
1234567

View posts in large calendar

Page List

RecentComments

None