Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to use AJAX SlideShowExtender in ASP.NET

Author: Jeff Nava

In this article, we will see how we can use SlideShowExtender of AJAX Control Toolkit in ASP.NET.

 

AJAX SlideShowExtender is a great control to use for slide show in ASP.NET web applications. It gets an Image ID as TargetControlID and displays images according to set time interval.  It is used to looping images as a slide show by using web service method. You can set AutoPlay and Loop attributes as true to auto start and looping procedure. You can also use previous, start/stop and next buttons to in SlideShowExtender control.  
 
  1. Open Visual Studio 2010
  2. File > New > Website
  3. Visual basic or Visual C# > ASP.NET Empty Web Site
  4. Website > Add New Item > Web Form
  5. Open Toolbox > Right Click > Add Tab
  6. Name the Tab As “AJAX Control Toolkit”
  7. Click on Tab > Choose Items
  8. Browse the “AjaxControlToolkit.dll” > Click Ok
  9. I have downloaded and extracted AJAX Control Toolkit in “Ajax” folder in “C” Drive so my path to the file is “C:\Ajax\ AjaxControlToolkit.dll”
  10. Open web form and add a ScriptManager control from “AJAX Extensions” tab.

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
     
    ScriptManager control is necessary when you are using Ajax functionality in your application.
     
  11. Add following CSS class in style tag

    <style type="text/css">
           .image
           {
                  width:600px;
                  height:500Px;
                  border-style:dashed;
                  border-width:thick;
           }
    </style>
     
  12. Add following code in form tag

    <div>
           <asp:ScriptManager ID="ScriptManager1" runat="server">
           </asp:ScriptManager>
           <table>
                  <tr align="center">
                         <td>
                               <asp:Label ID="lblTitle" runat="server" ></asp:Label>
                         </td>
                  </tr>
                  <tr align="center">
                         <td>
                               <asp:Label ID="lblDes" runat="server" ></asp:Label>
                         </td>
                  </tr>
                  <tr align="center">
                         <td>
                               <asp:Image ID="Image1" runat="server" ImageUrl="Images/Hydrangeas.jpg" CssClass="image" />
                         </td>
                  </tr>
                  <tr>
                         <td align="center">
                               <asp:Button ID="btnPrevious" runat="server" Text="Previous" />
                               <asp:Button ID="btnPlay" runat="server" Text="Play" />
                               <asp:Button ID="btnNext" runat="server" Text="Next" />
                         </td>
                  </tr>
           </table>
     
           <ajax:SlideShowExtender ID="SlideShowExtender1" runat="server" AutoPlay="true" TargetControlID="Image1" ImageTitleLabelID="lblTitle" ImageDescriptionLabelID="lblDes" Loop="true" PreviousButtonID="btnPrevious" PlayButtonID="btnPlay" PlayButtonText="Play" StopButtonText="Stop" NextButtonID="btnNext" SlideShowServiceMethod="GetImagesForSlideShow" >
           </ajax:SlideShowExtender>
    </div>
     
    You can see above, I have added a Table. Inside table I have added two Label controls, one image control and three button controls. At the End of the code, you can see that, I have added a SlideShowExtender control. TargetControlID of the SlideShowExtender is the ID of Image control and I have also set ImageTitleLabelID and ImageDescriptionLabelID as well. I have also set AutoPlay and Loop attributes as true. I have also mentioned three button IDs in the SlideShowExtender. SlideShowServiceMethod attribute has the GetImagesForSlideShow() method which is defined below.
     
  13. Add following Web Service method in Code Behind file

    C#
     
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static AjaxControlToolkit.Slide[] GetImagesForSlideShow()
    {
           AjaxControlToolkit.Slide[] images = new AjaxControlToolkit.Slide[3];
           images[0] = new AjaxControlToolkit.Slide("Images/Hydrangeas.jpg", "Hydrangeas", "Hydrangeas");
           images[1] = new AjaxControlToolkit.Slide("Images/Lighthouse.jpg", "Lighthouse", "Lighthouse");
           images[2] = new AjaxControlToolkit.Slide("Images/Tulips.jpg", "Tulips", "Tulips");
           return (images);
    }
     
    VB.NET
     
    <System.Web.Services.WebMethod()> _
    <System.Web.Script.Services.ScriptMethod()> _
    Public Shared Function GetImagesForSlideShow() As AjaxControlToolkit.Slide()
           Dim images As AjaxControlToolkit.Slide() = New AjaxControlToolkit.Slide(2) {}
           images(0) = New AjaxControlToolkit.Slide("Images/Hydrangeas.jpg", "Hydrangeas", "Hydrangeas")
           images(1) = New AjaxControlToolkit.Slide("Images/Lighthouse.jpg", "Lighthouse", "Lighthouse")
           images(2) = New AjaxControlToolkit.Slide("Images/Tulips.jpg", "Tulips", "Tulips")
           Return (images)
    End Function
     
    The above method will return slides for AjaxControlToolkit. We must have to mention first two lines before the method. This method will work as source of slide show in SlideShowExtender.
     
  14. Now see the website in browser

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to copy a SQL Server Database table to another database in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net