微软Ajax.SlideShowExtender控件使用详解

原创作者: 佚名

一、实现图片的轮换 首先在网站根目录建立一个文件夹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);     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等,看是否能够根据不同的参数显示不同张数的图片了。

时间: 2024-10-08 00:08:45

微软Ajax.SlideShowExtender控件使用详解的相关文章

WebBrowser控件使用详解

WebBrowser控件使用详解 方法 说明 GoBack 相当于IE的“后退”按钮,使你在当前历史列表中后退一项 GoForward 相当于IE的“前进”按钮,使你在当前历史列表中前进一项 GoHome 相当于IE的“主页”按钮,连接用户默认的主页 GoSearch 相当于IE的“搜索”按钮,连接用户默认的搜索页面 Navigate 连接到指定的URL Refresh 刷新当前页面 Refresh2 同上,只是可以指定刷新级别,所指定的刷新级别的值来自RefreshConstants枚举表, 

FileUpload上传控件用法详解 (转载)

FileUpload 类显示一个文本框控件和一个浏览按钮,使用户可以选择客户端上的文件并将它上载到 Web 服务器.用户通过在控件的文本框中输入本地计算机上文件的完整路径(例如,C:\MyFiles\TestFile.txt )来指定要上载的文件.用户也可以通过单击“浏览” 按钮,然后在“选择文件” 对话框中定位文件来选择文件. 注意: FileUpload 控件设计为仅用于部分页面呈现期间的回发情况,并不用于异步回发情况.在 UpdatePanel 控件内部使用 FileUpload 控件时,

android L新控件RecyclerView详解与DeMo

介绍 在谷歌的官网我们可以看到它是这样介绍的:RecyclerView is a more advanced and flexible version of ListView. This widget is a container for large sets of views that can be recycled and scrolled very efficiently. Use the RecyclerView widget when you have lists with eleme

VC/MFC中的CComboBox控件使用详解

CComboBox控件详解 CComboBox控件又称作组合框控件,其有三种形态可供选择,1.简单组合框(Simple)2.下拉组合框(Drop-down)3.下拉列表式组合框(Drop-down list). CComboBox控件的常用设置属性说明: type属性:里面一共有三个选项.就是其三种形式, 我们常用的是后两种形态,其区别就是Dropdown的编辑区为可编辑控件,而droplist为静态控件. Data属性:当程序初始化的时候,下拉列表将显示其属性里面的内容,内容用分号分隔.其属性

asp.net分页控件使用详解【附实例下载】

本篇文章主要对asp.net创建事务的方法进行实例介绍,具有很好的参考价值,需要的朋友一起来看下吧 一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer"

android开发之wheel控件使用详解

出门在外生不起病呀,随便两盒药60多块钱.好吧,不废话了,今天我们来看看wheel控件的使用,这是GitHub上的一个开源控件,用起来十分方便,我们可以用它做许多事情,比如做一个自定义的datepicker,在一些电商App中,经常用它来做省市县三级联动,总之用途还是挺多的,我们今天就一起来看看怎么使用这个东东. 我们先来看看今天要做的一个效果图: 这是我们今天要做的效果图.下面就开始吧. 1.获得wheel wheel是GitHub上的一个开源控件,我们可以直接在GitHub上下载,地址htt

安卓通知控件SnackBar详解

安卓开发中常用的控件包括Toast和Dilalog,本文和大家分享则是通知控件SnackBar相关使用,一起来看看吧. Dilalog Dialog的作用是给用户一个提示信息,并让用户根据提示做出判断.而Dialog的特征就是,它会阻止你原本正在进行的操作,必须停止下来对Dialog进行处理.但是,大多数的人可能并不喜欢这样被打断,也许用户正在处理一项重要的操作,突然弹出一个Dialog遮挡住了他原本的操作,这个时候用户会变得很恼火. 因此,使用Dialog的时候还是谨慎一点比较好,尽量不要给用

Android开发之基本控件和详解四种布局方式

Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方式Android和iOS还是区别挺大的,在iOS中有Frame绝对布局和AutoLayout相对布局.而在Android中的布局方式就比较丰富了,今天博客中会介绍四种常用的布局方式.先总结一下控件,然后再搞一搞基本方式,开发环境还是用的Mac下的Android Studio.开始今天的正题, 虽然A

Objective-C:UIScrollView控件和UIPageControl控件的详解

UIScrollView控件和UIPageControl控件: UIScrollView用于显示多于一个屏幕的内容,超出屏幕范围的内容可以通过滑动进行查看,当然UIPagecontrol也能实现图片分页查看. UIScrollView往往搭配UIPageControl一起使用,当UIScrollView进行分页时,UIPagecontrol对应的点也会相应的变动,图片翻转,反之亦然. 一.UIScrollView常见属性: @interface UIScrollView : UIView <NS