[ASP.Net]廣告輪播的控制項(without AJAX)－David's Home

由於最近要在網頁上加入一個廣告輪播的功能，且AJAX Toolkit的SlideShowExtender又因為OutputCache，未正常地產生輪播效果，所以我使用JavaScript搭配UserControl做了以下的範例。

需求：可進行廣告輪播(圖片加超連結)的控制項，每個廣告切換時，圖片、圖片的文字說明、圖片的超連結這三者需一併切換。
步驟：
1. 新增一個[Web使用者控制項]，例如PlayAD.ascx。
  控制項的網頁內容如下：
  
  <%@ Control Language="C#" AutoEventWireup="true" CodeFile="PlayAD.ascx.cs" Inherits="PlayAD" EnableViewState="false" %>
  
  <asp:Literal ID="Literal1" runat="server"><a href="#" id="{0}_lnkAd" target="_blank"><img style="border:0" alt="廣告圖"/></a></asp:Literal>
  - <a>的href屬性可自行設定預設的超連結。
  - 如果要設定廣告圖的寬與高，可自行設定<img>的width與height屬性。
  - 加入<asp:Literal>是為了方便控制其內容。例如，我要參數化的是<a>的id屬性，所以將其設定為"{0}_lnkAd"。
2. 在這個控制項中的程式碼中，我將廣告圖播放的時間間隔設定成參數，讓開發者可自行設定。至於資料來源的部分，由於可從檔案、資料庫、或HardCode等方式制定，所以就不列在這個範例中描述。
  控制項的程式碼如下(廣告依序是PChome、Yahoo、我的E政府)：
  
  public partial class PlayAD : System.Web.UI.UserControl
  
  {
  //輪播的時間間隔(毫秒:ms)
  private int _PlayInterval;
  
  public int Interval
  
  {
  
     get { return _PlayInterval; }
  
      set { _PlayInterval = value; }
  
  }
  
  protected void Page_Load(object sender, EventArgs e)
  
  {
  
      //這個廣告的Key(如果該控制項在一個網頁中會有多個的時候，這個值要能唯一)
      string strName = "myAD";
  
      //廣告輪播的資料來源，三個為一組，依序是：圖片位置、圖片的說明文字、圖片的超連結位置
      string strAry = "\"http://www.pchome.com.tw/img/pchomelogo.gif\",\"PChome\",\"http://www.pchome.com.tw/\""
  
     + ",\"http://l.yimg.com/tw.yimg.com/i/tw/hp/mh/08logo.gif\",\"Yahoo\",\"http://tw.yahoo.com/\""
  
     + ",\"http://www.gov.tw/images/head_logo.jpg\",\"我的E政府\",\"http://www.gov.tw/\"";
  
      //JavaScript在setTimeout時，要呼叫的函式(第三步會解釋此function)
      string strScript = "playAd({0}, 0, {1}, \"{0}\");";
  
      Literal1.Text = string.Format(Literal1.Text, strName);
  
      //在網頁中宣告此資料陣列
      this.Page.ClientScript.RegisterArrayDeclaration(strName, strAry);
  
      //在網頁中註冊此JavaScript(進行第一次廣告的播放)
  
      //(注意！這邊要用RegisterStartupScript；用RegisterClientScriptBlock會造成JavaScript在陣列宣告之前，而產生JavaScript的錯誤)
  
      //有興趣的可以試試中間的差異。
  
      //另外，不見得要用RegisterArrayDeclaration來宣告陣列，用兜字串的方式去組織在JavaScript中也可以。
      this.Page.ClientScript.RegisterStartupScript(this.GetType(), strName, string.Format(strScript, strName,
                                                                                      this.Interval), true);
  
  }
  }
3. 將廣告輪播的JavaScript置於頁面中。此JavaScript因為是共用的function，所以不可置於UserControl中。
  以下是頁面的網頁碼：
  
  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
  
  <%@ Register src="PlayAD.ascx" tagname="PlayAD" tagprefix="uc1" %>
  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  <html xmlns="http://www.w3.org/1999/xhtml">
  
  <head runat="server">
  
      <title></title>
      <script type="text/javascript" language="javascript">
  
          function playAd(aryImg, intIdx, intInterval, strVar) {
  
              //找出廣告輪播的<a>
              var objLnk = document.getElementById(strVar + "_lnkAd");
  
              //找出<a>下的第一個<img>
              var objImg = objLnk.getElementsByTagName("img")[0];
  
              //判斷是否播放到最後一項。(若超過，就設定至第一個廣告)
  
              if (intIdx >= aryImg.length)
  
              {
  
               intIdx = 0;
  
              }
  
              //設定圖片的超連結
  
              objLnk.href = aryImg[intIdx + 2];
  
              //設定圖片的說明文字
              objImg.alt = aryImg[intIdx + 1];
  
              //設定圖片的URL
              objImg.src = aryImg[intIdx];
  
              //設定下一次播放的function與時間間隔
              setTimeout("playAd(" + strVar + ", " + (intIdx + 3) + "," + intInterval + ",\"" + strVar + "\")", intInterval);
  
          }
      </script>
  
  </head>
  
  <body>
  
      <form id="form1" runat="server">
  
      <div>
  
          <uc1:PlayAD ID="PlayAD1" runat="server" Interval="7000" />
  
      </div>
  
      </form>
  
  </body>
  
  </html>
  
  此function的變數說明如下：
  - aryImg：廣告輪播資料來源的陣列。此陣列的變數是JavaScript的全域變數(在控制項中設定)。
  - intIdx：播放的索引。以三個為一組，所以每次都是+3。
  - intInterval：下次播放的時間間隔(毫秒：ms)。
  - strVar：用來找出<a>的索引值。