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

[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宣告的三個按鈕加入到我的頁面上了:

image

按下新增:

image

按下修改:

image

按下刪除:

image

 

是不是很簡單,這樣就可以很簡單的透過繼承來完成ASP.NET的頁面繼承囉。

游舒帆 (gipi)

探索原力Co-founder,曾任TutorABC協理與鼎新電腦總監,並曾獲選兩屆微軟最有價值專家 ( MVP ),離開職場後創辦探索原力,致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關,都是在為未來儲備能量,2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》,為培養台灣未來的領袖而努力。