笨笨的熊窝
度尽劫波兄弟在,相逢一笑泯恩仇
posts - 8,  comments - 103,  trackbacks - 4

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

posted on 2007-12-27 10:28 笨笨的考拉熊 阅读(2199) 评论(13)  编辑 收藏

FeedBack:
2007-12-27 10:57 | xiafeng [未注册用户]
谢谢分享!
  回复  引用    
2007-12-27 11:22 | jaycee [未注册用户]
不错,很清楚明白
  回复  引用    
2007-12-27 12:31 | 骑着夕阳看着猪      
呵呵,文章不错,人也很对,佩服你!
  回复  引用  查看    
2007-12-27 23:19 | 啊啊啊啊啊啊啊 [未注册用户]
你好,我在使用的时候遇到些问题,请教一下。我的页面是引用了一个ManageMasterPage,然后我在页面里使用了SlideShowExtender控件,属性设置为ContextKey='<%# strPicPath %>' UseContextKey="true" 。
strPicPath是我通过Page_Load的时候设置的,但是我在GetSlides方法中接受到的这个参数始终文null,不知道是怎么回事?谢谢
  回复  引用    
#5楼 [楼主]
2007-12-28 08:29 | 苯苯的考拉熊      
@啊啊啊啊啊啊啊

你没有仔细看我上面给出的代码:
ContextKey=Value
Value的左右是不带引号的,否则不能认出。这里确实不太完善,因为编译时系统会给出警告提示,但暂时还没有找到更合适的方法。

而且你说strPicPath是通过Page_Load赋值的,而不是我给出的作为属性来用。所以我不太清楚,等到ContextKey取strPicPath时,这个值会不会还在。你可以跟踪调试一下

  回复  引用  查看    
2007-12-28 09:51 | 风海迷沙      
美中不足的是无法实现轮换时的特效.
  回复  引用  查看    
2008-01-14 22:02 | leehao [未注册用户]
可是里面的相片如何加超链接呢,
就是说点正在轮换的相片链到别的url
  回复  引用    
#8楼 [楼主]
2008-01-15 08:14 | 苯苯的考拉熊      
@风海迷沙
这个可以通过修改实现轮换效果的JavaScript来实现,不在本文的讨论范围之内。
  回复  引用  查看    
#9楼 [楼主]
2008-01-15 08:18 | 苯苯的考拉熊      
@leehao
这个需求没做过,以后有需要的话会研究的。
如果做出来的话,我还会写出来的。
  回复  引用  查看    
2008-01-15 22:19 | ewe [未注册用户]
ewwq
  回复  引用    
2008-06-04 18:08 | 雨蕊 [未注册用户]

我用了怎么显示不出来呀!!

  回复  引用    
2008-06-15 02:53 | fightingafdsa [未注册用户]
图象的数据源如果存放在数据库中 请问应该怎么添加
  回复  引用    
#13楼 [楼主]
2008-06-15 07:35 | 笨笨的考拉熊      
存在数据库中的图片,也可以通过网址的方法来显示,如“http://www.web.com/showImage?id=n”,还是直接调用网址即可。
你可以看一下相关资料。
  回复  引用  查看    

标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2007-12-27 13:40 编辑过
 
 

<2008年6月>
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345

与我联系

搜索

 

常用链接

留言簿(1)

我的标签

随笔分类(1)

随笔档案(8)

文章分类(6)

文章档案(7)

积分与排名

  • 积分 - 16392
  • 排名 - 2253

最新随笔

最新评论

阅读排行榜

评论排行榜