SlideShow Extender control in ASP.NET Ajax

Introduction

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)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class ImageService : System.Web.Services.WebService
    {
        [WebMethod]
        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.