[ASP.NET]實作Webform的畫面繼承

2009-11-29

25576
0
ASP.NET

開發過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堂課》，為培養台灣未來的領袖而努力。

回首頁