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.
- 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.
Fig 1.0 shows the extender control listed in the Microsoft Visual Studio 2010 toolbox.
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:
- Open Microsoft Visual Studio 2010, Goto File’ New ‘ Project ‘ ASP.NET simple web application.
- Name the web application as
- Add a folder named “Images” and add few images to be displayed in the slide show.
- Add a folder called “Services” and add a web service (
.asmx) file and name it as
- Add a new WebForm (.aspx).
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.
/// Summary description for ImageService
[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;
//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 = new Slide(Server.MapPath(“~/Pictures/Blue hills.jpg”), “Amazing Blue Hills”, String.Empty);
slideArray = new Slide(Server.MapPath(“~/Pictures/Sunset.jpg”), “Wonderful Sunset”, String.Empty);
slideArray = new Slide(Server.MapPath(“~/Pictures/Water lilies.jpg”), “Beutiful water lilies”, String.Empty);
slideArray = new Slide(Server.MapPath(“~/Pictures/Winter.jpg”), “Frigid Winter”, String.Empty);
The basic requirements for the slide show extender web method are:
- It can be of any name of our choice.
- 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.
- 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.