[ASP.Net]AJAX的SlideShowExtender使用說明

ASP.Net 的 AJAX Control Toolkit 有一個用來做圖片輪播的 SlideShowExtender.
以下的範例除了說明該 Control 的運作, 亦說明如何依使用者所點選的分類, 來呈現該分類下的圖片.

1. SlideShowExtender 的屬性:
   • PlayInterval: 播放下一張圖片的時間間隔(毫秒).
   • TargetControlID: 顯示圖片的 Image ID.
   • ImageTitleLabelID: 顯示圖片 Title 的 Label ID.
   • ImageDescriptionLabelID: 顯示圖片描述的 Label ID.
   • Loop: 是否以迴圈方式一直重覆播放所指定的圖檔 (true / false).
   • AutoPlay: 是否自動播放 (true / false).
   • PreviousButtonID: 讓使用者按 "上一張" 的 Button ID.
   • NextButtonID: 讓使用者按 "下一張" 的 Button ID.
   • PlayButtonID: 讓使用者按 "播放/停止" 的 Button ID.
   • PlayButtonText: 設定 PlayButtonID 指定的 Button 在停止模式時要呈現的文字.
   • StopButtonText: 設定 PlayButtonID 指定的 Button 在播放模式時要呈現的文字.
   • SlideShowServiceMethod: 用來指定讀取圖檔資源的 static method.
   • UseContextKey: 是否有使用到 ContextKey 這個屬性.
   • ContextKey: SlideShowServiceMethod 所指定 method 的參數.
2. 以程式的角度來看, 只有 SlideShowServiceMethod, UseContextKey, ContextKey 這三個屬性最重要
   1. 建立一個 static method, 讓 SlideShowExtender 呼叫: (vs2008可以在拉一個 SlideShowExtender Control 進頁面後, 在 Control 上按右鍵, 選擇 "Add SlideShow page method", 將會產生類似以下的code)

      [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
      public static AjaxControlToolkit.Slide[] GetSlides(string contextKey)
      {
        return default(AjaxControlToolkit.Slide[]);
      }

   2. 參考 SlideShowExtender說明, 在 GetSlides 函式中寫一段測試的 code.
      AjaxControlToolkit.Slide class 的參數依序是:
      • 圖檔路徑: 對應到 TargetControlID 屬性 (Image Control的ImageUrl).
      • 圖檔名稱: 對應到 ImageTitleLabelID 屬性 (Label Control的Text).
      • 圖檔說明: 對應到 ImageDescriptionLabelID 屬性 (Label Control的Text).
3. ContextKey 的控制: 只要在觸發項的事件中, 去修改 SlideShowExtender 的 ContextKey 值.
   如此便可以讓 SlideShowExtender 在進行 GetSlides 時, 從參數 ContextKey 中讀到所設定的值.
4. 建議:
   1. 因為透過 GetSlides 函式取得圖片會需要一點時間, 建議在 Image Control 中預先設定一個 waiting 的小圖, 製造出請使用者等待的效果
   2. 給 ContextKey 一個可抓得到圖檔的預設值, 讓 GetSlides 函式可抓到預設的圖檔.