基于微軟ASP.NET AJAX框架開發幻燈片播放網頁
一、簡介
在公司網站中，我們經常需要一個基于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文件添加到它的腳本集合中。
#p#
四、創建一個返回圖像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()"/＞
如你所見，這些按鈕的onclick事件簡單地調用SlideShow類的各個方法。
好了，至此，整個示例編寫結束！最后，按F5運行上面的web表單，你應該會看到我們的幻燈片在瀏覽器中開始播放了。
六、小結
再次想說的是，本文中的例子僅展示了微軟ASP.NET Ajax 1.0框架編程的非常基礎的一面，如果你真對這個框架感興趣，那么請抓緊動手試一下吧！
【編輯推薦】
