使用Javascript,CSS和Ajax建立ASP.NET自訂控制項

       在MSDN上看到的文章，原文名稱為Who Is Looking: Building a Custom ASP.NET Control that uses Javascript, Cascading Style Sheets, and Ajax，下載以後經過測試，感覺確實不錯，下面根據我的理解整理了一下其實現的思路，推薦給大家。
       命如其名，這個控制項的功能就是在某個客戶瀏覽網頁的時候，這個客戶的訊息就會出現在瀏覽這個網頁的所有用戶端上。當某個用戶端離開這個網頁的時候，這個客戶的訊息就會從所有別的用戶端消失。
       程式運行效果：
         
 
建立ASP.NET自訂控制項
       在Visual Studio中，所有的ASP.NET 2.0控制項都是自訂控制項，建立自己的自訂控制項一般需要完成以下三步。
(1)在網站APP_Code下建立一個新類；
(2)修改這個類，讓它成為WebControl類(包含在System.Web.UI.WebControls命名空間)的衍生類別；
(3)重寫基類(即WebControl類)的RenderContents()方法。

下面是一個最簡單的ASP.NET控制項，它的功能只有一個，顯示"Hellow World"。

using System;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace myControls

{

  public class HelloWorld : WebControl

  {

    protected override void RenderContents(HtmlTextWriter writer)

    {

      writer.Write("Hello World");

    }

  }

}

    自訂控制項建立好之後，有三種方法將其添加到網頁中。
    第一種選擇是首先在aspx檔案添加註冊控制項的代碼：

  

<%@ Register TagPrefix="custom" Namespace="myControls" %>

    其中TagPrefix屬性的值可隨意選取，Namespace屬性的值必須與你建立的自訂控制項一致，然後在該頁的任意位置均可引用此控制項 。

   

<custom:HelloWorld ID="HelloWorld1" runat="server" />

    第二種選擇是在Web.Config檔案中註冊此控制項，這樣你就可以在所有的aspx頁面中引用此控制項。相關配置如下：

<pages>

  <controls>

    <add tagPrefix="custom" namespace="myControls"/>

  </controls>

</pages>

   
   
最後一種方式是將控制項添加到Visual
Studio工具箱中，使用時直接拖拉到網頁中。但這個時候你不能在APP_Code檔案夾下建立這個控制項，而必須將其建立為獨立的程式集，具體方法本文
後面將會提到。建立好獨立的自訂控制項後，按右鍵Visual
Studio工具箱，選擇“選擇項”，之後會彈出一個對話方塊，從中選擇你自己的程式集，自訂控制項將自動出現在工具箱上。

嵌入Javascript

    為了獲得更好的用戶端效果，我們需要引入Javascript和CSS樣式表。在ASP.NET中，有一個類叫作ClientScriptManager，可以很方便的對Javascript進行操作，其中比較重要的方法有：

• RegisterClientScriptBlock() 
• RegisterStartupScript() 
• RegisterClientScriptInclude() 
• GetWebResourceUrl() 

    
RegisterClientScriptBlock和RegisterStartupScript方法允許你在網頁中添加內建Javascript腳
本，這兩個方法一般用來添加比較簡單的Javascript指令碼，如果你需要添加複雜的Javascript指令碼，可以使用
RegisterClientScriptInclude或
GetWebResourceUrl()方法。RegisterClientScriptInclude()方法將會在網頁中加入這樣的引用：

    

<script type="text/Javascript" src="SomeScript.js"></script>

   
   
這種方式的缺點在於發布程式的時候需要將獨立的js檔案一起發布，解決這個問題的辦法就是使用GetWebResourceUrl()方法，通過這個方法
可以把js檔案直接嵌入到控制項當中，換句話說就是你發布的程式集將同時包含自訂控制項和獨立的js檔案。與前面註冊控制項一樣，在APP_Code裡建立的
自訂控制項是不能同時包含js檔案的，需要將其發布為獨立的程式集。
    首先我們在Visual
Studio裡建立一個新的項目，類型選擇類庫。為了在類庫工程裡建立自訂控制項，首先需要添加對System.Web.Dll的引用，然後選擇工程裡的
js檔案，將其建置事件屬性修改為嵌入資源。接下來需要在AssemblyInfo中對每一個內嵌資源添加WebResource屬性，只需開啟
Properties裡的AssemblyInfo.cs檔案，添加以下代碼：

[assembly: WebResource("WhoIsLooking.WhoIsLooking.js", "text/javascript")]

    OnPreRender()方法中對js檔案的調用代碼：

// Add Javascript include

string scriptUrl = Page.ClientScript.GetWebResourceUrl( this.GetType(),

"WhoIsLooking.WhoIsLooking.js");

Page.ClientScript.RegisterClientScriptInclude("WhoIsLooking", scriptUrl);

 

嵌入CSS樣式表

    方法與嵌入Javascript類似，在AssemblyInfo.cs中添加：

[Assembly: WebResource("WhoIsLooking.WhoIsLooking.css", "text/css")]

   
    在OnPreRender方法中添加：

// Add style sheet to parent page

string cssUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(),

"WhoIsLooking.WhoIsLooking.css");

HtmlLink cssLink = new HtmlLink();

cssLink.Href = cssUrl;

cssLink.Attributes.Add("rel", "stylesheet");

cssLink.Attributes.Add("type", "text/css");

this.Page.Header.Controls.Add(cssLink);

// Add class name

this.CssClass = "WhoIsLooking";

 

使用Ajax

   
WhoIsLooking控制項採用Ajax技術即時顯示訪客資訊，Ajax是Asynchronous Javascript和
XML的縮寫，利用這個技術可以在不重新整理整個頁面的情況下實現用戶端與伺服器端之間的資料傳送。為了在ASP.NET自訂控制項中實現Ajax需要完成以
下三個步驟：
1 使用 GetCallbackEventReference()發起用戶端請求；
2 實現ICallBackEventHandler 介面響應用戶端的請求，這個介面有兩個方法需要實現：RaiseCallbackEvent()方法以及GetCallbackResult()方法。
3 建立Javascript用戶端函數擷取返回的資料並進行相應的操作。

    WhoIsLooking每5秒鐘發起一次請求，需在OnPreRender()方法中添加以下代碼：

string callback = Page.ClientScript.GetCallbackEventReference

(

this,

null,

"WhoIsLooking.UpdateDisplay",

String.Format("'{0}'", this.ClientID),

"WhoIsLooking.CallbackError",

true);

string startupScript = String.Format("setInterval( /"{0}/", {1} );", callback, _PollingInterval * 1000);

Page.ClientScript.RegisterStartupScript(this.GetType(), "WhoIsLooking", startupScript, true);

   
接下來需要重寫RaiseCallbackEvent()
及GetCallbackResult()方法，RaiseCallbackEvent()方法將目前使用者加入訪客列表，同時也將離開的使用者從列表中刪
除。GetCallbackResult()返回訪客的資訊，包括使用者帳號，姓名，停留時間，瀏覽器資訊，主機名稱，作業系統資訊等。該方法的傳回值為一個
JSON數組，JSON是Ajax請求中表示資訊的標準格式（關於JSON的更多介紹，請訪問json.net）。例如，如果同時有兩個使用者正在瀏覽當前
網頁，JSON的值將會是這樣：

[{userId:"fooglm45cjcycw55qi4yluvk",userName:"SUPEREXPERT//Steve",
duration:"0 minute(s)", browser: "IE 7.0", remoteHost:
"superexpert.com", platform:
"WinXP"},{userId:"1kqatn55sxc4vi55ummxghil",userName:"SUPEREXPERT//Bill",
duration:"0 minute(s)", browser: "Firefox 1.5.0.11", remoteHost:
"superexpert.com", platform: "WinXP"}]

   
    最後，WhoIsLooking控制項通過UpdateDisplay()方法在用戶端顯示使用者資訊，該方法為每一個使用者建立一個<div>層存放使用者資訊。

譯者註：在原文中，WhoIsLooking的實現同時提供了C#和VB的代碼，我這裡只貼出了C#的代碼，使用VB的朋友可到原文中查看，或直接到下載好的源檔案中查看。

完整原始碼下載（包括C#和VB）