知识大全基于微软ASP.NET AJAX框架开发幻灯片播放网页

Posted 2022-07-17 知

篇首语：别裁伪体亲风雅，转益多师是汝师。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全基于微软ASP.NET AJAX框架开发幻灯片播放网页相关的知识，希望对你有一定的参考价值。

基于微软ASP.NET AJAX框架开发幻灯片播放网页 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　一简介

　　在公司网站中我们经常需要一个基于Web幻灯片形式的机制来演示自己的（也可能是别人的）产品当然你可以使用普通的JavaScript来开发这样的幻灯片但是借助于ASP NET AJAX框架这一开发工作将得到极大简化在本文示例中我们正是想将借助于Web页面方法和客户端脚本扩展技术开发这样一个简单的幻灯片终端用户可以播放和暂停幻灯片也可以进行循环播放还可以手工控制

　　二创建一个ASP NET AJAX Enabled网站

　　启动Visual Studio 然后选择菜单项文件|新建网站… 使用模板 ASP NET AJAX Enabled网站创建一个新的网站并命名工程为SlideShow（选择Visual C#作为内置语言）此后系统应该自动地添加对必要的程序集—System Web Extension dll的参考此外你会注意到一个ScriptManager服务器控件自动地添加到页面中注意这个服务器控件作为整个ASP NET AJAX框架的控制中心

　　然后添加一个具有两行和一列的HTML表格再在第一行添加一个＜img＞标签在第二行添加六个HTML按钮控件下图展示web表单Default aspx的大致布局

　　三创建SlideShow类

　　右单击工程添加一个新的java脚本文件并命名为JScript js 在此我们将创建一个称为SlideShow的类它将负责完成所有的幻灯片操作任务—例如播放暂住和导航幻灯片注意这个SlideShow类的开发是基于ASP NET AJAX客户端脚本扩展技术具体实现代码如下所示

　　Type registerNamespace( Demo ); //构造函数及私有变量声明 Demo SlideShow=function() this _slides=new Array(); this _delay= ; this _currentIndex= ; this _pause=false; //原型定义部分 Demo SlideShow prototype= 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 _slides length ; return; if(value＞=this _slides length) this _currentIndex= ; else this _currentIndex=value; get_IsPaused:function() return this _pause; set_IsPaused:function(value) this pause=value; Pause:function() this _pause=true; Play:function() this _pause=false; window setTimeout( slideshow ShowImage() this get_Delay()); ShowFirst:function() this _currentIndex= ; this ShowImage(); ShowLast:function() this _currentIndex=this _slides length ; this ShowImage(); ShowNext:function() var newIndex=this _currentIndex + ; this set_CurrentIndex(newIndex); this ShowImage(); ShowPrevious:function() var newIndex=this _currentIndex ; this set_CurrentIndex(newIndex); this ShowImage(); ShowImage:function() var img=$get( Image ); if(img style visibility== hidden ) img style visibility= visible ; var slides=this get_Slides(); var curIndex=this get_CurrentIndex(); img src=slides[curIndex]; if(this get_IsPaused()==false) this set_CurrentIndex(curIndex+ ); this Play(); //注册类 Demo SlideShow registerClass( Demo SlideShow ); //创建全局SlideShow类的实例 var slideshow=new Demo SlideShow();

　　在代码的最开始我们先注册一个称为Demo的新的命名空间然后创建一个称为SlideShow的类该SlideShow类的构造器共声明了四个私有成员变量其中 _slides变量指向一个包含幻灯片图像URL的数组 _delay变量指示两张相邻的幻灯片播放的间隔时间（单位为毫秒） _currentIndex变量存储了当前幻灯片在_slides数组中的索引值最后 _pause变量指示幻灯片被暂停(true)还是处于运行态(false)

　　接下来在SlideShow类的原型中我们定义了与前面的四个属性相关联的getter/setter方法也就是Slides Delay CurrentIndex和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()方法的用法它等价于document getElementById()方法然后 CurrentIndex的值加１并且再次调用Play()方法这样以来将形成一个无限循环而幻灯片将持续不断地播放下去

　　最后的四个方法—ShowFirst() ShowLast() ShowNext()和ShowPrevious()方法只是简单地调整_currentIndex成员变量的值并调用ShowImage()方法来显示一张幻灯片

　　在创建类结束后我们使用registerClass()方法把它注册到MS AJAX框架最后声明一个SlideShow类的全局实例变量

　　最后打开Web页面Default aspx 选择ScriptManager控件并且设置它的EnablePageMethods属性为true 而且还要把JScript js文件添加到它的脚本集合中

　　四创建一个返回图像URL的web方法

　　我们前面创建的SlideShow类允许你使用Slides属性来指定幻灯片一种使用Slides属性的方法是创建一个图像URL的常量数组然而更为适当的方法则是从服务器端得到图像URL 通过这种方式你可以基于一些条件或甚至一种数据库驱动的逻辑返回图像这需要我们创建一个能够返回一个图像URL数组的web方法然后从客户端JavaScript脚本中调用这个web方法

　　接下来让我们开始创建下列web方法

　　[WebMethod] public static string[] GetSlides() string[] slides = new string[ ]; slides[ ] = images/slide jpg ; slides[ ] = images/slide jpg ; slides[ ] = images/slide jpg ; slides[ ] = images/slide jpg ; 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 ); img style visibility= hidden ; PageMethods GetSlides(OnSuccess OnError OnTimeOut); function OnSuccess(result) slideshow set_Slides(result); slideshow set_Delay( ); slideshow Play(); function OnError(result) alert(result get_message()); function OnTimeOut(result) alert(result); ＜/script＞

　　任何时候当一个web表单加载到客户端时该＜script＞块包含的pageLoad()函数将被AJAX框架自动调用它非常类似于ASP NET的服务器端Page_Load事件在这个pageLoad()方法中我们用于实现暂时的图像隐藏这样做的目的是为了避免浏览器显示不连续的图像标识然后借助于内置的类—PageMethods pageLoad()函数调用GetSlides() web方法在ASP NET AJAX中所有的执行都是异步的因此 GetSlides()方法将接受一个回调函数—在成功时执行OnSuccess 出现错误时执行OnError 而在超时条件下则执行OnTimeOut

　　在此 OnSuccess()函数接受一个由GetSlides() web方法返回的字符串数组并且相应地设置SlideShow类的Slides属性然后它把幻灯片的延迟播放时间设置为毫秒最后它调用SlideShow类的Play()方法开发播放幻灯片

　　对于OnError()和OnTimeOut()方法它们只用于简单地显示各自相应的错误消息

　　接下来按如下所示修改HTML按钮控件标记

　　＜input id= Button onclick= slideshow ShowFirst() /＞

　　＜input id= Button onclick= slideshow ShowPrevious() /＞

　　＜input id= Button onclick= slideshow Pause() /＞

　　＜input id= Button onclick= slideshow Play() /＞

　　＜input id= Button onclick= slideshow ShowNext() /＞

　　＜input id= Button onclick= slideshow ShowLast() /＞

　　如你所见这些按钮的onclick事件简单地调用SlideShow类的各个方法好了至此整个示例编写结束！最后按F 运行上面的web表单你应该会看到我们的幻灯片在浏览器中开始播放了

　　六小结

cha138/Article/program/net/201311/13136

知识大全 基于微软ASP.NET AJAX框架开发幻灯片播放网页

知识大全基于微软ASP.NET AJAX框架开发幻灯片播放网页