How to create slide show in ASP.NET using AJAX control?
In this article I have explained about how to create Slide show in ASP.NET using AJAX Slideshow extender. User has upload images through the website then I store that image in the server folder (uploads). From the server side code I have pass the image URL to AJAX slide show extender.
Description
For example, In the Industry websites we have launch new product. We need to show that product images to the user, but the images are automatically rotate like Advertisement. So in that situation we can use AJAX slide show extender for dynamically read files from server folder and display images as like Ad rotator Advertisement. And also you can use AJAX Slide show extender whenever you want it in your project.
Code Explanation
Client Side:
In the Client Side of my code I have collect files from user through file upload control.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AJAX Slide Show Example</title>
<style type="text/css">
.btnblue
{
background-color: #033280;
color: White;
font-size: 12px;
font-weight: bold;
width: 80px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<table align="center" width="1000" cellpadding="0" cellspacing="0">
<tr>
<td height="30" colspan="2" align="center">
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" height="50">
<b>AJAX Slide show</b>
</td>
</tr>
<tr>
<td height="30">
Select File to be upload
</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
</td>
</tr>
<tr>
<td colspan="2" height="50" align="center">
<asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" CssClass="btnblue" />
</td>
</tr>
<tr>
<td colspan="2" height="30" align="center">
<asp:Image ID="Image1" runat="server" Height="300px" Width="300px" />
</td>
</tr>
<tr>
<td colspan="2" height="30" align="center">
<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>
</td>
</tr>
<tr>
<td colspan="2" height="30" align="center">
<asp:Button ID="btnPrev" runat="server" Text="Previous" CssClass="btnblue" /> <asp:Button
ID="btnPlay" runat="server" Text="Play" CssClass="btnblue" /> <asp:Button
ID="btnNext" runat="server" Text="Next" CssClass="btnblue" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
In the Above Client side code I have used AJAX Slide show extender, Properties are
TargetControlID: Which image control you want run slide show.
PlayInterval: Set interval time between images specify in millisecond (2000=2 seconds)
SlideShowServiceMethod: This is a webservice method to assign images to slide show extender. SlideShowServiceMethod="GetSlides" this value "GetSlides" name must match with Server side method like this
public static AjaxControlToolkit.Slide[] GetSlides()
{
}
AutoPlay: This property is used to set that slide show images automatically rotate or Manually rotate by user.
Autoplay="true" It will change image automatically specified interval time.
Autoplay="false" It will change image only when user click previous or next button.
NextButtonID: It is used to see "Next" image in the Image control. You can use your next button contol id in this NextButtonID.
PreviousButtonID: It is used to see "Previous" image in the Image control. You can use your Previous button contol id in this PreviousButtonID.
PlayButtonID: Specify your play button control id in this property.
PlayButtonText: This value of text is display on the "PlayButtonID" when slideshow are stopped. For example if your slide show is stopped then "Play" text display on the button. (if you set PlayButtonText="Play")
StopButtonText: This value of text is display on the "PlayButtonID" when slide show are run. For example if your slide show is Play images then "Stop" text display on the button. (if you set PlayButtonText="Stop")
Loop: This is used to set your picture run in loop or not. If you set "True" then your uploaded pictures are repeated otherwise set "False" then your picture not run again only once show all images.
Server Side
I have check file already in the server folder or not, if already available then not save in the server folder again and display Error message "File Already Exists"
//Upload Your Image to the Server
protected void Button1_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
path = Server.MapPath(@"uploads\" + FileUpload1.FileName);
if (System.IO.File.Exists(path))
{
Label1.Text = "File Already Exists";
return;
}
FileUpload1.SaveAs(path);
}
else {
Label1.Text = "Select a file to be upload!";
return;
}
}
And important method GetSlides we need to write in the server side, because I was already mention in client side SlideShowServiceMethod="GetSlides"
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] GetSlides()
{
//Get the server path foldername
string store_folder = HttpContext.Current.Server.MapPath("~/uploads");
//Read the files in that Server Folder
string[] collected_files = System.IO.Directory.GetFiles(store_folder);
int i = 0;
//Get total number of files in the server path folder
int br = collected_files.Length;
//Assign total number of array value for jaxControlToolkit.Slide[] using collected files.Length (above line)
AjaxControlToolkit.Slide[] slide = new AjaxControlToolkit.Slide[br];
//Retrieve each files in the folder and assign it to Slide array
foreach (string file in collected_files)
{
slide[i] = new AjaxControlToolkit.Slide("uploads/" + file.Substring(store_folder.Length + 1), file, i.ToString());
i++;
}
//return collected slides to AJAX Slide show extender.
return slide;
}
Output:
Output of the above code it seems like this
Source code:
Download the attached source code and try it upload new images and check it that new images are display in the AJAX Slide show extender.
Front End: ASP.NET
Code Behind: C#
Conclusion:
I hope this article is help to know about AJAX Slide show extender in ASP.NET.
This example helped me a lot, to find the declaration that I need to know -HttpContext.Current.-
By the way, Do you have an example to use slideshowextender but with a SQL DB?
Thanks!
And keep going with this website!