Creating a Simple Image Slide Show Using ASP.NET Client Callbacks

In this post I will explain how to make a very simple image slide show using ASP.NET Client Callbacks. The pictures are stored in the Pictures folder which reside in the web application project. The first step when using the ASP.NET is to register the callbacks. Take a look at the code below which registers the callbacks to the ASP.NET page.

private void RegisterCallbacks()

{

string callbackRef = ClientScript.GetCallbackEventReference(this, "arg", "recieveServerData", "context");

string script = String.Empty;

if (!ClientScript.IsClientScriptBlockRegistered("callServer"))

{

script = "function callServer(arg,context) { " + callbackRef + "}";

ClientScript.RegisterClientScriptBlock(this.GetType(), "callServer", script, true);

}

}

You must also implement the ICallbackEventHandler interface for your page.

public partial class _Default : System.Web.UI.Page, ICallbackEventHandler

And implement the GetCallbackResult() and RaiseCallbackEvent methods.

public string GetCallbackResult()

{

return SlideShowHelper.GetImage(index);

}

public void RaiseCallbackEvent(string eventArgument)

{

index = Int32.Parse(eventArgument);

}

index is a class level private variable.

private int index = -1;

The SlideShowHelper class is responsible for getting the correct image for the slide show or when the user presses the "Next" or "Previous" buttons.

public static string IMAGES_FOLDER = @"Pictures/";

public static string GetImage(int index)

{

// You can cache the

string[] files =Directory.GetFiles(HttpContext.Current.Server.MapPath(SiteConfiguration.GetImagesFolderPath()));

if (index > files.Length)

return "DEC";

if (index < 0)

return "INC";

return CreateImageTags(IMAGES_FOLDER,System.IO.Path.GetFileName(files[index]));

}

The important thing to remember is that the IMAGES_FOLDER path should contain a backward slash and not the forward slash. If you use forward slash it will not work for the FireFox browser.

The CreateImageTags is used to create the image tags which can then be assigned to the DIV element.

private static string CreateImageTags(string folderName,string fileName)

{

return "<img width=\"300px\" height=\"300px\" src=\"" + folderName + fileName + "\"/>";

}

Now, let's take a look at the UI (Default.aspx) code.

<div id="display">

</div>

<input type="button" value="Previous" onclick="loadPreviousImage()" />

<input type="button" value="Stop" onclick="stopSlideShow()" />

<input type="button" value="Play" onclick="startSlideShow()" />

<input type="button" value="Next" onclick="loadNextImage()" />

And finally the Javascript functions:

<script language="javascript" type="text/javascript">

var index = -1;

var timerId = null;

function stopSlideShow()

{

window.clearInterval(timerId);

}

function startSlideShow()

{

timerId = window.setInterval(loadNextImage,2000);

}

function loadPreviousImage()

{

index--;

callServer(index,'');

}

function loadNextImage()

{

index++;

callServer(index,'');

}

function recieveServerData(response)

{

if(response == "DEC")

index--;

if(response == "INC")

index++;

if(response != "DEC" && response != "INC")

{

document.getElementById("display").innerHTML = response;

}

}

Here is the effect show below:

powered by ; http://aspadvice.com