Dynamically Add ASP.NET AJAX SlideShow Extender User Control on Button click event of aspx page

In ASP.NET AJAX Control toolkit there is an extender known as SlideShowExtender. AJAX SlideShow extender takes the ID of image control of ASP.Net to display the images in it according to the time interval fixed for it. You can also specify the auto start event to change the images in SlideShow extender when the page loads. Also you can enable the loop to run the SlideShow in continuous manner that loads the first image again after displaying the last image and plays the SlideShow repeatedly.

The AJAX SlideShow extender also has features to associate Button controls of ASP.Net  to stop/play or viewing the next and previous image in the slide show. Associated button controls allow the users to stop the automated running Slide show and view the images manually by using next/ previous buttons.

AJAX SlideShowExtender Properties

TargetControlID: ID of the Image control to display the images of SlideShow program.AutoPlay: Enables the feature to start to SlideShow automatically when page loads.ImageTitleLabelID: ID of the Label control to display the Title/Name of the image.ImageDescriptionLabelID: ID of the Label control to display the Description of the image.NextButtonID: ID of the Button control to view the next image.PlayButtonID: ID of the Button to play the SlideShow. Play Button performs the two functions. When user clicks on play button it plays the slide show and changes the text of the Play Button according to the property of AJAX SlideShow extender StopButtonText. When user again clicks on the PlayButton it stops the SlideShow.PlayButtonText: Text to be displayed on the PlayButton e.g.: PlayStopButtonText: Text to be displayed on the PlayButton to stop the SlideShow. By Default PlayButton displays the PlayButtonText when user clicks the PlayButton to view the Slide Show then its Text changes to StopButtonText.PreviousButtonID: ID of the Button to view the previous image.Loop: If Loop is set to true then it plays the SlideShow in repeat/continuous order.SlideShowServiceMethod: Name of the page script web service method to pass the array of Slide Show images,You can use any method name for WebMethod but its return type should be of AjaxControlToolkit.Slide[].Sample Example:1.Create one UserControl  for AJAX SlideShow extender as shown in the figFig1:Design Code For Slideshow extender UserControl Design Code<%@ Control Language=”C#” AutoEventWireup=”true” CodeFile=”Animation.ascx.cs” Inherits=”Animation” %>
<%@ Register Assembly=”AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e”
    Namespace=”AjaxControlToolkit” TagPrefix=”cc1″ %><div>
        <!–Add a script manager in your page –>
        <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
        </asp:ScriptManager>
        <asp:UpdatePanel ID=”UpdatePanel1″ runat=”server”>
        <ContentTemplate>
        <center>
            <!–This is the initial image that will be shown to the user –>
             <asp:Image ID=”ImagePlayer” runat=”server” ImageUrl=”~/image/loading.gif”/>
             <br />
             <!–Previous, Next Button to see the previous, next image and Play and  stop button to start and stop the  slide show –>
             <asp:Button ID=”btnBack” runat=”server” Text=”Back” />
             <asp:Button ID=”btnPlay” runat=”server” Text=”Play” />
             <asp:Button ID=”btnNext” runat=”server” Text=”Next” /><br />
            <!–Drag and Drop a SlideShowExtender –> 
             <cc1:SlideShowExtender ID=”SlideShowExtender1″ runat=”server” TargetControlID=”ImagePlayer”
                 Loop=”true” NextButtonID=”btnNext” AutoPlay=”true” PlayButtonID=”btnPlay” PlayButtonText=”Play”
                PreviousButtonID=”btnBack” SlideShowServicePath=”SlideShowService.asmx” SlideShowServiceMethod=”GetSlides”
                StopButtonText=”Pause”  PlayInterval=”500″ >
             </cc1:SlideShowExtender>
             <br />
         </center>
         </ContentTemplate>
         </asp:UpdatePanel>
</div> 2.Create SlideService.asmx web service create a Web method  its return type should be of AjaxControlToolkit.Slide[].You must use [System.Web.Script.Services.ScriptMethod] to allow the SlideShowExtender to access the WebMethod.C# WebService Method Code using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.IO;
using System.Collections;/// <summary>
/// Summary description for SlideShowService
/// </summary>
[WebService(Namespace = “http://tempuri.org/”)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class SlideShowService : System.Web.Services.WebService {    public SlideShowService () {        //Uncomment the following line if using designed components
        //InitializeComponent();
    }    #region Get Image Path For Slideshow
    [WebMethod(EnableSession = true)]
    public AjaxControlToolkit.Slide[] GetSlides()
    {
        AjaxControlToolkit.Slide[] mySlides;
        try
        {
            string FolderPath = Convert.ToString(Application[“FolderPath”]);
            int strStart = Convert.ToInt32(Application[“Start”]);
            int strEnd = Convert.ToInt32(Application[“End”]);
            int size = 0, cnt = 0,cnt1 = 0;            if (strStart > strEnd) { cnt = strEnd; cnt1 = strStart; size = strStart – strEnd; }
            else if (strStart < strEnd) { cnt = strStart; cnt1 = strEnd; size = strEnd – strStart; }
            else { cnt = strStart; cnt1 = strEnd; size = 1; }            mySlides = new AjaxControlToolkit.Slide[size + 1];
            FolderPath = FolderPath.Substring(FolderPath.IndexOf(“/”) + 1);
            for (int i = cnt, j = 0; i <= cnt1; i++)
            {
                string filename = i + “.jpg”;
                string strFilePath = FolderPath + filename;
                mySlides[j] = new AjaxControlToolkit.Slide(strFilePath, filename, filename);
                j++;               
             }
           }
            catch (Exception ex)
            {
                 mySlides = new AjaxControlToolkit.Slide[1];
                 mySlides[0] = new AjaxControlToolkit.Slide(“image/NoImage.jpg”, “NoImage”, “NoImage”);
            }
        return mySlides;
    }
    #endregion}

3.Now Dynamically Add Slideshow User Control on Button click event of aspx page C# Code#region Dynamically Add Animation User Control
    protected void btnAnimation_Click(object sender, EventArgs e)
    {
        try
        {
            stStart = txtStartDate.Text;
            stEnd = txtEndDate.Text;            string strParam = ddParameter.SelectedItem.Value.ToString();
            GetFolderPath(strParam);            string strDate = txtStartDate.Text;
            string st1 = strDate.Substring(0, 2);
            string st2 = strDate.Substring(3, 2);
            string st3 = strDate.Substring(6, 4);
            Application[“Start”] = st3 + st2 + st1;            string strEnd = txtEndDate.Text;
            string st4 = strEnd.Substring(0, 2);
            string st5 = strEnd.Substring(3, 2);
            string st6 = strEnd.Substring(6, 4);
            Application[“End”] = st6 + st5 + st4;            string UserControlPath = “~/Animation.ascx”;
            UserControl LoadedControl = new UserControl();
            PlaceHolder1.Controls.Add(LoadedControl.LoadControl(UserControlPath));
        }
        catch (Exception ex)
        {        }
        finally
        {
            txtStartDate.Text=stStart;
            txtEndDate.Text=stEnd;
        }
    }
    #endregion

Now select start and end date in calendar control and click Start Animation button.

Thats it…Njoy!!

This entry was posted in ASP.Net. Bookmark the permalink.

2 Responses to Dynamically Add ASP.NET AJAX SlideShow Extender User Control on Button click event of aspx page

  1. Arunkumar says:

    Hi…..
    can u send me code of click event on images or slides..

Leave a comment