I had a request yesterday to put together a slideshow on a website we’re working on. That reminded me that there is a great collection of controls and tools available (for free) on Codeplex in the http://ajaxcontroltoolkit.codeplex.com/ site. I had used it a few years ago to build a slideshow for a site for my parent’s class reunion and it worked well then, I was curious how it’d work with .NET 4.5 and the new frameworks.
First thing was that instead of downloading the project and creating a tab in the toolbox, adding items, you can now add the latest toolkit as a NuGet package. In VS 2010 and in 2012 you can right click on the project file in the solution explorer and select “Manage NuGet Packages”. It opens a window where you can find and install the packages you’re interested in.
Once you’ve installed it open the page you want to play the slide show on and add the Toolkit Script Manager and an ASP.NET Image control. When you add a control to a page that has the script manager a smart tag is displayed that will let you add extension behaviors to it. In our case I added the Slideshow Extender.
This will add a tag to the source that includes the slideshow extender with the core properties set. We still need to set up a few more properties and create a method to retrieve the set of images we want to display.
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<asp:Image ID="Image1" runat="server" Height="250" />
<asp:SlideShowExtender ID="Image1_SlideShowExtender" runat="server"
<asp:Button ID="btnPrev" runat="server" Text="<" />
<asp:Button ID="btnNext" runat="server" Text=">" />
<asp:Label ID="txtDesc" runat="server" Text="Label" />
In this example I’m specifying the height of the images for the slideshow to be 250px and I’ve included buttons for previous and next and a label to hold the slide name. The method for the “SlideShowServiceMethod” will be defined in the code behind to pull from a directory with images that I want to include called “slides”. This is implemented in the code behind file.
public partial class _default : System.Web.UI.Page
public static AjaxControlToolkit.Slide GetSlides()
string mySlideDir = AppDomain.CurrentDomain.BaseDirectory + "Slides";
DirectoryInfo di = new DirectoryInfo(mySlideDir);
var mySlides = from f in di.GetFiles("*.jpg", SearchOption.TopDirectoryOnly)
select new AjaxControlToolkit.Slide
Name = f.Name,
ImagePath = "Slides/" + f.Name,
Description = f.Name.TrimEnd(".jpeg".ToCharArray())
Finally we run the application and enjoy the Ajax Slideshow goodness!