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

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.

image

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!
image 
Enjoy!
 
Posted on Wednesday, December 12, 2012 9:00 AM | Back to top


Comments on this post: Working with the Ajax Control Toolkit Slideshow

# re: Working with the Ajax Control Toolkit Slideshow
Requesting Gravatar...
Mike. Thx for the above. Do you know if one put a slideshow extender control in a Master Page? I can't get this to work on a master page and from comments made by others it seems to be a problem.
Left by Richard on Aug 15, 2013 10:40 AM

# re: Working with the Ajax Control Toolkit Slideshow
Requesting Gravatar...
It should work assuming you have your ScriptManager tag in the masterpage and the code that populates the collection of images you want to show is in the master page's codebehind file.
Left by Mike on Aug 15, 2013 10:54 AM

# re: Working with the Ajax Control Toolkit Slideshow
Requesting Gravatar...
I am using Chrome. I tried it with IE8 and it will show one slide only.
Left by HowardT on Sep 23, 2013 9:01 AM

# re: Working with the Ajax Control Toolkit Slideshow
Requesting Gravatar...
My code post didn't come through.

I cannot get it to work with Chrome and IE8 shows only one slide.
Left by HowardT on Sep 23, 2013 9:07 AM

# re: Working with the Ajax Control Toolkit Slideshow
Requesting Gravatar...
nice sir..
try this..this is also very helpfful..
http://www.alltechmantra.com/2013/12/how-to-add-ajax-control-toolkit-to-vs-2010.html#.UqRfD_QW1XM
Left by Shubham on Dec 08, 2013 6:04 AM

Your comment:
 (will show your gravatar)


Copyright © Mike Benkovich | Powered by: GeeksWithBlogs.net | Join free