码迷,mamicode.com
首页 > Web开发 > 详细

微软Ajax.SlideShowExtender控件使用详解

时间:2016-08-24 12:56:29      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:

原创作者: 佚名

一、实现图片的轮换 首先在网站根目录建立一个文件夹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() 技术分享    

 

这个方法就指明了要轮换的图片的路径,“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); 技术分享 技术分享    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 技术分享    

 

然后修改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等,看是否能够根据不同的参数显示不同张数的图片了。

 

微软Ajax.SlideShowExtender控件使用详解

标签:

原文地址:http://www.cnblogs.com/rancrazy/p/5802049.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!