SlideShow Extender control in ASP.NET Ajax

by V.N.S Arun

Read along as we walk through and create a small sample with the slide show extender which is an important control in the Ajax control kit.


Read along as we walk through the Slide Show extender control which is an important control in the Ajax control kit family by creating a small sample. This is an Ajax extender for an image control which will use the image control for performing the slide show.

It is also possible to implement slide show functionality in a custom fashion using server side code or JavaScript. So what makes the slide show extender favorable than the custom implementations, you may ask?
  1. If you do a server side implementation, the user experience won't be great and also the performance will be horrifying, since each and every request will be posted to the server.
  2. User experience won't be an issue when raw javascript is used. But the amount of coding, complexity and also calling the server code for fetching the images would matter.

Fig 1.0 shows the extender control listed in the Microsoft Visual Studio 2010 toolbox.

Fig 1.0

Slide Show Extender Sample

We will now create a demo ASP.NET application which will use a slider show extender control and create slide show functionality. We will be using Microsoft Visual Studio 2010, Ajax Control Kit 4.0 and .NET Framework 4.0.

Follow the below steps to create the base for our demo application:

  1. Open Microsoft Visual Studio 2010, Goto File' New ' Project ' ASP.NET simple web application.
  2. Name the web application as SlideShowExtenderDemo.
  3. Add a folder named "Images" and add few images to be displayed in the slide show.
  4. Add a folder called "Services" and add a web service (.asmx) file and name it as ImageService.asmx.
  5. Add a new WebForm (.aspx).

ImageService Implementation

Image service is nothing but a Web service. This Web service should expose a WebMethod which will be used by the SlideShow extender control in order to get the set of images involved in the slide show. Below is the code behind of the ASP.NET web service.

using System;
using System.Web;
using System.Web.Services;
using AjaxControlToolkit;

namespace SlideShowExtenderDemo.Service
    /// <summary>
    /// Summary description for ImageService
    /// </summary>
    [WebService(Namespce = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class ImageService : System.Web.Services.WebService

        public Slide[] GetPictures()
            //Create the slide array of length 4, since I have 4 images.
            Slide[] slideArray = new Slide[4];

            //Add the images to the Slide array
            //First parameter of the constructor is the path of the image
            //Second parameter of the constructor is the image title
            //Third parameter of the constructor is the description. 
            //In my case I am not using "Description", so passing it as String.Empty
            slideArray[0] = new Slide(Server.MapPath("~/Pictures/Blue hills.jpg"), "Amazing Blue Hills", String.Empty);
            slideArray[1] = new Slide(Server.MapPath("~/Pictures/Sunset.jpg"), "Wonderful Sunset", String.Empty);
            slideArray[2] = new Slide(Server.MapPath("~/Pictures/Water lilies.jpg"), "Beutiful water lilies", String.Empty);
            slideArray[3] = new Slide(Server.MapPath("~/Pictures/Winter.jpg"), "Frigid Winter", String.Empty); 

            return slideArray;

The basic requirements for the slide show extender web method are:

  1. It can be of any name of our choice.
  2. It can have one string parameter or no parameter. The string parameter will be the context key based on which you can do the image selection.
  3. Return type should be AjaxControlToolkit.Slide[].

Check the code above code and see the images are populated into the slide array. In the above web method I have 4 slides populated in the slide array.

Slide Show Implementation

Once the web service and the service method is ready, lets start with the implementation of the slide show functionality on the web form.
  1. Drag and drop an image control on to the page and set the height and width as required.
  2. Add a label above the image control for displaying the Title text of the displayed image.
  3. Now drag and drop the SlideShow extender control on the Image control.
  4. Drag drop three buttons for Next, Previous and Play/Stop actions.

Below is the HTML code with all the required extender properties set.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SlideShow.aspx.cs" Inherits="SlideShowExtenderDemo.SlideShow" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!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">
    <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            Ajax - Slide Show Demo</h1>
        <br />
        <div style="border-color: inherit; border-width: 1px; border-style: solid; width: 471px;">
            <table style="height: 100%; width: 100%">
                <tr style="width: 100%">
                    <td style="width: 20%;" align="center">
                    <td style="width: 60%" align="center">
                        <asp:Label ID="TitleLabel" runat="server"></asp:Label>
                    <td style="width: 20%" align="center">
                <tr style="width: 100%">
                    <td style="width: 20%;" align="center">
                        <asp:ImageButton ID="PreviousImageButton" runat="server" 
                            ImageUrl="~/Images/Back_h.gif" />
                    <td style="width: 60%" align="center">
                        <asp:Image ID="SlideShowImage" Height="200px" Width="200px" runat="server" /
                        <asp:SlideShowExtender ID="SlideShowExtender_SlideShowImage" 
                                               NextButtonID="NextImageButton"			                                        ImageTitleLabelID="TitleLabel"                                                SlideShowServicePath="~/Service/ImageService.asmx"
                                               UseContextKey="false" runat="server">                        
                    <td style="width: 20%" align="center">
                        <asp:ImageButton ID="NextImageButton" runat="server" 
                            ImageUrl="~/Images/Forward_h.gif" />
                <tr style="width: 100%">
                    <td style="width: 20%;" align="center">
                    <td align="center" style="width: 60%">
                        <asp:Button ID="PlayButton" runat="server" />
                    <td align="center" style="width: 20%">

Now go ahead and run the application. You can see the slideshow of images is on and is being played. Fig 2.0 shows the output page.

Fig 2.0

SlideShow Extender Attribute Description

Below are the brief descriptions for the attributes used in the the slideShow extender control of the above sample.

  1. TargetControlID: The ID of the image control which will be used for displaying the slide show images.
  2. AutoPlay: Boolean value indicating whether the slide show should be in "Play" mode on load of the page or by default.
  3. Loop: Boolean value indicating whether the slide show should loop through the images again and again continuously.
  4. PlayButtonID: The ID of the button for performing Play/Stop.
  5. PlayButtonText: The text that will be displayed on the play button during "Stop" mode.
  6. StopButtonText: The text that will be displayed on the play button during "Play" mode.
  7. PreviousButtonID: The ID of the button for displaying previous image.
  8. NextButtonID: The ID of the button for displaying next image.
  9. ImageTitleLabelID: The ID of the label where the image title has to be displayed.
  10. SlideShowServicePath: The path of ImageService.asmx.
  11. SlideShowServiceMethod: The web method name returning the Slide[].
  12. UseContextKey: Boolean value indicating whether a context key should be used or not for retrieving the images.


I hope this article has highlighted enough of the Slide Show Extender control and eased your implementation or improved the look/feel of the slide show functionality.

As usual I have attached the demo project along with this article. Happy reading! See you in my next article.

Related Articles

This article was originally published on Thursday Aug 12th 2010
Mobile Site | Full Site