核心提示：本文通過實現一個服務端控件來講解一下控件開發，該控件的功能如下...

本文通過實現一個服務端控件來講解一下控件開發，該控件的功能如下：

1.顯示服務端時間，并不停更新

2.通過手動點擊刷新按鈕以AJAX獲取服務端最新時間

3.能拖動

4.能記住在頁面上的位置，頁面回傳后位置不變

5.能配置一個定時時間，一到這個時間，自動回傳觸發用戶自定義的事件，

首先新建一個類庫項目HampWebControl，再新建一個類叫TipTime1，繼承WebControl類。如果不是從已有控件中繼承，一般就繼承WebControl類，它是所有ASP.NET服務端控件的基類。

我們編譯這個項目，再新建一個網站項目，引用HampWebControl項目，新建頁面，在工具箱中拖一個TipTime1控件到頁面上。

我們運行該頁面，就會發現HTML代碼如下：

就是說默認是呈現成一個span標簽，可以通過重載WebControl基類的TagKey屬性來改變。

這樣呈現在頁面上就是個DIV。 HtmlTextWriterTag是個枚舉，包含了很多HTML標簽。

WebControl基類的Render用來呈現內容，重載它便可以往頁面上呈現任何自定義的標簽。

這樣在頁面上就顯示了一個a標簽，如下圖所示：

注意看，這時a標簽是在DIV外面，如何將它放到DIV里面呢？這就要重載WebControl基類的RenderContents方法

這樣這個a標簽就在div里面了，如下圖所示：

接下來為最外圍的DIV加一些樣式，重載基類的AddAttributesToRender方法

這里有兩種寫法，利用HtmlTextWriterStyle枚舉或者直接寫CSS屬性名。

到這里大家了解了自定義控件如何呈現在頁面上。我們再新建一個類TipTime2，把依舊重載TagKey為DIV，然后重載RenderContents，顯示一個span標簽與一個input標簽。

這樣頁面上顯示了當前服務端的時間與一個按鈕，如圖所示：

接下來我們來讓用戶可以配置按鈕上的文字，為類TipTime2增加一個Text屬性：

同時將呈現按鈕的代碼改成：

這樣Text屬性便出現在設計視圖的屬性窗口。

修改Text的值，頁面上按鈕上的文本也跟著變了。注意Text屬性是存儲在ViewState中，這樣保證了回發后值不會丟失。

現在的問題是時間不會變，我們得用javascript來改變它的值。新建一個JS文件TipTime2.js。

這里先要說明的是，項目中已有一個JS文件__WebControlBase.js，里面是一些公用的JS方法，比如綁定事件、獲取控件坐標等，所有的方法都是

該方法的擴展方法：var HampWebControl=function{ }

//停止事件冒泡 HampWebControl.prototype.StopBubble = function { if { e.stopPropagation; } else { window.event.cancelBubble = true; } }

這樣可以減少全局變量，盡可能避免與其它js代碼的變量重名。我將每個控件作為HampWebControl方法的一個擴展方法存在，同時每個控件對

應一個數組，用以存儲頁面上所有該控件的js對象。每個控件對應一個Refresh方法，用以重新綁定事件，這是為了解決回傳后的問題。

現在控件呈現成HTML的結構是<div><span/><input/></div>，有3個標簽，我們需要用3個變量來分別存儲它們的DOM對象，方便以后操作。

  Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |