一、簡介

在公司網(wǎng)站中，我們經(jīng)常需要一個基于Web幻燈片形式的機(jī)制來演示自己的（也可能是別人的）產(chǎn)品。當(dāng)然，你可以使用普通的JavaScript來開發(fā)這樣的幻燈片；但是，借助于ASP.NET AJAX框架，這一開發(fā)工作將得到極大簡化。在本文示例中，我們正是想將借助于Web頁面方法和客戶端腳本擴(kuò)展技術(shù)開發(fā)這樣一個簡單的幻燈片。終端用戶可以播放和暫?；脽羝?，也可以進(jìn)行循環(huán)播放，還可以手工控制.

二、創(chuàng)建一個ASP.NET AJAX-Enabled網(wǎng)站

啟動Visual Studio 2005，然后選擇菜單項(xiàng)“文件|新建網(wǎng)站…”，使用模板“ASP.NET AJAX-Enabled網(wǎng)站”創(chuàng)建一個新的網(wǎng)站，并命名工程為SlideShow（選擇Visual C#作為內(nèi)置語言）。此后，系統(tǒng)應(yīng)該自動地添加對必要的程序集—System.Web.Extension.dll的參考。此外，你會注意到一個ScriptManager服務(wù)器控件自動地添加到頁面中。注意，這個服務(wù)器控件作為整個ASP.NET AJAX框架的控制中心。

然后，添加一個具有兩行和一列的HTML表格，再在第一行添加一個＜img＞標(biāo)簽，在第二行添加六個HTML按鈕控件。下圖1展示web表單Default.aspx的大致布局。

三、創(chuàng)建SlideShow類

右單擊工程添加一個新的java腳本文件，并命名為JScript.js。在此，我們將創(chuàng)建一個稱為SlideShow的類，它將負(fù)責(zé)完成所有的幻燈片操作任務(wù)—例如播放、暫住和導(dǎo)航幻燈片。注意，這個SlideShow類的開發(fā)是基于ASP.NET AJAX客戶端腳本擴(kuò)展技術(shù)，具體實(shí)現(xiàn)代碼如下所示：

Type.registerNamespace("Demo");
//構(gòu)造函數(shù)及私有變量聲明 
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");
//創(chuàng)建全局SlideShow類的實(shí)例 
var slideshow=new Demo.SlideShow();

在代碼的最開始，我們先注冊一個稱為Demo的新的命名空間。然后，創(chuàng)建一個稱為SlideShow的類。該SlideShow類的構(gòu)造器共聲明了四個私有成員變量。其中，_slides變量指向一個包含幻燈片圖像URL的數(shù)組；_delay變量指示兩張相鄰的幻燈片播放的間隔時間（單位為毫秒）；_currentIndex變量存儲了當(dāng)前幻燈片在_slides數(shù)組中的索引值；最后，_pause變量指示幻燈片被暫停(true)還是處于運(yùn)行態(tài)(false)。

接下來，在SlideShow類的原型中，我們定義了與前面的四個屬性相關(guān)聯(lián)的getter/setter方法，也就是Slides、Delay、CurrentIndex和IsPaused。其它方法都比較基本，因此我們僅介紹方法set_CurrentIndex()。這個set_CurrentIndex()屬性方法負(fù)責(zé)檢查提供給它的索引值。如果該值超出slides數(shù)組上下標(biāo)邊界，那么，它會把這個值調(diào)整到0或數(shù)組的長度減1（根據(jù)具體情況而定）。這是很關(guān)鍵的，這樣以來，幻燈片就可以進(jìn)行循環(huán)播放。

接下來，Pause()方法簡單地把成員變量_pause設(shè)置為true—這可以控制幻燈片如何暫停。
Play()方法負(fù)責(zé)播放幻燈片。它首先設(shè)置_pause變量為false，然后調(diào)用JavaScript對象windows的setTimeout()方法。該setTimeout()方法接受兩個參數(shù)：在經(jīng)過特定時間延遲后要執(zhí)行的代碼；在此代碼執(zhí)行完后對應(yīng)的時間跨度（單位為毫秒）。在本例中，這個延遲值來自于get_Delay()屬性。在此，該setTimeout()方法將調(diào)用ShowImage()方法。

ShowImage()方法負(fù)責(zé)執(zhí)行顯示一個圖像的核心工作。它引用了CurrentIndex和Slides兩個屬性，然后把圖像標(biāo)簽的src屬性設(shè)置為Slides數(shù)組中對應(yīng)的適當(dāng)?shù)膱D像。注意，Image1是一個圖像標(biāo)簽的ID—我們將在后面添加它。此外，還應(yīng)注意$get()方法的用法，它等價于document.getElementById()方法。然后，CurrentIndex的值加１并且再次調(diào)用Play()方法。這樣以來，將形成一個無限循環(huán)，而幻燈片將持續(xù)不斷地播放下去。

最后的四個方法—ShowFirst()，ShowLast()，ShowNext()和ShowPrevious()方法只是簡單地調(diào)整_currentIndex成員變量的值，并調(diào)用ShowImage()方法來顯示一張幻燈片。

在創(chuàng)建類結(jié)束后，我們使用registerClass()方法把它注冊到MS AJAX框架。最后，聲明一個SlideShow類的全局實(shí)例變量。

最后打開Web頁面Default.aspx，選擇ScriptManager控件，并且設(shè)置它的EnablePageMethods屬性為true，而且還要把JScript.js文件添加到它的腳本集合中。

#p#

四、創(chuàng)建一個返回圖像URL的web方法

我們前面創(chuàng)建的SlideShow類允許你使用Slides屬性來指定幻燈片。一種使用Slides屬性的方法是創(chuàng)建一個圖像URL的常量數(shù)組。然而，更為適當(dāng)?shù)姆椒▌t是從服務(wù)器端得到圖像URL。通過這種方式，你可以基于一些條件或甚至一種數(shù)據(jù)庫驅(qū)動的邏輯返回圖像。這需要我們創(chuàng)建一個能夠返回一個圖像URL數(shù)組的web方法。然后，從客戶端JavaScript腳本中調(diào)用這個web方法。

接下來，讓我們開始創(chuàng)建下列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()是一個靜態(tài)方法，并且被標(biāo)記有[WebMethod]屬性。它返回一個包含圖像URL的字符串?dāng)?shù)組。在這個示例中，我們對圖像URL進(jìn)行了硬編碼，但是你可以很容易地把它修改為使用數(shù)據(jù)庫或任何其它方式來存儲圖像數(shù)據(jù)。

五、從JavaScript腳本中調(diào)用GetSlides() web方法

現(xiàn)在，既然我們已經(jīng)準(zhǔn)備好GetSlides() Web方法，那么接下來，我們需要從客戶端JavaScript腳本中調(diào)用它。現(xiàn)在，切換到Web頁面的HTML源視圖并且在web表單的＜HEAD＞節(jié)中添加下列＜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＞

任何時候當(dāng)一個web表單加載到客戶端時，該＜script＞塊包含的pageLoad()函數(shù)將被AJAX框架自動調(diào)用。它非常類似于ASP.NET的服務(wù)器端Page_Load事件。在這個pageLoad()方法中，我們用于實(shí)現(xiàn)暫時的圖像隱藏。這樣做的目的是為了避免瀏覽器顯示不連續(xù)的圖像標(biāo)識。然后，借助于內(nèi)置的類—PageMethods，pageLoad()函數(shù)調(diào)用GetSlides() web方法。在ASP.NET AJAX中，所有的執(zhí)行都是異步的，因此，GetSlides()方法將接受一個回調(diào)函數(shù)—在成功時執(zhí)行OnSuccess；出現(xiàn)錯誤時執(zhí)行OnError；而在超時條件下則執(zhí)行OnTimeOut。

在此，OnSuccess()函數(shù)接受一個由GetSlides() web方法返回的字符串?dāng)?shù)組并且相應(yīng)地設(shè)置SlideShow類的Slides屬性。然后，它把幻燈片的延遲播放時間設(shè)置為2000毫秒。最后，它調(diào)用SlideShow類的Play()方法開發(fā)播放幻燈片。

對于OnError()和OnTimeOut()方法，它們只用于簡單地顯示各自相應(yīng)的錯誤消息。

接下來，按如下所示修改HTML按鈕控件標(biāo)記：

＜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事件簡單地調(diào)用SlideShow類的各個方法。
好了，至此，整個示例編寫結(jié)束！最后，按F5運(yùn)行上面的web表單，你應(yīng)該會看到我們的幻燈片在瀏覽器中開始播放了。

六、小結(jié)

再次想說的是，本文中的例子僅展示了微軟ASP.NET Ajax 1.0框架編程的非?；A(chǔ)的一面，如果你真對這個框架感興趣，那么請抓緊動手試一下吧！

【編輯推薦】

1. ASP.NET AJAX框架調(diào)用后臺代碼的基本方法
2. ASP.NET AJAX1.0嘗鮮試用：Web Service調(diào)用
3. 分清ASP.NET AJAX中的Extender和Behavior模型
4. 使用ASP.NET AJAX訪問Script Method時啟用客戶端緩存