近期因为需要,用到了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的说明"),”这一条可以任意添加,需要几张图片就加几条语句。
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager> <asp:SlideShowExtender ID="SlideShowExtender1" runat="server" TargetControlID="Image1" SlideShowServiceMethod="GetSlides" AutoPlay="true" NextButtonID="nextButton" PlayButtonText="Play" StopButtonText="Stop" PreviousButtonID="prevButton" PlayButtonID="playButton" Loop="true" UseContextKey="True"> </asp:SlideShowExtender> <asp:Image ID="Image1" runat="server" Height="300" Style="border: 1px solid black; width: auto" ImageUrl="~/Images/thumbnail.jpg" AlternateText="Blue Hills image" /> <br /> <asp:Button runat="Server" ID="prevButton" Text="上一张" CssClass="opt_sub" /> <asp:Button runat="Server" ID="playButton" Text="播放" CssClass="opt_sub" /> <asp:Button runat="Server" ID="nextButton" Text="下一张" CssClass="opt_sub" />别忘记注册ajax控件,<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
然后还有几个控件参数:
<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); 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等,看是否能够根据不同的参数显示不同张数的图片了。