微软Ajax.SlideShowExtender控件使用详解

翻译|其它|编辑:郝浩|2007-12-29 11:08:25.000|阅读 1288 次

概述:

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

      近期因为需要,用到了 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等,看是否能够根据不同的参数显示不同张数的图片了。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:CSDN

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP