一、 簡(jiǎn)介?
??? 最近，微軟ASP.NET Ajax 1.0框架以其完整的基于Ajax的web開(kāi)發(fā)方案呈現(xiàn)在web技術(shù)人員的前面，憑借與遺留ASP.NET系統(tǒng)的有機(jī)整合以及完全面向?qū)ο蟮目蛻舳薐avaScript組件模型兩大絕殺正在引起越來(lái)越多的基于.NET平臺(tái)的web開(kāi)發(fā)者的關(guān)注。本文應(yīng)該屬于這個(gè)框架的基礎(chǔ)篇，我想通過(guò)一個(gè)具體的例子（播放web幻燈片）來(lái)向讀者展示如何使用該框架提供的面向?qū)ο蟮目蛻舳薐avaScript組件模型來(lái)進(jìn)行常規(guī)的WEB開(kāi)發(fā)。

??? 在公司網(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)播放，還可以手工控制（導(dǎo)航）。 二、 創(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的大致布局。?
????

??? 圖1—示例程序設(shè)計(jì)時(shí)刻快照。?
三、 創(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文件添加到它的腳本集合中。 四、 創(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)用它?，F(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" ... οnclick="slideshow.ShowFirst()" />?
<input id="Button2" ... οnclick="slideshow.ShowPrevious()" />?
<input id="Button5" ... οnclick="slideshow.Pause()"/>?
<input id="Button6" ... οnclick="slideshow.Play()"/>?
<input id="Button3" ... οnclick="slideshow.ShowNext()" />?
<input id="Button4" ... οnclick="slideshow.ShowLast()"/>?
如你所見(jiàn)，這些按鈕的?
好了，至此，整個(gè)示例編寫(xiě)結(jié)束！最后，按F5運(yùn)行上面的web表單，你應(yīng)該會(huì)看到我們的幻燈片在瀏覽器中開(kāi)始播放了。?
六、 小結(jié)?
再次想說(shuō)的是，本文中的例子僅展示了微軟ASP.NET Ajax 1.0框架編程的非?；A(chǔ)的一面，如果你真對(duì)這個(gè)框架感興趣，那么請(qǐng)抓緊動(dòng)手試一下吧！?








本文轉(zhuǎn)自朱先忠老師51CTO博客，原文鏈接：?http://blog.51cto.com/zhuxianzhong/59353，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的基于微软ASP.NET AJAX框架开发幻灯片播放网页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。