Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique used for interactive websites. With AJAX help we can develop web applications and retrieve small amounts of data from a web server. AJAX consists of a different type of technology.

SliderShowExtender

SlideShow is an extender that targets image controls. You can provide it with buttons to hit previous, next and play. The Slideshow is to play automatically on rendering, allowing it to loop through the images in a round robin fashion and also set the interval for slide transitions. You can use a page method to supply images to the slide show or use a webservice.

Property

Step 1 : Open Visual Studio 2010

Step 2 : Go to Solution Explorer and right-click.

Step 3 : Open Default.aspx page and click in [Design option].

Step 4 : Now go to the Solution Explorer and make image folder "Raj" and image.

myimage3.gif

Step 5 : Now go to the Default.aspx [Design] option and drag the image control from the Toolbox.

Code

<asp:Image ID="Image1" runat="server" ImageUrl="~/raj/Chrysanthemum.jpg" Width="300px" />

Step 6 : Now drag SliderShowExtender control from the Toolbox.

myimage5.gif

Step 7 : Now we define all properties for the sliderShowcontrol.

Code

<asp:SlideShowExtender ID="SlideShowExtender1" runat="server" TargetControlID="Image1" AutoPlay="true" NextButtonID="Button1" PreviousButtonID="Button2" ImageDescriptionLabelID="Label1" SlideShowServiceMethod="Slides" PlayButtonID="Button3" PlayButtonText="Play"
Loop="true">
 </asp:SlideShowExtender>

Step 8 : Go to the Default.aspx[Source] option to write code.

Code

<title> my ajax application </title>
 <style type="text/css">
 body
 {
margin:50px 0px; padding:0px;
text-align:center;
}
.Image
 {
width:475px;
margin:0px auto;
text-align:center;
padding:20px;
border:1px dashed gray;
background-color:Silver;
}
</style>
</head>
<body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
 <div class= "Image">
 <asp:Image ID="Image1" runat="server" ImageUrl="~/raj/Chrysanthemum.jpg" Width="300px" />
 </div>
 <div>
 <asp:Label ID="Label1" runat="server" Text="my image"></asp:Label>
 <asp:Button ID="Button1" runat="server" Text="Next" />
 <asp:Button ID="Button2" runat="server" Text="Prev" />
 <asp:Button ID="Button3" runat="server" Text="Button" />
 </div>
 <asp:SlideShowExtender ID="SlideShowExtender1" runat="server" TargetControlID="Image1" AutoPlay="true" NextButtonID="Button1" PreviousButtonID="Button2" ImageDescriptionLabelID="Label1" SlideShowServiceMethod="Slides" PlayButtonID="Button3"
PlayButtonText="Play" Loop="true">
 </asp:SlideShowExtender>
 </form>

Step 9 : Go to the Default.aspx.cs file option to write code.

Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] Slides()
{
AjaxControlToolkit.Slide[] imgSlide = new AjaxControlToolkit.Slide[4];
imgSlide[0] = new AjaxControlToolkit.Slide("~/raj/Hydrangeas.jpg", "Hydrangeas ","Hydrangeas");
imgSlide[1] = new AjaxControlToolkit.Slide("~/raj/Jellyfish.jpg", "Jellyfish","Jellyfish " );
imgSlide[2] = new AjaxControlToolkit.Slide("~/raj/Koala.jpg", "Koala", "Koala");
imgSlide[3] = new AjaxControlToolkit.Slide("~/raj/Penguins.jpg", "Penguins","Penguins");
return (imgSlide);
}
}

Step 10 : Now we define the CSS.

Code
<style type="text/css">
 body
 {
margin:50px 0px; padding:0px;
text-align:center;
}
.Image
 {
width:475px;
margin:0px auto;
text-align:center;
padding:20px;
border:1px dashed gray;
background-color:Silver;
}
</style>

Step 11 : Now run the application by pressing F5.

my image.gif

Step 12 : Now click on the next Button; the following output will be shown.

my image2.gif

Resource

AJAX Rating Control
DropShadowExtender Control in AJAX Using ASP.NET
RangeValidator Control With AJAX Using ASP.NET
ConfirmButtonExtender Control With AJAX Using ASP.NET