微软Ajax.SlideShowExtender控件使用详解

微软Ajax.SlideShowExtender控件使用详解（转自：http://www.chinaaspx.com/comm/dotnetbbs/Showtopic.aspx?Forum_ID=5&Id=283946）
2007-12-29
博客园
近期因为需要，用到了Ajax控件库的SlideShowExtender控件。一开始一点不懂，所以依照惯例从baidu
、google上查找，但网上的文章不是转抄微软演示网站的那几行说明文字，就是给个示例，然后说自己用
这个控件做出来了轮换的功能，炫耀一番，没有一个是教别人具体的使用方法的。自己费了一周的时间，终
于用SlideShowExtender实现了自己需要的功能，想到以后可能还有像我一样的朋友，把东西写出来，方便
大家。

多说一句，微软的Ajax控件库有源代码，大家可以参考。我将Ajax控件库的演示网站建在了本地服务器上
，一开始只想到了研究网站的演示，竟忘了还有源代码可以看，浪费了好几天的时间。

一、实现图片的轮换

首先在网站根目录建立一个文件夹Images，存入10张jpg图片，命名为01.jpg-10.jpg。建立 DemoSlideShowExtender.aspx文件，拖拽一个SlideShowExtender控件到页面上。然后添加一个Image
控件，命名为imgPicture，用于显示轮换图片，添加三个Button控件，命名为btnPrevious、btnPlay、btnNext，
分别实现后退、播放/暂停、前进三个功能。

使用SlideShowExtender，官方说明上给出了控件的各个参数设置。但我想所有初学者最想知道的功能，
是如何设置轮换图片内容的方法，但却没有给出，而是语焉不详的写了如下说明：

SlideShowServiceMethod - The webservice method that will be called to supply images.
The signature of the method must match this: 

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod] public AjaxControlToolkit.Slide[] GetSlides() { ... }

反正我是没看懂，还好有源代码可以参考，在DemoSlideShowExtender.aspx中，添加一个方法GetSlides，
内容如下：

＜script runat="Server" type="text/C#"＞
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] GetSlides()
{
return new AjaxControlToolkit.Slide[] { 
new AjaxControlToolkit.Slide("Images/01.jpg", "图片01的标题", "图片01的说明"),
new AjaxControlToolkit.Slide("Images/02.jpg", "图片02的标题", "图片02的说明"),
new AjaxControlToolkit.Slide("Images/03.jpg", "图片03的标题", "图片03的说明"),
new AjaxControlToolkit.Slide("Images/04.jpg", "图片04的标题", "图片04的说明"),
new AjaxControlToolkit.Slide("Images/05.jpg", "图片05的标题", "图片05的说明")}; 
}
＜/script＞
这个方法就指明了要轮换的图片的路径，“new AjaxControlToolkit.Slide("Images/01.jpg", "图片01的标题",
"图片01的说明"),”这一条可以任意添加，需要几张图片就加几条语句。

然后还有几个控件参数：
＜cc1:SlideShowExtender ID="SlideShowExtender1" runat="server"
TargetControlID="imgPicture" //指明要对那个Image控件实现图片轮换效果
SlideShowServiceMethod="GetSlides" //上面给出的指明了轮换图片路径的方法的名称，如果你的方法不是
GetSlides，而是其它名称（比如MySlidesDemo），这里也要改成对应的名称
AutoPlay="true" //是否自动播放
NextButtonID="btnNext" //点击后切换到下一张图片的按钮Id
PlayButtonID="btnPlay" //点击后切换播放/暂停状态的按钮Id
PreviousButtonID="btnPrevious" //点击后切换到前一张图片的按钮Id
PlayButtonText="play" //处于暂停状态时播放/暂停按钮文字
StopButtonText="stop" //处于播放状态时播放/暂停按钮文字
Loop="true" //是否循环显示图片
＞
＜/cc1:SlideShowExtender＞

好了，运行一下，看是否能显示轮换图片了。

二、将代码改放到cs文件中

现在代码是在aspx文件中，与html掺杂在一起，感觉很不爽，把它改放到cs中吧。

在设计视图中，点击SlideShowExtender控件，出现SlideShowExtender Task列表，选择唯一的一项“Add SlideShow page method”。

SlideShowExtender控件属性中会多出一项“ContextKey”，不用管它。
＜cc1:SlideShowExtender ID="SlideShowExtender1" runat="server"＞
ContextKey=""
＜/cc1:SlideShowExtender＞

cs中自动添加如下方法：

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static AjaxControlToolkit.Slide[] GetSlides(string contextKey)
{ 
}

将前面GetSlides中的内容添加到新方法里面

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static AjaxControlToolkit.Slide[] GetSlides(string contextKey)
{ 
return new AjaxControlToolkit.Slide[] { 
new AjaxControlToolkit.Slide("Images/01.jpg", "图片01的标题", "图片01的说明"),
new AjaxControlToolkit.Slide("Images/02.jpg", "图片02的标题", "图片02的说明"),
new AjaxControlToolkit.Slide("Images/03.jpg", "图片03的标题", "图片03的说明"),
new AjaxControlToolkit.Slide("Images/04.jpg", "图片04的标题", "图片04的说明"),
new AjaxControlToolkit.Slide("Images/05.jpg", "图片05的标题", "图片05的说明")}; 
}

然后删除aspx中实现GetSlides方法的＜script runat="Server" type="text/C#"＞＜/script＞代码段。

现在看一下，是否能正常运行。

三、实现动态设置轮换图片

图片轮换实现了，但我需要的是在页面加载时根据具体参数显示不同的一组图片，这个需要修改代码了。

首先假定有一个方法GetImages，这个方法会从Image中随即抽取5张图片，然后存入到List＜MyDemoImage＞对象中（我的代码涉及到很多内容，无法用于示例）。

将Slide中的内容改为

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static AjaxControlToolkit.Slide[] GetSlides(string contextKey)
{ 
List＜MyDemoImage＞ myDemoImages = GetImages(5); 

AjaxControlToolkit.Slide[] slides = new AjaxControlToolkit.Slide[markePictures.Count]; 
for (int i = 0; i ＜ Images.Count; i++)
{
AjaxControlToolkit.Slide slide = new AjaxControlToolkit.Slide("/Images/" + myDemoImages [i].FileName, myDemoImages [i].Title, myDemoImages [i].Description); 
slides[i] = slide; 
}
return slides; 
}
现在已经可以在运行时自动设置轮换图片的内容了。

有时我需要根据参数来设置轮换图片。比如上面的例子，如果需要根据传入参数来决定随即抽取图片的张数。再进行一些改进。

在cs文件中添加一个属性

protected string ContextKey
{
get
{
if (Request.Params["Id"] == null)
{
return "0"; 
}
else
{
return Request.Params["Id"].ToString(); 
}
}
}

然后修改SlideShowExtender控件的ContextKey属性，改为使用页面的公共属性“ContextKey”（这两个 ContextKey不要弄混，一个是SlideShowExtender控件的属性，一个是DemoSlideShowExtender页面的属性）。

＜cc1:SlideShowExtender ID="SlideShowExtender1" runat="server"
ContextKey=＜%# ContextKey %＞
＞
＜/cc1:SlideShowExtender＞

好了，这回带参数调用DemoSlideShowExtender.aspx，如DemoSlideShowExtender.aspx？Id=4，DemoSlideShowExtender.aspx？Id=8等，看是否能够根据不同的参数显示不同张数的图片了。