Show Images in Slide using AJAX Control

Show Images in Slide using AJAX Control

We can use AJAX Slide show extender once load all data in to data table once and assign each images as slide for ajax slide show extender control.

To perform this task we need to write an web service to show the images on image control.

The code snippet is provided below:

Design side:

<asp:SlideShowExtender ID="SlideShowExtender1" runat="server" TargetControlID="Image1" PlayInterval="2000" SlideShowServiceMethod="GetSlides" AutoPlay="true" 
                        NextButtonID="btnNext" PreviousButtonID="btnPrev" PlayButtonID="btnPlay" PlayButtonText="Play"
                        StopButtonText="Stop" Loop="true">
</asp:SlideShowExtender>
 <asp:Button ID="btnPrev" runat="server" Text="Previous" />  <asp:Button
                        ID="btnPlay" runat="server" Text="Play" />  <asp:Button
                            ID="btnNext" runat="server" Text="Next"/>

As i written web service  code in same file, to show just the concept....

The better way is to write/create new web service and write the method in web service to get images array.

Write a Web Service which will 
read the image file paths from the database and create an array of 
AjaxControlToolkit.Slide[]. In the SlideShowServiceMethod propery of the
 SlideShowExtender control specify the web method. 

Code behind:
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.IO;

public partial class _Default : System.Web.UI.Page 
{
    SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["Con"].ConnectionString);
    SqlCommand sqlcmd = new SqlCommand();
    SqlDataAdapter da = new SqlDataAdapter();
    public static DataTable dt = new DataTable();
    string path;  
   
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] GetSlides()
{   
     //Load your data into data table from database once
    //If path is stored in database then use below code 
    if (dt.Rows.Count > 0)
    {
       AjaxControlToolkit.Slide[] imgSlide = new AjaxControlToolkit.Slide[dt.Rows.Count];
        for (int i = 0; i <= dt.Rows.Count - 1; i++)
        {
           imgSlide[i] = new AjaxControlToolkit.Slide(dt.Rows[i][1].ToString(), "", "");
        }
       return (imgSlide);
    }
    else
    {
        AjaxControlToolkit.Slide[] imgSlide1 = new AjaxControlToolkit.Slide[dt.Rows.Count];
        return (imgSlide1);
    }
}   
}
 
 
 This is how it works.......
Thanks..........................