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

一、 简介
    最近，微软ASP.NET Ajax 1.0框架以其完整的基于Ajax的web开发方案呈现在web技术人员的前面，凭借与遗留ASP.NET系统的有机整合以及完全面向对象的客户端JavaScript组件模型两大绝杀正在引起越来越多的基于.NET平台的web开发者的关注。本文应该属于这个框架的基础篇，我想通过一个具体的例子（播放web幻灯片）来向读者展示如何使用该框架提供的面向对象的客户端JavaScript组件模型来进行常规的WEB开发。

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

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

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

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

   
   
   
   

    
    
    
    
    Type.registerNamespace(
    
    
    
    "
    
    
    
    Demo
    
    
    
    "
    
    
    
    ); 
    
    
    
    //
    
    
    
    构造函数及私有变量声明 
    
    
    
     
    
    
    
    Demo.SlideShow
    
    
    
    =
    
    
    
    function(){ 
    
    
    
    this
    
    
    
    ._slides
    
    
    
    =
    
    
    
    new
    
    
    
     Array(); 
    
    
    
    this
    
    
    
    ._delay
    
    
    
    =
    
    
    
    2000
    
    
    
    ; 
    
    
    
    this
    
    
    
    ._currentIndex
    
    
    
    =
    
    
    
    0
    
    
    
    ; 
    
    
    
    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
    
    
    
    <
    
    
    
    0
    
    
    
    ) { 
    
    
    
    this
    
    
    
    ._currentIndex
    
    
    
    =
    
    
    
    this
    
    
    
    ._slides.length
    
    
    
    -
    
    
    
    1
    
    
    
    ; 
    
    
    
    return
    
    
    
    ; } 
    
    
    
    if
    
    
    
    (value
    
    
    
    >=
    
    
    
    this
    
    
    
    ._slides.length) { 
    
    
    
    this
    
    
    
    ._currentIndex
    
    
    
    =
    
    
    
    0
    
    
    
    ; } 
    
    
    
    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
    
    
    
    =
    
    
    
    0
    
    
    
    ; 
    
    
    
    this
    
    
    
    .ShowImage(); }， ShowLast:function() { 
    
    
    
    this
    
    
    
    ._currentIndex
    
    
    
    =
    
    
    
    this
    
    
    
    ._slides.length
    
    
    
    -
    
    
    
    1
    
    
    
    ; 
    
    
    
    this
    
    
    
    .ShowImage(); }， ShowNext:function() { var newIndex
    
    
    
    =
    
    
    
    this
    
    
    
    ._currentIndex 
    
    
    
    +
    
    
    
    1
    
    
    
    ; 
    
    
    
    this
    
    
    
    .set_CurrentIndex(newIndex); 
    
    
    
    this
    
    
    
    .ShowImage(); }， ShowPrevious:function() { var newIndex
    
    
    
    =
    
    
    
    this
    
    
    
    ._currentIndex 
    
    
    
    -
    
    
    
    1
    
    
    
    ; 
    
    
    
    this
    
    
    
    .set_CurrentIndex(newIndex); 
    
    
    
    this
    
    
    
    .ShowImage(); }， ShowImage:function() { var img
    
    
    
    =
    
    
    
    $
    
    
    
    get
    
    
    
    (
    
    
    
    "
    
    
    
    Image1
    
    
    
    "
    
    
    
    ); 
    
    
    
    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
    
    
    
    +
    
    
    
    1
    
    
    
    ); 
    
    
    
    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数组上下标边界，那么，它会把这个值调整到0或数组的长度减1（根据具体情况而定）。这是很关键的，这样以来，幻灯片就可以进行循环播放。

    接下来，Pause()方法简单地把成员变量_pause设置为true―这可以控制幻灯片如何暂停。
Play()方法负责播放幻灯片。它首先设置_pause变量为false，然后调用JavaScript对象windows的setTimeout()方法。该setTimeout()方法接受两个参数：在经过特定时间延迟后要执行的代码；在此代码执行完后对应的时间跨度（单位为毫秒）。在本例中，这个延迟值来自于get_Delay()属性。在此，该setTimeout()方法将调用ShowImage()方法。

    ShowImage()方法负责执行显示一个图像的核心工作。它引用了CurrentIndex和Slides两个属性，然后把图像标签的src属性设置为Slides数组中对应的适当的图像。注意，Image1是一个图像标签的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
    
    
    
    [
    
    
    
    4
    
    
    
    ]; slides[
    
    
    
    0
    
    
    
    ] 
    
    
    
    =
    
    
    
     
    
    
    
    "
    
    
    
    images/slide1.jpg
    
    
    
    "
    
    
    
    ; slides[
    
    
    
    1
    
    
    
    ] 
    
    
    
    =
    
    
    
     
    
    
    
    "
    
    
    
    images/slide2.jpg
    
    
    
    "
    
    
    
    ; slides[
    
    
    
    2
    
    
    
    ] 
    
    
    
    =
    
    
    
     
    
    
    
    "
    
    
    
    images/slide3.jpg
    
    
    
    "
    
    
    
    ; slides[
    
    
    
    3
    
    
    
    ] 
    
    
    
    =
    
    
    
     
    
    
    
    "
    
    
    
    images/slide4.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
    
    
    
    (
    
    
    
    "
    
    
    
    Image1
    
    
    
    "
    
    
    
    ); img.style.visibility
    
    
    
    =
    
    
    
    "
    
    
    
    hidden
    
    
    
    "
    
    
    
    ; PageMethods.GetSlides(OnSuccess，OnError，OnTimeOut); } function OnSuccess(result){ slideshow.set_Slides(result); slideshow.set_Delay(
    
    
    
    2000
    
    
    
    ); 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属性。然后，它把幻灯片的延迟播放时间设置为2000毫秒。最后，它调用SlideShow类的Play()方法开发播放幻灯片。
对于OnError()和OnTimeOut()方法，它们只用于简单地显示各自相应的错误消息。
接下来，按如下所示修改HTML按钮控件标记：
<input id="Button1" ... onclick="slideshow.ShowFirst()" />
<input id="Button2" ... onclick="slideshow.ShowPrevious()" />
<input id="Button5" ... onclick="slideshow.Pause()"/>
<input id="Button6" ... onclick="slideshow.Play()"/>
<input id="Button3" ... onclick="slideshow.ShowNext()" />
<input id="Button4" ... onclick="slideshow.ShowLast()"/>
如你所见，这些按钮的
好了，至此，整个示例编写结束！最后，按F5运行上面的web表单，你应该会看到我们的幻灯片在浏览器中开始播放了。
六、 小结
再次想说的是，本文中的例子仅展示了微软ASP.NET Ajax 1.0框架编程的非常基础的一面，如果你真对这个框架感兴趣，那么请抓紧动手试一下吧！

本文出自 “青峰” 博客，转载请与作者联系！