Creating Slide Show using ASP.NET AJAX
Companies often need a mechanism to showcase their products in the form of
but ASP.NET AJAX makes your life easy. In this article we will develop a simple
slide show with the help of page methods and client script extensions. The slide
show can be started and paused by the end user and keeps looping through the
images. User can also navigate the images manually.
Creating SlideShow class
To begin developing the slide show create a new AJAX enabled web site. Add a
new java script file named JScript.js. We will create a class called SlideShow
that will do all the job of playing, pausing and navigating the slide show. The
SlideShow class is developed using ASP.NET AJAX client script extensions and
looks as shown below:
var newIndex=this._currentIndex +1;
var newIndex=this._currentIndex -1;
var slideshow=new Demo.SlideShow();
The code begins by registering a new namespace called Demo. It then creates a
class called SlideShow. The constructor of the SlideShow class declares four
member variables. The _slides variable points to an array that contains URLs of
the slide images. The _delay variable indicates the time between two slides in
milliseconds. The _currentIndex variable holds index of the current slide from
the _slides array. Finally, the _pause variable indicates if the slide show has
been paused (true) or running (false).
The prototype of SlideShow class defines four properties in terms of getter
and setter methods namely Slides, Delay, CurrentIndex and IsPaused. All the
properties except set_CurrentIndex() need no explanation. The set_CurrentIndex()
property checks the supplied value. If the value is falling outside the bounds
of slides array then it adjusts it either to 0 or (length of array -1) depending
on the condition. This is essential so that the slide show can keep on repeating
The Pause() method simply sets the _pause member variable to true. Doing so
causes the slide show to pause.
The Play() method starts the slide show. It first sets _pause variable to
false and then invokes setTimeout() method of window java script object. The
setTimeout() method accepts two parameters - the code to be executed after
certain delay and time span in milliseconds after which the code is to be
executed. In our case the delay comes from get_Delay() property. The setTimeout()
method is scheduled to call ShowImage() method.
The ShowImage() method performs the core job of displaying an image. It
refers CurrentIndex and Slides properties. It then sets src property of the
image tag to appropriate image from Slides array. Note that Image1 is the ID of
an image tag that we will be adding later. Also note the use of $get() method
that is equivalent to document.getElementById() method. The CurrentIndex is then
incremented and Play() method is called again. This way an endless loop is
formed and the slide show runs contineously.
ShowFirst(), ShowLast(), ShowNext() and ShowPrevious() methods simply adjust
the _currentIndex member variable appropriately and call ShowImage() method to
display a slide.
After the class is created it is registered with AJAX framework using
registerClass() method. Finally, a global variable of SlideShow class is
Creating a Web Form
Open the default web form in Visual Studio IDE. Ensure that it contains a
ScriptManager control. Add an HTML table with two rows and one column. Add a <img>
tag in the first row and six HTML button controls in the second row. The
following figure shows the layout of the web form.
Set the value properties of the six buttons as shown in the above figure.
Now select the ScriptManager control and set its EnablePageMethods property
to true. Also, add the JScript.js file into its Scripts collection (see below).
Creating a web method that returns image URLs
The SlideShow class allows you to specify slides using Slides property. One
way to use Slides property is to assign a fixed array of image URLs. However,
more appropriate approach is to get the image URLs on the fly from the server.
This way you can return images based on some condition or even a database driven
logic. This calls for creating a web method that returns an array of image URLs.
This web method will then be called from the client side java script.
Go in the web form code behind and add the following web method.
public static string GetSlides()
string slides = new string;
slides = "images/slide1.jpg";
slides = "images/slide2.jpg";
slides = "images/slide3.jpg";
slides = "images/slide4.jpg";
The GetSlides() is a static method and is marked with [WebMethod] attribute.
It returns an array of strings containing image URLs. In our example we are hard
coding the image URLs but they can easily come from database or any other data
Calling the GetSlides() web method from java script
Now that we are ready with GetSlides() web method we need to call it from the
client side java script. Switch to the HTML source view and add the following
<script> block in the <HEAD> section of the web form.
The <script> block contains pageLoad() function that is called automatically
by AJAX framework whenever a web form is loaded on the client side. It is like
server side Page_Load event of ASP.NET. The pageLoad() method hides the image.
This is done to avoid displaying the broken image marker by the browser. The
pageLoad() function then invokes GetSlides() web method with the help of
PageMethods inbuilt class. In ASP.NET AJAX all execution is asynchronous and
hence GetSlides() method accepts callback functions that will be called after
successful execution, erroneous execution and timeout conditions respectively.
The OnSuccess() function receives the string array returned by GetSlides()
web method and sets Slides property of SlideShow class accordingly. It then sets
delay of the slide show to 2000 milliseconds. Finally it calls Play() method of
SlideShow class to start the slide show.
The OnError() and OnTimeOut() methods simply display respective error
Next, modify the markup of HTML button controls as shown below:
<input id="Button1" ... onclick="slideshow.ShowFirst()" />
<input id="Button2" ... onclick="slideshow.ShowPrevious()" />
<input id="Button5" ... onclick="slideshow.Pause()"/>
<input id="Button6" ... onclick="slideshow.Play()"/>
<input id="Button3" ... onclick="slideshow.ShowNext()" />
<input id="Button4" ... onclick="slideshow.ShowLast()"/>
As you can see the onclick event of the buttons simply calls respective
methods of the SlideShow class.
That's it! Run the web form and you should see our slide show playing in the