[ASP.NET WebForm] 使用者控制項(usercontrol) 由呼叫端委派 ( delegate )行為

使用者控制項(usercontrol) 由呼叫端委派 ( delegate )行為

剛好最近在開發系統有遇到這種問題,

當畫面非常複雜、可重用....等等原因,

我們可能就會使用 Usercontrol,

那在其中可能會有一些按鈕是要控制呼叫端的一些狀態,

例如 : 切換 MultiView、更改呼叫端狀態值或顯示訊息....等等,

這就是我們今天要討論的問題了!

情境:

有一個 MultiView 擁有兩個 View可供切換,

First Page 可以透過一個使用者控制項的按鈕 回到 Second Page ,

反之亦然。


 

簡單的畫面程式碼如下圖所示 :

<div>
            <asp:MultiView ID="page_mv" runat="server">
                <asp:View ID="firstPage_vw" runat="server">
                    <h1>Page 1</h1>
                    <uc1:GoBack runat="server" id="goBackSecondPage" />
                </asp:View>
                <asp:View ID="secondPage_vw" runat="server">
                    <h1>Page 2</h1>
                    <uc1:Goback runat="server" id="goBackFirstPage" />
                </asp:View>
            </asp:MultiView>
</div>

誤區:

這裡可能有人會開始嘗試在 UserControl 內去找呼叫端控制項操作它,

回頭想想這樣的設計是否合理、具有彈性,

在 Usercontrol 內嘗試抓呼叫端控制項的作法會讓你緊緊相依在呼叫端的畫面上,

如果有很多地方都需要做這樣的功能,

你會需要為每一個呼叫端設定一個按鈕並控制顯示,

且需要調整顯示跟修改 OnClick() 事件,

想當然我們不可能這樣做。

 

解法:

我們可以往職責分離的方向去思考,

誰應該知道要切換到哪一個頁面呢,

答案應該是我們的呼叫端來控制,

所以我們應該要開一個接口讓呼叫端能夠控制,

那要如何辦到呢?

我們可以透過 eventdelegate 來達成此效果。

呼叫端用法

    public partial class demo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                page_mv.SetActiveView(secondPage_vw);
            }

            //註冊返回第一頁
            goBackFirstPage.goBackHandler += () =>
            {
                page_mv.SetActiveView(firstPage_vw);
            };

            //註冊返回第二頁
            goBackSecondPage.goBackHandler += () =>
            {
                page_mv.SetActiveView(secondPage_vw);
            };
        }
    }

Usercontrol 接口

    public partial class GoBack : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void goBack_btn_OnClick(object sender, EventArgs e)
        {
            //呼叫端有設定就觸發它
            goBackHandler?.Invoke();
        }

        public delegate void GoBackHandler();
        public event GoBackHandler goBackHandler;
    }

使用畫面

可以看到使用同一個使用者控制項(usercontrol)開出的接口,

呼叫端委派達成不同的行為達成需求,

減少程式碼的重複。

 

結論:

Event 、 Delegate 都是非常好用的東西,

可以幫助你分離職責完成更好用的工具,

下次不妨可以嘗試看看,

謝謝收看 !!

範例程式碼 : https://github.com/hatedinny1/UsercontrolTriggerChangeViewByDelegate