[ASP.NET]實作Webform的畫面繼承
開發過Winform的人都曉得,Winform的畫面是可以繼承的,只要在父類別拉好UI並寫完對應的事件,接著繼承的子類別都可以直接享有父類別所有的UI與功能,這對開發來說是很省時省力的,但偏偏在ASP.NET上是沒有這樣的機制的,但我們一樣可以透過繼承的機制來達成類似的功能,但會比較麻煩一些,以下簡單介紹一下如何達成:
- 建構父類別
一般我們在撰寫維護程式時,新增、修改、刪除等基本功能是一定要具備的,我們如果不想要在每支程式中撰寫類似的Code,做法其實很多種,但今天既然我們講繼承,我就直接以繼承的作法來說明了,我們直接看Code,很簡單:
using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebApplication1 { //繼承Page public class BasePage : System.Web.UI.Page { //因為是動態元件,所以要自己宣告元件 protected System.Web.UI.WebControls.ImageButton btnAdd = new ImageButton(); //新增 protected System.Web.UI.WebControls.ImageButton btnEdit = new ImageButton(); //修改 protected System.Web.UI.WebControls.ImageButton btnDelete = new ImageButton(); //刪除 protected void InitializeComponent() { //註冊EventHandler this.btnAdd.Click += new System.Web.UI.ImageClickEventHandler(this.btnAdd_Click); this.btnEdit.Click += new System.Web.UI.ImageClickEventHandler(this.btnEdit_Click); this.btnDelete.Click += new System.Web.UI.ImageClickEventHandler(this.btnDelete_Click); //註冊頁面載入時呼叫的事件 this.Load += new System.EventHandler(this.Page_Load); } protected override void OnInit(EventArgs e) { base.OnInit(e); InitializeComponent(); } protected virtual void Page_Load(object sender, System.EventArgs e) { //給ID btnAdd.ID = "btnAdd"; btnEdit.ID = "btnEdit"; btnDelete.ID = "btnDelete"; //指定圖檔 btnAdd.ImageUrl = "BtnAdd.gif"; btnEdit.ImageUrl = "BtnEdit.gif"; btnDelete.ImageUrl = "BtnDelete.gif"; //加入到子類別 Page.FindControl("ToolBar").Controls.Add(btnAdd); Page.FindControl("ToolBar").Controls.Add(btnEdit); Page.FindControl("ToolBar").Controls.Add(btnDelete); } protected void btnAdd_Click(object sender, System.Web.UI.ImageClickEventArgs e) { Response.Write("執行新增動作!!"); } protected void btnEdit_Click(object sender, System.Web.UI.ImageClickEventArgs e) { Response.Write("執行修改動作!!"); } protected void btnDelete_Click(object sender, System.Web.UI.ImageClickEventArgs e) { Response.Write("執行刪除動作!!"); } } }
在作法上有幾個重要步驟:
1.新增類別,並繼承Page類別
2.宣告對應的元件並賦與ID與圖檔路徑
3.註冊Event
4.撰寫Event細節
5.透過FindControl將元件加入到子類別中
- 撰寫子類別
由於BasePage是透過ToolBar這個元件來將其宣告的三個按鈕加入到子類別中,因此我們知道子類別除了要繼承BasePage外,應該也需要在畫面上拉一個ToolBar的Contrainer,如下所示,子類別對應的Default.aspx中我宣告了一個div,名稱叫做ToolBar,並切記一定要runat="server":
<!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 xmlns:fb="http://www.facebook.com/2008/fbml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div runat="server" id="ToolBar" /> </form> </body> </html>
子類別中我除了改掉繼承外,什麼也沒寫:
using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using Facebook; using Facebook.Rest; using Facebook.Session; using Facebook.Schema; namespace WebApplication1 { public partial class _Default : BasePage { protected void Page_Load(object sender, EventArgs e) { } } }
- 驗證功能
這樣就已經完成了簡單的頁面繼承功能囉,我們來驗證一下吧,開啟畫面會發現在我在BasePage宣告的三個按鈕加入到我的頁面上了:
按下新增:
按下修改:
按下刪除:
是不是很簡單,這樣就可以很簡單的透過繼承來完成ASP.NET的頁面繼承囉。
游舒帆 (gipi) 探索原力Co-founder,曾任TutorABC協理與鼎新電腦總監,並曾獲選兩屆微軟最有價值專家 ( MVP ),離開職場後創辦探索原力,致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關,都是在為未來儲備能量,2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》,為培養台灣未來的領袖而努力。 |