一、簡(jiǎn)介

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

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

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

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

三、創(chuàng)建SlideShow類

右單擊工程添加一個(gè)新的java腳本文件，并命名為JScript.js。在此，我們將創(chuàng)建一個(gè)稱為SlideShow的類，它將負(fù)責(zé)完成所有的幻燈片操作任務(wù)—例如播放、暫住和導(dǎo)航幻燈片。注意，這個(gè)SlideShow類的開(kāi)發(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();
}
}
}
//注冊(cè)類 
Demo.SlideShow.registerClass("Demo.SlideShow");
//創(chuàng)建全局SlideShow類的實(shí)例 
var slideshow=new Demo.SlideShow();

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

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

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

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

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

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

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

#p#

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

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

接下來(lái)，讓我們開(kāi)始創(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;

注意，這個(gè)GetSlides()是一個(gè)靜態(tài)方法，并且被標(biāo)記有[WebMethod]屬性。它返回一個(gè)包含圖像URL的字符串?dāng)?shù)組。在這個(gè)示例中，我們對(duì)圖像URL進(jìn)行了硬編碼，但是你可以很容易地把它修改為使用數(shù)據(jù)庫(kù)或任何其它方式來(lái)存儲(chǔ)圖像數(shù)據(jù)。

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

現(xiàn)在，既然我們已經(jīng)準(zhǔn)備好GetSlides() Web方法，那么接下來(lái)，我們需要從客戶端JavaScript腳本中調(diào)用它。現(xiàn)在，切換到Web頁(yè)面的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＞

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

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

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

接下來(lái)，按如下所示修改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()"/＞

如你所見(jiàn)，這些按鈕的onclick事件簡(jiǎn)單地調(diào)用SlideShow類的各個(gè)方法。
好了，至此，整個(gè)示例編寫(xiě)結(jié)束！最后，按F5運(yùn)行上面的web表單，你應(yīng)該會(huì)看到我們的幻燈片在瀏覽器中開(kāi)始播放了。

六、小結(jié)

再次想說(shuō)的是，本文中的例子僅展示了微軟ASP.NET Ajax 1.0框架編程的非常基礎(chǔ)的一面，如果你真對(duì)這個(gè)框架感興趣，那么請(qǐng)抓緊動(dòng)手試一下吧！

【編輯推薦】

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