一简介
在公司网站中我们经常需要一个基于Web幻灯片形式的机制来演示自己的（也可能是别人的）产品当然你可以使用普通的JavaScript来开发这样的幻灯片但是借助于ASPNET AJAX框架这一开发工作将得到极大简化在本文示例中我们正是想将借助于Web页面方法和客户端脚本扩展技术开发这样一个简单的幻灯片终端用户可以播放和暂停幻灯片也可以进行循环播放还可以手工控制
二创建一个ASPNET AJAXEnabled网站
启动Visual Studio 然后选择菜单项文件|新建网站…使用模板ASPNET AJAXEnabled网站创建一个新的网站并命名工程为SlideShow（选择Visual C#作为内置语言）此后系统应该自动地添加对必要的程序集—SystemWebExtensiondll的参考此外你会注意到一个ScriptManager服务器控件自动地添加到页面中注意这个服务器控件作为整个ASPNET AJAX框架的控制中心
然后添加一个具有两行和一列的HTML表格再在第一行添加一个＜img＞标签在第二行添加六个HTML按钮控件下图展示web表单Defaultaspx的大致布局
三创建SlideShow类
右单击工程添加一个新的java脚本文件并命名为JScriptjs在此我们将创建一个称为SlideShow的类它将负责完成所有的幻灯片操作任务—例如播放暂住和导航幻灯片注意这个SlideShow类的开发是基于ASPNET AJAX客户端脚本扩展技术具体实现代码如下所示
TyperegisterNamespace(Demo);//构造函数及私有变量声明 DemoSlideShow=function(){this_slides=new Array();this_delay=;this_currentIndex=;this_pause=false;}//原型定义部分 DemoSlideShowprototype={get_Slides:function() {return this_slides;}set_Slides:function(value) {this_slides=value;}get_Delay:function() {return this_delay;}set_Delay:function(value) {this_delay=value;}get_CurrentIndex:function() {return this_currentIndex;}set_CurrentIndex:function(value) {if(value＜) {this_currentIndex=this_slideslength;return;}if(value＞=this_slideslength) {this_currentIndex=;}else{this_currentIndex=value;}}get_IsPaused:function() {return this_pause;}set_IsPaused:function(value) {thispause=value;}Pause:function() {this_pause=true;}Play:function() {this_pause=false;windowsetTimeout(slideshowShowImage()thisget_Delay());}ShowFirst:function() {this_currentIndex=;thisShowImage();}ShowLast:function() {this_currentIndex=this_slideslength;thisShowImage();}ShowNext:function() {var newIndex=this_currentIndex +;thisset_CurrentIndex(newIndex);thisShowImage();}ShowPrevious:function(){var newIndex=this_currentIndex ;thisset_CurrentIndex(newIndex);thisShowImage();}ShowImage:function() {var img=$get(Image);if(imgstylevisibility==hidden) {imgstylevisibility=visible;}var slides=thisget_Slides();var curIndex=thisget_CurrentIndex();imgsrc=slides[curIndex];if(thisget_IsPaused()==false){thisset_CurrentIndex(curIndex+);thisPlay();}}}//注册类 DemoSlideShowregisterClass(DemoSlideShow);//创建全局SlideShow类的实例 var slideshow=new DemoSlideShow();
在代码的最开始我们先注册一个称为Demo的新的命名空间然后创建一个称为SlideShow的类该SlideShow类的构造器共声明了四个私有成员变量其中_slides变量指向一个包含幻灯片图像URL的数组_delay变量指示两张相邻的幻灯片播放的间隔时间（单位为毫秒）_currentIndex变量存储了当前幻灯片在_slides数组中的索引值最后_pause变量指示幻灯片被暂停(true)还是处于运行态(false)
接下来在SlideShow类的原型中我们定义了与前面的四个属性相关联的getter/setter方法也就是SlidesDelayCurrentIndex和IsPaused其它方法都比较基本因此我们仅介绍方法set_CurrentIndex()这个set_CurrentIndex()属性方法负责检查提供给它的索引值如果该值超出slides数组上下标边界那么它会把这个值调整到或数组的长度减（根据具体情况而定）这是很关键的这样以来幻灯片就可以进行循环播放
接下来Pause()方法简单地把成员变量_pause设置为true—这可以控制幻灯片如何暂停
Play()方法负责播放幻灯片它首先设置_pause变量为false然后调用JavaScript对象windows的setTimeout()方法该setTimeout()方法接受两个参数在经过特定时间延迟后要执行的代码在此代码执行完后对应的时间跨度（单位为毫秒）在本例中这个延迟值来自于get_Delay()属性在此该setTimeout()方法将调用ShowImage()方法
ShowImage()方法负责执行显示一个图像的核心工作它引用了CurrentIndex和Slides两个属性然后把图像标签的src属性设置为Slides数组中对应的适当的图像注意Image是一个图像标签的ID—我们将在后面添加它此外还应注意$get()方法的用法它等价于documentgetElementById()方法然后CurrentIndex的值加１并且再次调用Play()方法这样以来将形成一个无限循环而幻灯片将持续不断地播放下去
最后的四个方法—ShowFirst()ShowLast()ShowNext()和ShowPrevious()方法只是简单地调整_currentIndex成员变量的值并调用ShowImage()方法来显示一张幻灯片
在创建类结束后我们使用registerClass()方法把它注册到MS AJAX框架最后声明一个SlideShow类的全局实例变量
最后打开Web页面Defaultaspx选择ScriptManager控件并且设置它的EnablePageMethods属性为true而且还要把JScriptjs文件添加到它的脚本集合中
四创建一个返回图像URL的web方法
我们前面创建的SlideShow类允许你使用Slides属性来指定幻灯片一种使用Slides属性的方法是创建一个图像URL的常量数组然而更为适当的方法则是从服务器端得到图像URL通过这种方式你可以基于一些条件或甚至一种数据库驱动的逻辑返回图像这需要我们创建一个能够返回一个图像URL数组的web方法然后从客户端JavaScript脚本中调用这个web方法
接下来让我们开始创建下列web方法
[WebMethod]public static string[] GetSlides(){string[] slides = new string[];slides[] = images/slidejpg;slides[] = images/slidejpg;slides[] = images/slidejpg;slides[] = images/slidejpg;return slides;
注意这个GetSlides()是一个静态方法并且被标记有[WebMethod]属性它返回一个包含图像URL的字符串数组在这个示例中我们对图像URL进行了硬编码但是你可以很容易地把它修改为使用数据库或任何其它方式来存储图像数据
五从JavaScript脚本中调用GetSlides() web方法
现在既然我们已经准备好GetSlides() Web方法那么接下来我们需要从客户端JavaScript脚本中调用它现在切换到Web页面的HTML源视图并且在web表单的＜HEAD＞节中添加下列＜script＞块
＜script type=text/javascript＞function pageLoad(){var img=$get(Image);imgstylevisibility=hidden;PageMethodsGetSlides(OnSuccessOnErrorOnTimeOut);}function OnSuccess(result){slideshowset_Slides(result);slideshowset_Delay();slideshowPlay();}function OnError(result){alert(resultget_message());}function OnTimeOut(result){alert(result);}＜/script＞
任何时候当一个web表单加载到客户端时该＜script＞块包含的pageLoad()函数将被AJAX框架自动调用它非常类似于ASPNET的服务器端Page_Load事件在这个pageLoad()方法中我们用于实现暂时的图像隐藏这样做的目的是为了避免浏览器显示不连续的图像标识然后借助于内置的类—PageMethodspageLoad()函数调用GetSlides() web方法在ASPNET AJAX中所有的执行都是异步的因此GetSlides()方法将接受一个回调函数—在成功时执行OnSuccess出现错误时执行OnError而在超时条件下则执行OnTimeOut
在此OnSuccess()函数接受一个由GetSlides() web方法返回的字符串数组并且相应地设置SlideShow类的Slides属性然后它把幻灯片的延迟播放时间设置为毫秒最后它调用SlideShow类的Play()方法开发播放幻灯片
对于OnError()和OnTimeOut()方法它们只用于简单地显示各自相应的错误消息
接下来按如下所示修改HTML按钮控件标记
＜input id=Button onclick=slideshowShowFirst() /＞
＜input id=Button onclick=slideshowShowPrevious() /＞
＜input id=Button onclick=slideshowPause()/＞
＜input id=Button onclick=slideshowPlay()/＞
＜input id=Button onclick=slideshowShowNext() /＞
＜input id=Button onclick=slideshowShowLast()/＞
如你所见这些按钮的onclick事件简单地调用SlideShow类的各个方法
好了至此整个示例编写结束！最后按F运行上面的web表单你应该会看到我们的幻灯片在浏览器中开始播放了
六小结
再次想说的是本文中的例子仅展示了微软ASPNET Ajax 框架编程的非常基础的一面如果你真对这个框架感兴趣那么请抓紧动手试一下吧！
