一、 簡介
最近，微軟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學網,收藏本篇文章 [1] [2] [3] [4] [5] [6] [7] [8]$False$
>=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;}歡迎光臨學網,點擊這裡查看更多文章教程 [1] [2] [3] [4] [5] [6] [7] [8]
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學網,收藏本篇文章 [1] [2] [3] [4] [5] [6] [7] [8]
00000">._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_CurrentIn歡迎光臨學網,點擊這裡查看更多文章教程 [1] [2] [3] [4] [5] [6] [7] [8]
dex();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文件添加到它的腳本集合中。
注意，這個GetSlides()是一個靜態方法，並且被標記有[WebMethod]屬性。它返回一個包含圖像URL的字符串數組。在這個示例中，我們對圖像URL進行了硬編碼，但是你可以很容易地把它修改為使用數據庫或任何其它方式來存儲圖像數據。
<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>
