[翻譯]使用ASP.NET AJAX實作幻燈片效果

<a href="http://www.dotnetbips.com/articles/a8441143-3a24-40e6-a5dc-68cfdb8a065d.aspx" target="_blank">[原文源碼下載下傳]</a>

<a href="http://down.51cto.com/data/100916" target="_blank">[譯者改後源碼下載下傳]</a>

[翻譯]使用ASP.NET AJAX實作幻燈片效果

原文釋出日期：2007.05.27

介紹

一些公司經常會有在web上機械地顯示它們産品的圖檔（即幻燈片）的需求。 當然你可以使用JavaScript來開發這個程式，但是如果使用ASP.NET AJAX的話會使你的工作變得非常簡單。 本文中，我将通過ASP.NET AJAX的page methods和用戶端腳本擴充的幫助，來開發一個簡單的幻燈片程式。 這個幻燈片可以由使用者控制它的開始和暫停，預設情況下它會循環展示所有圖檔。 當然，使用者也可以對幻燈片進行手動操作。 

建立一個SlideShow類

開發這個幻燈片程式之前，我們先來建立一個啟用了AJAX功能的web site。 然後添加一個名為JScript.js的JavaScript，在該檔案内建立一個名為SildeShow的類，它的工作就是控制幻燈片的開始、停止和導航。 我們借助了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&lt;0) 

                { 

                        this._currentIndex=this._slides.length-1; 

                        return; 

                } 

                if(value&gt;=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; 

        ShowNext:function() 

                var newIndex=this._currentIndex +1; 

                this.set_CurrentIndex(newIndex); 

        ShowPrevious:function() 

                var newIndex=this._currentIndex -1; 

        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"); 

var slideshow=new Demo.SlideShow();

這段代碼的開頭部分注冊了一個名為Demo的命名空間。 然後建立了一個名為SildeShow的類。 在SildeShow類的構造函數内聲明了4個成員變量。 _slides變量是一個數組，其内的元素就是圖檔的URL。 _delay變量指明了圖檔轉換的間隔時間，機關是毫秒。 _currentIndex變量儲存的是目前圖檔在_slides數組中的索引。 最後，_pause變量用來說明是否暫停幻燈片的顯示，暫停就是true，運作就是false。

在SlideShow類的prototype中定義了4個屬性，分别是Slides、Delay、CurrentIndex和IsPause，它們都有getter和setter。 顧名思義，我就不對這些屬性做過多的解釋了，但是set_CurrentIndex()我要好好說明一下。 這個屬性首先會檢查傳來的值。 如果值超出了Slides數組的範圍，那會它會根據條件進行判斷，設定該值為“0”或數組内元素總數減1。 其本質上就是讓幻燈片可以循環播放。

Pause()方法用于設定_pause變量為true。 調用這個方法會使幻燈片暫停播放。

Play()方法用于啟動幻燈片。 首先設定_pause變量為false，然後調用window的setTimeout()方法。 setTimeout()方法需要兩個參數，分别是在指定的延遲時間後需要執行的代碼和延遲時間（機關：毫秒）。 在我們的這個例子中，延遲時間就是get_Delay()屬性的值。 需要調用的代碼就是ShowImage()方法。

ShowImage()方法是用來顯示圖檔的。 它用到了CurrentIndex屬性和Slides屬性。 它從Slides數組中讀取一個圖檔路徑，并設定給img标簽的src屬性。 注意，“Image1”是我們稍後将會增加的img标簽的ID。 另外，注意一下我們使用的$get()方法，它相當于document.getElementById()方法。 Play()方法每被調用一次，CurrentIndex屬性就會自加1。 用這種方法，幻燈片就會不斷地循環顯示。

ShowFirst()，ShowLast()，ShowNext()和ShowPrevious()方法用于調整_currentIndex變量，進而調用ShowImage()方法顯示相關的圖檔。

寫完這個類後，我們再用ASP.NET AJAX的registerClass()方法來注冊這個類。 最後，聲明一個SlideShow類的全局變量。

開發Web Form

在Visual Studio中建立一個web form。 確定頁中有ScriptManager控件。 添加一個兩行一列的HTML表格。 在第一行中添加一個&lt;img&gt;标簽，在第二行中添加6個HTML按鈕。 完成後的web form如下圖所示：

像上圖所示那樣設定6個按鈕的value屬性。

接下來，選擇ScriptManager控件，并設定它的EnablePageMethods屬性為true。 然後，像如下這樣添加JScript.js檔案的引用。

建立一個用來傳回圖檔URL的web method

SlideShow類允許你使用Slides屬性來指定圖檔數組。 我們可以設定Slides屬性為一個固定的圖檔連結數組。 但是，更合适的方法是動态地從服務端獲得圖檔連結數組。 這樣你就可以傳回一個基于某些條件生成的圖檔連結數組，或者應付某些資料庫驅動的邏輯。 為了實作這樣的功能，我們來建立一個傳回圖檔連結數組的web method。 這個web method将被用戶端的JavaScript調用。

轉到web form的後置代碼中，增加如下所示的web method。

[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]屬性。 它将傳回一個圖檔連結數組。 為了友善，我們在示例程式中是通過寫死得到數組的，你可以将它改為從資料庫中取值。

用JavaScript調用GetSlides()方法

現在，我們需要用用戶端的JavaScript來調用上面的web method，即GetSlides()方法。 轉換到HTML源視圖，并在web form的&lt;head&gt;節點内添加一個&lt;script&gt;塊，如下所示：

&lt;script type="text/javascript"&gt; 

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); 

&lt;/script&gt;

這段腳本内包含一個pageLoad()方法，隻要web from在用戶端被加載，AJAX架構就會自動地調用它。 它非常像ASP.NET裡的Page_Load事件。在pageLoad()方法中，首先隐藏了圖檔。 然後通過内置的PageMethods類的幫助，調用了GetSlides()方法。 在ASP.NET AJAX中，所有的執行都是異步的，是以GetSlides()方法是有回調函數的，并且其回調函數分别會在執行成功、出錯或逾時的時候被調用。

OnSuccess()函數接收一個通過GetSlides()方法傳回的字元串數組為參數，然後設定SlideShow類的Slides屬性。 再往下是設定幻燈片的延遲時間為2000毫秒。 最後，它調用SlideShow類的Play()方法來開始運作幻燈片。

OnError()和OnTimeOut()分别用于顯示錯誤資訊。

接下來，像下面這樣修改button标記：

&lt;input id="Button1"    onclick="slideshow.ShowFirst()" /&gt; 

&lt;input id="Button2"    onclick="slideshow.ShowPrevious()" /&gt; 

&lt;input id="Button5"    onclick="slideshow.Pause()"/&gt; 

&lt;input id="Button6"    onclick="slideshow.Play()"/&gt; 

&lt;input id="Button3"    onclick="slideshow.ShowNext()" /&gt; 

&lt;input id="Button4"    onclick="slideshow.ShowLast()"/&gt;

你可以看到，button的onclick事件分别調用對應的SlideShow類的方法。

就是這些東西，很簡單吧。 運作這個web form，你就會在浏覽器中看到我們的幻燈片。

     本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/345088，如需轉載請自行聯系原作者