ASPNET自定義控件教程

1、ASP.NET自定義控件實例教程ASP.NET自定義控件實例教程2009年4月ASP.NET自定義控件實例教程前 言ASP.NET為開發(fā)人員定義了許多常用的服務器端控件，這些控件擁有完整的生命周期，可以幫助開發(fā)人員完成大部分日常工作，并且，ASP.NET允許開發(fā)人員定義自己的服務器端控件用戶控件和自定義控件。相比較而言，自定義控件編寫起來所做的工作更多一些，但也更靈活，開發(fā)人員可以參與到控件完整的生命周期中，靈活的控制控件的生成，本文檔旨在通過一系列實例使您理解ASP.NET自定義控件的含義和開發(fā)過程。事實本文檔和我一開始規(guī)劃的內容相比較，少了自定義控件設計時支持這一部分，這是我個人也感覺比較

2、遺憾的地方確實時間不太充裕，那么這份PDF文檔算是ASP.NET自定義控件實例教程的一個終結。本教程中的代碼可以在在此要感謝我的老師，是她帶領我進入軟件開發(fā)的行業(yè)，并且我從她身上學到了很多軟件開發(fā)以外的東西，她對我產(chǎn)生了很大的影響，還要感謝在編寫過程中博客園（blo）和許多熱心網(wǎng)友的大力支持，同時還要感謝我的妻子和我的父母，有了他們的支持我才得以安心工作。再次感謝大家。作者介紹王峰，專注與.NET技術的開發(fā)，目前從事軟件開發(fā)和培訓工作。我的MSN是wangfengv，您可以通過該地址與我聯(lián)系。ASP.NET自定義控件實例教程目 錄ASP.NET自定義控件介紹.1第一天 簡單的星級控件.21.

3、引言.22. 分析.23. 實現(xiàn).24. 總結.6第二天 帶有自定義樣式的星級控件.71. 引言.72. 分析.73. 實現(xiàn).84. 總結.12第三天 使用控件狀態(tài)的星級控件.131. 引言.132. 分析.133. 實現(xiàn).144. 總結.18第四天 折疊面板自定義控件.191. 引言.192. 分析.193. 實現(xiàn).204. 總結.28第五天 真正可以評分的星級控件.291. 引言.292. 分析.293. 實現(xiàn).304.總結.36第六天 可以綁定數(shù)據(jù)源的星級控件.371. 引言.372. 分析.383. 實現(xiàn).404. 總結.45第七天 開發(fā)具有豐富特性的列表控件.471. 引言.472.

4、 分析.473. 實現(xiàn)簡單列表控件.494. 實現(xiàn)豐富特性列表控件.505. 總結.58第八天 可以顯示多個條目星級評分的列表控件.591. 引言.592. 分析.593. 實現(xiàn).624. 總結.74ASP.NET自定義控件實例教程第九天 自定義GridView.751. 引言.752. 分析.753. 實現(xiàn).764. 總結.85第十天 實現(xiàn)分頁功能的DataList.861. 引言.862. 分析.863. 實現(xiàn).864. 總結.94ASP.NET自定義控件實例教程ASP.NET自定義控件介紹ASP.NET自定義控件是已編譯的服務器端控件，它將用戶界面和其他功能都封裝到可復用的包中。自定義控

5、件和標準的ASP.NET控件相比，除了它們綁定一個不同的標記前綴，并且必須進行顯式的注冊和部署以外并沒有什么不同。此外，自定義控件擁有自己的對象模型，能夠觸發(fā)事件，并支持Microsoft Visual Studio的所有設計時特性，諸如屬性窗口、可視化設計器、屬性生成器和工具箱。自定義控件是一個繼承自某個控件基類的類，通常使用以下兩種方法來創(chuàng)建自定義控件。如果發(fā)現(xiàn)某個現(xiàn)有控件只滿足部分需求，關缺少某些關鍵的特征，則只需從該控件類中派生出一個新類并根據(jù)需要進行擴展。如果現(xiàn)有的服務器控件不能滿足需求，可以考慮從System.Web.UI.Control類或System.Web.UI.WebCon

6、trols.WebControl類繼承，實際上WebControl類繼承自Control類，添加了某些風格特征。所有的自定義控件最終展現(xiàn)給用戶的仍是由HTML、CSS和JavaScript混合在一起的頁面，所以在開發(fā)自定義控件時需要考慮使用現(xiàn)有的網(wǎng)頁技術能否實現(xiàn)，如果在純HTML環(huán)境中無法實現(xiàn)某個特征的話自定義控件同樣無法做到。開發(fā)自定義控件時經(jīng)常會用到的命名空間如下：z System.ComponentModel提供用于實現(xiàn)組件和控件運行時和設計時行為的類，經(jīng)常使用該命名空間中的類設置自定義控件的特性或進行類型轉換等工作。z System.Web.UI包含ASP.NET服務器控件基本的類，C

7、ontrol類位于該命名空間下。z System.Web.UI.WebControls包含在頁面上創(chuàng)建ASP.NET服務端控件的類，常用的Button、Label、TextBox類均位于該命名空間下。z System.Web.UI.HtmlControls同樣包含一系列服務器端控件，與System.Web.UI.WebControls不同的是該命名空間下的類直接映射到一些HTML標記上，并且這些類都以HTM作為前綴。第 1 頁ASP.NET自定義控件實例教程第一天 簡單的星級控件1. 引言我們經(jīng)常會在網(wǎng)頁上看到使用星形圖案表示對某個軟件或某篇文章的評價，通常以五個星形作為最高標準，指定的等級對

8、應使用實心填充，如圖1-1所示，在學習ASP.NET自定義控件的第一天，我們將開發(fā)這樣的自定義控件。圖1-1 星形評分2. 分析可以看到這樣的一個自定義控件包含兩部分：顯示的文本和包含兩種圖案（實心和空心星形）的圖片，為了呈現(xiàn)出這樣的結果，最方便的就是將這兩部分放到包含一行兩列的表格中。接下來要考慮的就是如何根據(jù)評分顯示若干實心和空心星形?？吹竭@個圖案的第一個想法可能就是根據(jù)評分首先顯示實心圖形，再判斷還需要顯示幾個空心星形（用5減評分），這樣的話需要做多次循環(huán)才能實現(xiàn)，但是在HTML里有更好的實現(xiàn)方法。想一下在使用CSS設置背景圖片時可以設置background-repeat屬性，該屬性標識

9、背景圖片按哪個方向重復，可以利用這個特性首先顯示一個外層的div，該div始終顯示5個空心的星形圖形，在該層中嵌套另一個div，內層div顯示實心星形圖案。background-repeat、background-image、background-color、background-position構成了設置背景樣式的屬性族既然可以按X方向重復星形背景，那么顯示指定個數(shù)的星形也就有答案了我們可以根據(jù)得分設置指定層（div）的寬度即可，而且為了方便，將兩個星形圖案放置到一個圖片文件里，再應用background-position顯示指定位置星形即可。根據(jù)以上分析，此自定義控件中需要具有兩個屬性：

10、屬性CommentScore 評分項目注釋，字符串類型 得分，根據(jù)該屬性顯示相應的實心圖形，數(shù)字類型 描述3. 實現(xiàn)1. 首先創(chuàng)建解決方案，包含ControlLibrary類庫（定義了自定義控件類）和Web網(wǎng)站。2. 在類庫中創(chuàng)建Image目錄，并放置使用的星形圖片stars.gif，為了能夠在網(wǎng)站中引用程序集中的資源文件，需要將圖片的Build Action（生成動作）屬性設置為Embedded Resource（嵌入資源），并且在AssemblyInfo.cs中聲明要使用的資源文件，如下所示：assembly: WebResource(ControlLibrary.Image.stars.

11、gif,image/jpg)第 2 頁ASP.NET自定義控件實例教程使用了WebResource（實際上是WebResourceAttribute類，為了使用該類需要引入System.Web.UI命名空間）定義了使用的資源，該類的構造函數(shù)使用了兩個參數(shù)，第一個參數(shù)是Web資源的名稱，第二個參數(shù)是MIME類型。Web資源的名稱必須遵循特定規(guī)則：命名空間名稱+目錄名稱+文件名稱，中間用半角點字符分隔。MIME類型對于不同的文件有不同的表示，詳細的MIME列表可參考相關資料。資源的名稱可以通過.NET Reflector之類的工具瀏覽。載入某個程序集后，如果嵌有資源文件，可以通過Resources

12、目錄瀏覽嵌入的資源3. 在類庫中創(chuàng)建自定義控件類Star.cs，并引入必須的命名空間： using System;using System.ComponentModel;using System.Web.UI;using System.Web.UI.WebControls;namespace ControlLibrarypublic class Star : WebControl4. 接下來定義Score和Comment屬性，將這兩個屬性存儲在ViewState中，同時如果用戶沒有設計得分的情況下將得分設置為0，也就是將得分的默認值設置為0，這里使用到了DefaultValutAttribut

13、e類，該類用于設置屬性的默認值。 DefaultValue(0)public int Scoregetobject obj = ViewStateScore; return obj = null ? 0 : Convert.ToInt32(obj);setViewStateScore = value;public string Commentgetobject obj = ViewStateComment;第 3 頁ASP.NET自定義控件實例教程return obj = null ? string.Empty : Convert.ToString(obj);setViewStateComme

14、nt = value;由于HTTP請求完成之后會斷開連接，把屬性保存到私有變量中不會滿足我們的要求（提交回發(fā)時會重新生成自定義控件類，有可能丟失屬性值），所以保存到ViewState中，回發(fā)時能夠正確恢復屬性值5. 重寫CreateChildControls方法，該類在Control類上定義，此方法用于創(chuàng)建控件層次，以便為回發(fā)和呈現(xiàn)做準備。在該方法中調用了自定義CreateControlHierarchy方法以創(chuàng)建控件層次：protected override void CreateChildControls()base.CreateChildControls();CreateControlH

15、ierarchy();6. 在CreateControlHierarchy方法中創(chuàng)建一個一行兩列的表格，并分別調用CreateComment方法和CreateStarts方法創(chuàng)建注釋和星形圖按： protected virtual void CreateControlHierarchy()Table table = new Table(); TableRow row = new TableRow(); TableCell comment = new TableCell(); table.Rows.Add(row);CreateComment(comment);row.Cells.Add(com

16、ment);CreateStars(stars);row.Cells.Add(stars);this.Controls.Add(table); TableCell stars = new TableCell();7. 實現(xiàn)CreateComment方法，該方法接收一個TableCell參數(shù)當做顯示文本的容器，直第 4 頁ASP.NET自定義控件實例教程接設置單元格的文本為注釋字符串： private void CreateComment(TableCell cell) cell.Text = Comment;8. 實現(xiàn)CreateStarts方法，該方法亦接收一個TableCell當做參數(shù)，首

17、先取得圖片資源文件的路徑，并在單元格里創(chuàng)建嵌套的層（在服務器端控件中Panel類與div相對應）并根據(jù)得分設設置其相應屬性： private void CreateStars(TableCell cell)Panel panBg = new Panel();panBg.Style.Add(HtmlTextWriterStyle.Width, 80px);panBg.Style.Add(HtmlTextWriterStyle.Height, 16px);panBg.Style.Add(HtmlTextWriterStyle.TextAlign, left);panBg.Style.Add(Htm

18、lTextWriterStyle.Overflow, hidden);panBg.Style.Add(HtmlTextWriterStyle.BackgroundImage, starPath);cell.Controls.Add(panBg);Panel panCur = new Panel();string width=Score*16+px;panCur.Style.Add(HtmlTextWriterStyle.Width, width);panCur.Style.Add(HtmlTextWriterStyle.Height, 16px); panCur.Style.Add(HtmlT

19、extWriterStyle.BackgroundImage, starPath); panCur.Style.Add(background-position, 0px 0px); panCur.Style.Add(background-repeat, repeat-x);panBg.Controls.Add(panCur); panBg.Style.Add(background-position, 0px -32px); panBg.Style.Add(background-repeat, repeat-x); ControlLibrary.Image.stars.gif);9. 重寫父類的

20、Render方法，在該方法中將服務器控件的內容傳遞給HtmlTextWriter對象以在客戶端呈現(xiàn)內容，在該方法中調用了PrepareControlForRender方法：protected override void Render(HtmlTextWriter writer)PrepareControlForReader();base.Render(writer);第 5 頁ASP.NET自定義控件實例教程10. 實現(xiàn)PrepareControlForRender方法，該方法用于在呈現(xiàn)前進行其他樣式的設置，在本控件中，只是簡單的設置了表格的CellSpacing和CellPadding屬性：

21、 private void PrepareControlForReader() table.CellSpacing = 0; table.CellPadding = 0; Table table = (Table)this.Controls0; if (this.Controls.Count 1) return;11. 在網(wǎng)站中添加ControlLibrary類庫的引用，并在Default.aspx頁面中加入自定義控件的聲明：12. 在頁面相應位置定義自定義控件：13. 預覽效果。在多個頁面使用自定義控件在每一個頁均需要加入聲明，有一個更好的替代方法是在web.config文件中聲明自定義控件

22、，在配置節(jié)中加入add tagPrefix=cc assembly=ControlLibrary 4. 總結本次任務里我們通過繼承WebControl類創(chuàng)建了一個很簡單的星級自定義控件，隨著學習的加深您將逐漸意識到該控件實際上包含了自定義控件開發(fā)的基本步驟創(chuàng)建自控件、設置樣式、進行呈現(xiàn)，通過把相應的動封裝為不同的方法使代碼看起來更清晰，并且掌握了如何在自定義控件中使用資源文件，這在自定義控件使用大量樣式或者腳本時尤其有用。最后講解了在開發(fā)完控件后如何在頁面中使用。第 6 頁ASP.NET自定義控件實例教程第二天 帶有自定義樣式的星級控件1. 引言在上個任務里，通過繼承WebControl類創(chuàng)建

23、了一個簡單的星級控件，并且也可以設置字體邊框等相關樣式，但是需求馬上又來了，如果我們想加入自定義的樣式，例如希望文本可以自由顯示到圖案左邊或下邊，如下圖所示，對于這樣的要求怎么辦？圖2-1 文字顯示到下方的星級控件2. 分析看到上方的圖形，很容易想到為第一個任務里的Star類添加一個屬性，標識是在左面還是下面顯示文本，這的確能夠解決現(xiàn)有的問題，但如果過一陣子希望能夠設置標簽文本的顏色怎么辦，很容易，再添加一個屬性，具有敏銳眼光的讀者一定想到，這不是解決問題的最好方法，因為可能會陸續(xù)提出新的樣式的要求，那么比較合理的解決方法是單獨添加一個樣式屬性，該屬性持有一個樣式集合，通過修改這個樣式集合可以

24、隨時添加新的外觀特征，最后再呈現(xiàn)控件的時候只需要使用第一個單元格應用該樣式就可以了。在.NET中，System.Web.UI.Style類封裝了Web服務器外觀的屬性，例如可以設置背景色、前景色或邊框等，TableStyle類和TableItemStyle類均擴展了Style類，從它們的名字就可以想到TableStyle類用于設置表格控樣的樣式，而TableItemStyle類用于設置TableRow或TableCell的樣式，它們之間的關系如圖2-2所示：圖2-2 樣式類關系對于本次任務來說，我們要設置某個單元格的樣式，并且添加了自定義特性，因此選擇繼承TableItemStyle類即可。確

25、定為Star類添加一個擴展了TableItemStyle類的屬性后，樣式的問題解決了，接下來要考慮的就是如何保存樣式如性，像上次任務里直接保存到ViewState中嗎，還是有更好的選擇。很顯然，ViewState不能直接保存某個對象，需要進行序列化操作后才可以進行，默認情況下使用的是BinaryFormatter作為對象的序列化器，該類會把對象所有的成員全部序列化，而不管是公有的或私有的，這樣做的話可能導致效率不是很高，為了自己控制屬性的保第 7 頁ASP.NET自定義控件實例教程存，需要繼承IStateManager接口，該接口定義任何類為支持服務器控件的視圖狀態(tài)管理而必須實現(xiàn)的屬性和方法，

26、其定義的成員有： 成員IsTrackingViewState屬性LoadViewState方法SaveViewState方法TrackViewState方法 描述 獲取一個值，批示服務器控件是否正在跟蹤其視圖狀態(tài)更改 加載服務器控件以前保存的視圖狀態(tài) 將服務器控件的視圖狀態(tài)保存到Object 指示服務器控跟蹤其視圖狀態(tài)更改根據(jù)以上分析，為了實現(xiàn)需求需要定義一個繼承自TableItemStyle并實現(xiàn)IStateManager接口的樣式類TextItemStyle，在該類中增加DisplayTextAtBottom屬性定義是否在底部顯示注冊文本，并在上次任務中開發(fā)的Star類里增加類型為Text

27、ItemStyle的屬性以設置樣式。3. 實現(xiàn)1. 在上次任務解決方案的ControlLibrary類庫中添加TextItemStyle類，該類繼承TableItemStyle類并實現(xiàn)了IStateManager接口：public class TextItemStyle:TableItemStyle,IStateManager 2. 在該類中定義布爾類型的DisplayTextAtBottom屬性，使用一個私有變量保存該屬性設置；當該屬性修改時需要通知Star類中的樣式屬性以應用新的樣式，所以需要使用NotifyParentProperty屬性修飾：private bool _displayT

28、extAtBottom;NotifyParentProperty(true)public bool DisplayTextAtBottomgetreturn _displayTextAtBottom;set_displayTextAtBottom = value;3. 實現(xiàn)IStateManager中的IsTrackingViewState屬性和TrackViewState方法，由于在這兩個成員里不需要額外的動作，所以只需要簡單的訪問父類成員即可：bool IStateManager.IsTrackingViewStategetreturn base.IsTrackingViewState;第

29、 8 頁ASP.NET自定義控件實例教程void IStateManager.TrackViewState()base.TrackViewState();4. 實現(xiàn)IStateManager接口SaveViewState方法以保存自定義屬性： object IStateManager.SaveViewState()return p; Pair p = new Pair(); p.Second = _displayTextAtBottom; p.First=base.SaveViewState();這里使用了System.Web.UI.Pair類用于保存兩個相關的對象，與此類似的還是System

30、.Web.UI.Triplet類，用于保存三個相關的對象。需要保存更多的數(shù)據(jù)時，可以考慮定義一個數(shù)組。5. 實現(xiàn)IStateManager接口LoadViewState方法，從保存的視圖數(shù)據(jù)中恢復必要的設置： void IStateManager.LoadViewState(object savedState)base.LoadViewState(p.First);_displayTextAtBottom = Convert.ToBoolean(p.Second); if (savedState != null) Pair p = (Pair)savedState; 可以看到TextItemS

31、tyle中對接口的實現(xiàn)是通過接口名稱.成員名稱實現(xiàn)的，即所謂的顯式繼承，采用這種繼承方向，不能直接通過類調用接口方法，而必須將類轉換為接口類型后方可調用。6. 在Start類中添加樣式屬性，并調用接口方法進行視圖操作：private TextItemStyle _textStyle;PersistenceMode(PersistenceMode.InnerProperty)第 9 頁ASP.NET自定義控件實例教程public TextItemStyle TextStylegetif (IsTrackingViewState)(IStateManager)_textStyle).TrackVi

32、ewState();return _textStyle;set_textStyle = value; if (_textStyle = null) _textStyle = new TextItemStyle();該屬性使用PersitenceMode標識，該類只是通知Visual Studio 2005，使用aspx源文件中的一個嵌入標記來永久存儲該風格的內容。7. 修改CreateControlHierarchy方法，根據(jù)樣式屬性設置決定是否創(chuàng)建新行： protected virtual void CreateControlHierarchy()if (TextStyle.DisplayT

33、extAtBottom)row.Cells.Add(stars);TableRow text = new TableRow();text.Cells.Add(comment);table.Rows.Add(text);elserow.Cells.Add(comment); TableCell comment = new TableCell(); CreateComment(comment); TableCell stars = new TableCell(); CreateStars(stars); Table table = new Table(); TableRow row = new T

34、ableRow(); table.Rows.Add(row);第 10 頁ASP.NET自定義控件實例教程row.Cells.Add(stars);this.Controls.Add(table);8. 最后修改呈現(xiàn)方法PrepareControlForRender，將樣式應用到文字單元格上： private void PrepareControlForReader()if (TextStyle.DisplayTextAtBottom)cell = table.Rows1.Cells0;elsecell = table.Rows0.Cells0;cell.ApplyStyle(TextStyl

35、e); TableCell cell = null; table.CellSpacing = 0; table.CellPadding = 0; Table table = (Table)this.Controls0; if (this.Controls.Count 1) return;9. 在網(wǎng)站中聲明并定義控件： 瀏覽運行結果。雖然我們在TextItemStyle類中定義了保存和讀取視圖狀態(tài)的方法，但是在回發(fā)時能夠正常工作嗎，嘗試在頁面的PageLoad方法里設置樣式的背景色為紅色：if (!IsPostBack)star.TextStyle.BackColor=System.Drawing.Color.Red;接下來在頁面中添加一個服務器端按鈕，瀏覽頁面并點擊提交按鈕，會出現(xiàn)怎樣的結果？可以看到紅色背景丟失了，這是由于雖然我們定義了樣式類屬性保存的方法，但它還沒有真正的參與到頁面視圖讀寫過程中，為此，需要重寫Start類的SaveViewState和LoadVi第 11 頁ASP.NET自定義控件實例教程ewState方法，指定如何將數(shù)據(jù)保存到視圖狀態(tài)中，以及如何從視圖狀態(tài)中恢復