Introduction:
Today I am going to show you the very useful sample and that is Slide show.I am showing you how to show slideshow using ajax.After Saving the images into the Folder we will going to use that images in Slide Show.
First you have to add ajax toolkit to your Project by adding a reference.
Then add a webpage Default.aspx to your project.and also make one folder name Images into project and put some images into the folder.
Default.aspx Page
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AJAX Slidshow Example</title>
<style type="text/css">
.Buttoncss
{
border: solid 1px #c0c0c0;
background-color: silver;
color: #ffffff;
cursor: pointer;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="scriptmanager1" runat="server">
</ajax:ToolkitScriptManager>
<div>
<table style="border: Solid 3px green; width: 400px; height: 400px" cellpadding="0"
cellspacing="0">
<tr style="background-color: #33CC33">
<td style="height: 10%; color: White; font-weight: bold; font-size: larger" align="center">
<asp:Label ID="lblTitle" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Image ID="imgslides" runat="server" Height="400px" Width="600px" />
</td>
</tr>
<tr>
<td align="center">
<asp:Label ID="lblimgdesc" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="btnPrevious" runat="server" Text="Prev Image" CssClass="Buttoncss" />
<asp:Button ID="btnPlay" runat="server" Text="Play" CssClass="Buttoncss" />
<asp:Button ID="btnNext" runat="server" Text="Next Image" CssClass="Buttoncss" />
</td>
</tr>
</table>
<ajax:SlideShowExtender runat="server" AutoPlay="true" ImageTitleLabelID="lblTitle"
ImageDescriptionLabelID="lblimgdesc" Loop="true" NextButtonID="btnNext" PreviousButtonID="btnPrevious"
PlayButtonID="btnPlay" PlayButtonText="Play" StopButtonText="Stop" TargetControlID="imgslides"
SlideShowServicePath="Slideshow.asmx" SlideShowServiceMethod="GetSlides">
</ajax:SlideShowExtender>
</div>
</form>
</body>
</html>
Now you have to Add the webservice by right click on project and Add the Item Webservice called
SlideShow.asmx then remove the SlideShow.asmx.cs file just keep
SlideShow.asmx and put the class file of it in
App_Code Folder.for that you have to create App_Code Folder by right click on Project And add the Folder and add the SlideShow.cs file in it.
PlayButtonID - ID of the button that will allow you to play/stop the slideshow.
PlayButtonText - The text to be shown in the play button to play the slideshow.
StopButtonText - The text to be shown in the play button to stop the slideshow.
PreviousButtonID - ID of the button that will allow you to see the previous picture.
NextButtonID - ID of the button that will allow you to see the next picture.
PlayInterval - Interval in milliseconds between slide transitions in play mode.
ImageTitleLabelID - ID of Label displaying current picture's title.
ImageDescriptionLabelID - ID of Label describing current picture.
Loop - Setting this to true will allow you to view images in a round-robin Pattern.
AutoPlay - Setting this to true will play the slideshow automatically on render.
SlideShowServicePath - Path to the webservice that the extender will pull the images from.
SlideShowServiceMethod - The webservice method that will be called to supply images
Here we need to remember one point that is we need to write webmethods like following Pattern.
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public AjaxControlToolkit.Slide[] GetSlides()
{
……
……
}
Here I have used the .Buttoncss for Next,Previous and Play Button
SlideShow.cs Page Code
using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
[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 Slideshow : System.Web.Services.WebService
{
public Slideshow()
{
//Uncomment the following line if using designed components
//InitializeComponent();
}
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public AjaxControlToolkit.Slide[] GetSlides()
{
string[] imagenames = System.IO.Directory.GetFiles(Server.MapPath("~/Images"));
AjaxControlToolkit.Slide[] photos = new AjaxControlToolkit.Slide[imagenames.Length];
for (int i = 0; i < imagenames.Length; i++)
{
string[] file = imagenames[i].Split('\\');
photos[i] = new AjaxControlToolkit.Slide("Images/" + file[file.Length - 1], file[file.Length - 1], "");
}
return photos;
}
}
SlideShow.asmx code
<%@ WebService Language="C#" CodeBehind="~/App_Code/Slideshow.cs" Class="Slideshow" %>
In SlideShow.asmx Page CodeBehind Specify the class file SlideShow which we put in App_Code folder and in that all the Logic of slide show is there.
string[] imagenames = System.IO.Directory.GetFiles(Server.MapPath("~/Images")); //This will Fetch all the Images from the Images Folder
AjaxControlToolkit.Slide[] photos = new AjaxControlToolkit.Slide[imagenames.Length];
//This will store the all the photos in photos object.
for (int i = 0; i < imagenames.Length; i++)
{
string[] file = imagenames[i].Split('\\');
photos[i] = new AjaxControlToolkit.Slide("Images/" + file[file.Length - 1], file[file.Length - 1], "");
}
return photos;
This Loop will rounded by number of Images.Photos[i] contains images information.Name,ImagePath and its Description.
new AjaxControlToolkit.Slide("Images/" + file[file.Length - 1], file[file.Length - 1], "");
This contains three parameter.
1.Image Path
2.Image Name
3.Image Description.Here I just pass Empty string in Image Description but you can pass this Parameter.
Download the Sample Code from Here
