Geeks With Blogs
Confessions of an Evangelist

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 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.

image  image

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>
        <h1>My Slideshow</h1>

        <asp:Image ID="Image1" runat="server" Height="250" />
        <asp:SlideShowExtender ID="Image1_SlideShowExtender" runat="server" 
Enabled="True" ImageDescriptionLabelID="txtDesc" SlideShowServiceMethod="GetSlides" AutoPlay="true"
NextButtonID="btnNext" PreviousButtonID="btnPrev" TargetControlID="Image1"> </asp:SlideShowExtender> <br /> <asp:Button ID="btnPrev" runat="server" Text="<" /> <asp:Button ID="btnNext" runat="server" Text=">" /> <asp:Label ID="txtDesc" runat="server" Text="Label" /> </form>

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.

namespace myWebApp
    public partial class _default : System.Web.UI.Page
        [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
        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)
                           orderby f.Name
                           select new AjaxControlToolkit.Slide
                               Name = f.Name,
                               ImagePath = "Slides/" + f.Name,
                               Description = f.Name.TrimEnd(".jpeg".ToCharArray())
            return mySlides.ToArray();
Finally we run the application and enjoy the Ajax Slideshow goodness!
Posted on Wednesday, December 12, 2012 9:00 AM | Back to top

Copyright © Mike Benkovich | Powered by: