ASP.NET 控制項開發

1. ASP.NET控制項開發 恆逸資訊 技術副理 許嘉仁

2. 大綱 • 如何開發可以在Visual Studio.NET設計工具中重複使用的Control • 如何利用控制項快速開發ASP.NET網頁 • 建置使用者控制項(User Control) • 開始建置自訂控制項(Custom Control) • 控制項的屬性 • 控制項產生網頁結果 (Rendering) • 觸發事件 • 組合現有的控制項 • 加上 client script 的行為

3. 什麼是ASP.NET Server Control? • 以使用上來說 • Server-side 有 UI 的元件(component) • 具備屬性, 方法, 事件 • 目的是為了產生HTML, XML, script…等等 • 還有處理使用者操作過程所 Post 回來的資料和事件 • 以技術的角度來說 • 實作一個 .NET 的控制項類別 • 繼承自 System.Web.UI.Control or System.Web.UI.WebControls.WebControl

4. 兩種運用的方向 • User Controls(使用者控制項 *.ascx) • 容易建置 –就像開發網頁 • 一般在同一個應用程式使用 • Visual Studio .NET 設計時期支援較少 • Custom Controls(自訂控制項) • 支援多個應用程式使用 • 安裝在 Global Assembly Cache (GAC) • Visual Studio .NET 設計時期的豐富支援

5. 建置使用者控制項(User Control) • 如同開發一般網頁程式(*.aspx) • 將網頁包裝成控制項 • 以拖曳的方式重複使用 • 由於VS.NET 設計時期支援較少, 使用上必須注意 • 宣告物件變數 • 變數名稱必需與控制項 ID 相同 • 跨應用程式使用較為麻煩 • 容易開發為其最大優點

6. Namespace Class Sets the Items property on l1 標籤定義 • 在執行時期 Parse 標籤定義 • 建立控制項實體 • 透過設定的相關屬性產生結果 <acme:List id=l1 liststyle=number runat=server> <Items> <acme:ListItem>first item</acme:ListItem> <acme:ListItem>second item</acme:ListItem> <acme:ListItem>third item</acme:ListItem> </Items> </acme:List>

7. 在執行時期使用控制項 • 對.NET的程式碼來說, 控制項就是一個物件 • 而控制項的存取就是使用其ID • 在網頁的事件中掌控這些控制項 • Page_Load, Button1_Click, etc. void Page_Load(object send, EventArgs e) { Label1.Text=“Test”; }

8. 網頁/控制項 的執行流程 第一次載入執行 初始化頁面中的控制項 Init 在 !IsPostBack的條件判斷中執行開發者只有第一次需要執行的程式 Load 執行 CreateChildControls() 完成整個控制項樹狀結構 PreRender SaveViewState 控制項存放狀態值到State Bag Render 每個控制項產生結果 Dispose 網頁和所有的控制項結束

9. 網頁/控制項 的執行流程 Post back Init LoadViewState 從ViewState取出上次控制項的狀態值 Load 接收從 HTTP form 送過來的資料, 包括控制項的值以及發生的事件 Postback data Postback events 事件的觸發順序會依照控制項樹狀結構, 觸發的事件會經由 Post 傳送回來 PreRender SaveViewState Render Dispose

10. SimpleLabel 控制項 • 目的: 產生文字字串 • 相關屬性: • Text: 欲產生的字串 • 控制項自動維護狀態的方式 • 當使用者改變 Text 屬性, 程式必須將改變的值寫入ViewState, 若沒有改變則秀出原值

11. Text 屬性 public String Text { get { object o = ViewState[“Text"]; if (o == null) return String.Empty; else return (String)o; } set { ViewState[“Text"] = value; } }

12. SimpleLabel

13. BulletedList 控制項 • 產生起始的 <UL> 標籤 • 繼承自ListControl • 繼承之後自動具備以下功能, 不用自己寫 : • ListItemCollection • Data-binding • 整合VS.NET • 覆寫 rendering

14. 覆寫 Rendering • 覆寫 Render方法: protected override void Render(…) { writer.Write(Text);} • 或覆寫其他獨立的 Render 方法: public override void RenderBeginTag(…) { writer.RenderBeginTag(HtmlTextWriterTag.Ul);} protected override void RenderContents(…) { foreach (ListItem li in Items) { RenderListItem(output, li); }}

15. BulletedList

16. SimpleLinkButton • 在 SimpleLabel 控制項加入 Click 事件 • 實作 IPostBackEventHandler 介面 • 利用Page.GetPostBackClientHyperLink()產生 Post-back 的 Script • 將 Client 端瀏覽器的事件對應到 Server 端事件

17. 提供外界使用的事件 • 提供事件的程式樣版 public event EventHandler Click; protected virtual void OnClick(EventArgs e) { if (Click != null) { Click(this,e); } }

18. 撰寫事件觸發程式 • 控制項必需實作 IPostBackEventHandler介面 • 實作介面方法 RaisePostBackEvent() public class SimpleLinkButton : SimpleLabel, IPostBackEventHandler { public void RaisePostBackEvent(string eventArg) { OnClick(EventArgs.Empty); } }

19. 產生Post-back Script • 利用Page.GetPostBackClientHyperlink() 產生Post-back Script • 原來事件的觸發是經由超連結模擬Submit: __doPostBack() protected override void Render(writer) { string eventRef = Page.GetPostBackClientHyperlink(this,""); output.AddAttribute(HtmlTextWriterAttribute.Href, eventRef); output.RenderBeginTag(HtmlTextWriterTag.A); output.Write(Text); output.RenderEndTag(); } <a href="javascript:__doPostBack('CHl1','')">ctl</a>

20. IPostBackEventHandler Button1 Button1 .RaisePostBackEvent() Button2 raises OnClick() Checkbox1 Listbox1 calls event handlerButton1_Click() HTTP form post 觸發一個控制項事件流程 • Maps browser event to server event ASP.NET Server App Click!

21. SimpleLinkButton

22. 實作MyMenu

23. Microsoft Developer NetworkMSDN Subscriptions “MSDN Subscriptions 提供程式開發者必備的所有資源, 其中更包含所有您在建構 XML Web 服務及應用程式時所需的即時資訊”

24. Delivered By Universal 2yr NT$106,330 Visual Studio .NET Enterprise Architect Office / Productivity Applications All .NET Enterprise Servers Operating Systems Product, SDK, and DDK documentation and code samples Enterprise 2yr NT$79,920 MSDN Subscriptions (Microsoft Open License) Visual Studio .NET Enterprise Developer Core .NET Enterprise Servers Operating Systems Product, SDK, and DDK documentation and code samples Professional 2yr NT$44,540 Visual Studio .NET Professional Operating Systems Product, SDK, and DDK documentation and code samples