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:
