一簡介
在公司網站中我們經常需要一個基於Web幻燈片形式的機制來演示自己的（也可能是別人的）產品當然你可以使用普通的JavaScript來開發這樣的幻燈片但是借助於ASPNET AJAX框架這一開發工作將得到極大簡化在本文示例中我們正是想將借助於Web頁面方法和客戶端腳本擴展技術開發這樣一個簡單的幻燈片終端用戶可以播放和暫停幻燈片也可以進行循環播放還可以手工控制
二創建一個ASPNET AJAXEnabled網站
啟動Visual Studio 然後選擇菜單項文件|新建網站…使用模板ASPNET AJAXEnabled網站創建一個新的網站並命名工程為SlideShow（選擇Visual C#作為內置語言）此後系統應該自動地添加對必要的程序集—SystemWebExtensiondll的參考此外你會注意到一個ScriptManager服務器控件自動地添加到頁面中注意這個服務器控件作為整個ASPNET AJAX框架的控制中心
然後添加一個具有兩行和一列的HTML表格再在第一行添加一個＜img＞標簽在第二行添加六個HTML按鈕控件下圖展示web表單Defaultaspx的大致布局
三創建SlideShow類
右單擊工程添加一個新的java腳本文件並命名為JScriptjs在此我們將創建一個稱為SlideShow的類它將負責完成所有的幻燈片操作任務—例如播放暫住和導航幻燈片注意這個SlideShow類的開發是基於ASPNET AJAX客戶端腳本擴展技術具體實現代碼如下所示
TyperegisterNamespace(Demo);
//構造函數及私有變量聲明
DemoSlideShow=function(){
this_slides=new Array();
this_delay=;
this_currentIndex=;
this_pause=false;
}
//原型定義部分
DemoSlideShowprototype=
{
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＜) {
this_currentIndex=this_slideslength;
return;
}
if(value＞=this_slideslength) {
this_currentIndex=;
}
else{
this_currentIndex=value;
}
}
get_IsPaused:function() {
return this_pause;
}
set_IsPaused:function(value) {
thispause=value;
}
Pause:function() {
this_pause=true;
}
Play:function() {
this_pause=false;
windowsetTimeout(slideshowShowImage()
thisget_Delay());
}
ShowFirst:function() {
this_currentIndex=;
thisShowImage();
}
ShowLast:function() {
this_currentIndex=this_slideslength;
thisShowImage();
}
ShowNext:function() {
var newIndex=this_currentIndex +;
thisset_CurrentIndex(newIndex);
thisShowImage();
}
ShowPrevious:function()
{
var newIndex=this_currentIndex ;
thisset_CurrentIndex(newIndex);
thisShowImage();
}
ShowImage:function() {
var img=$get(Image);
if(imgstylevisibility==hidden) {
imgstylevisibility=visible;
}
var slides=thisget_Slides();
var curIndex=thisget_CurrentIndex();
imgsrc=slides[curIndex];
if(thisget_IsPaused()==false)
{
thisset_CurrentIndex(curIndex+);
thisPlay();
}
}
}
//注冊類
DemoSlideShowregisterClass(DemoSlideShow);
//創建全局SlideShow類的實例
var slideshow=new DemoSlideShow();
在代碼的最開始我們先注冊一個稱為Demo的新的命名空間然後創建一個稱為SlideShow的類該SlideShow類的構造器共聲明了四個私有成員變量其中_slides變量指向一個包含幻燈片圖像URL的數組_delay變量指示兩張相鄰的幻燈片播放的間隔時間（單位為毫秒）_currentIndex變量存儲了當前幻燈片在_slides數組中的索引值最後_pause變量指示幻燈片被暫停(true)還是處於運行態(false)
接下來在SlideShow類的原型中我們定義了與前面的四個屬性相關聯的getter/setter方法也就是SlidesDelayCurrentIndex和IsPaused其它方法都比較基本因此我們僅介紹方法set_CurrentIndex()這個set_CurrentIndex()屬性方法負責檢查提供給它的索引值如果該值超出slides數組上下標邊界那麼它會把這個值調整到或數組的長度減（根據具體情況而定）這是很關鍵的這樣以來幻燈片就可以進行循環播放
接下來Pause()方法簡單地把成員變量_pause設置為true—這可以控制幻燈片如何暫停
Play()方法負責播放幻燈片它首先設置_pause變量為false然後調用JavaScript對象windows的setTimeout()方法該setTimeout()方法接受兩個參數在經過特定時間延遲後要執行的代碼在此代碼執行完後對應的時間跨度（單位為毫秒）在本例中這個延遲值來自於get_Delay()屬性在此該setTimeout()方法將調用ShowImage()方法
ShowImage()方法負責執行顯示一個圖像的核心工作它引用了CurrentIndex和Slides兩個屬性然後把圖像標簽的src屬性設置為Slides數組中對應的適當的圖像注意Image是一個圖像標簽的ID—我們將在後面添加它此外還應注意$get()方法的用法它等價於documentgetElementById()方法然後CurrentIndex的值加１並且再次調用Play()方法這樣以來將形成一個無限循環而幻燈片將持續不斷地播放下去
最後的四個方法—ShowFirst()ShowLast()ShowNext()和ShowPrevious()方法只是簡單地調整_currentIndex成員變量的值並調用ShowImage()方法來顯示一張幻燈片
在創建類結束後我們使用registerClass()方法把它注冊到MS AJAX框架最後聲明一個SlideShow類的全局實例變量
最後打開Web頁面Defaultaspx選擇ScriptManager控件並且設置它的EnablePageMethods屬性為true而且還要把JScriptjs文件添加到它的腳本集合中
四創建一個返回圖像URL的web方法
我們前面創建的SlideShow類允許你使用Slides屬性來指定幻燈片一種使用Slides屬性的方法是創建一個圖像URL的常量數組然而更為適當的方法則是從服務器端得到圖像URL通過這種方式你可以基於一些條件或甚至一種數據庫驅動的邏輯返回圖像這需要我們創建一個能夠返回一個圖像URL數組的web方法然後從客戶端JavaScript腳本中調用這個web方法
接下來讓我們開始創建下列web方法
[WebMethod]
public static string[] GetSlides(){
string[] slides = new string[];
slides[] = images/slidejpg;
slides[] = images/slidejpg;
slides[] = images/slidejpg;
slides[] = images/slidejpg;
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(Image);
imgstylevisibility=hidden;
PageMethodsGetSlides(OnSuccessOnErrorOnTimeOut);
}
function OnSuccess(result){
slideshowset_Slides(result);
slideshowset_Delay();
slideshowPlay();
}
function OnError(result){
alert(resultget_message());
}
function OnTimeOut(result){
alert(result);
}
＜/script＞
任何時候當一個web表單加載到客戶端時該＜script＞塊包含的pageLoad()函數將被AJAX框架自動調用它非常類似於ASPNET的服務器端Page_Load事件在這個pageLoad()方法中我們用於實現暫時的圖像隱藏這樣做的目的是為了避免浏覽器顯示不連續的圖像標識然後借助於內置的類—PageMethodspageLoad()函數調用GetSlides() web方法在ASPNET AJAX中所有的執行都是異步的因此GetSlides()方法將接受一個回調函數—在成功時執行OnSuccess出現錯誤時執行OnError而在超時條件下則執行OnTimeOut
在此OnSuccess()函數接受一個由GetSlides() web方法返回的字符串數組並且相應地設置SlideShow類的Slides屬性然後它把幻燈片的延遲播放時間設置為毫秒最後它調用SlideShow類的Play()方法開發播放幻燈片
對於OnError()和OnTimeOut()方法它們只用於簡單地顯示各自相應的錯誤消息
接下來按如下所示修改HTML按鈕控件標記
＜input id=Button onclick=slideshowShowFirst() /＞
＜input id=Button onclick=slideshowShowPrevious() /＞
＜input id=Button onclick=slideshowPause()/＞
＜input id=Button onclick=slideshowPlay()/＞
＜input id=Button onclick=slideshowShowNext() /＞
＜input id=Button onclick=slideshowShowLast()/＞
如你所見這些按鈕的onclick事件簡單地調用SlideShow類的各個方法
好了至此整個示例編寫結束！最後按F運行上面的web表單你應該會看到我們的幻燈片在浏覽器中開始播放了
六小結
再次想說的是本文中的例子僅展示了微軟ASPNET Ajax 框架編程的非常基礎的一面如果你真對這個框架感興趣那麼請抓緊動手試一下吧！
From:http://tw.wingwit.com/Article/program/net/201311/13136.html
