基於微軟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的大致布局。 
三、 建立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檔案添加到它的指令碼集合中。

1

四、 建立一個返回映像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進行了寫入程式碼，但是你可以很容易地把它修改為使用資料庫或任何其它方式來儲存映像資料。

1

五、 從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()"/>
如你所見，這些按鈕的onclick事件簡單地調用SlideShow類的各個方法。
好了，至此，整個樣本編寫結束！最後，按F5運行上面的web表單，你應該會看到我們的投影片在瀏覽器中開始播放了。
六、 小結
再次想說的是，本文中的例子僅展示了微軟ASP.NET Ajax 1.0架構編程的非常基礎的一面，如果你真對這個架構感興趣，那麼請抓緊動手試一下吧！ 1