ASP.NET 使用者控制項進階：自訂屬性與事件實作完整教學

ASP.NET 2.0 的 Web Forms 程式模型以事件驅動為核心，讓 Web 開發體驗接近 Windows Forms。本文透過登入/登出使用者控制項 實作，示範如何為使用者控制項添加自訂屬性與自訂事件，實現控制項與容器頁面的雙向通訊。

前端標記 (.ascx)

<%@ Control Language="c#" AutoEventWireup="false" 
    Codebehind="LogInOutControl.ascx.cs" 
    Inherits="ZZ.LogInOutControl" %>

<TABLE id="Table1" style="FONT-SIZE: 9pt; WIDTH: 183px; HEIGHT: 125px" 
       cellSpacing="1" cellPadding="1" width="183" align="center" border="1">
  <TR>
    <TD height="20">
      <asp:Label id="LabelUser" runat="server">用戶：</asp:Label>
      <asp:TextBox id="TextBoxUserName" Width="128px" runat="server"></asp:TextBox>
    </TD>
  </TR>
  <TR>
    <TD height="20">
      <asp:Label id="LabelPassword" runat="server">密碼：</asp:Label>
      <asp:TextBox id="TextBoxPassword" Width="128px" runat="server" TextMode="Password"></asp:TextBox>
    </TD>
  </TR>
  <TR>
    <TD align="center" height="20">
      <asp:Button id="ButtonLogIn" Width="50px" Text="登錄" runat="server"></asp:Button>
      <asp:Button id="ButtonLogOut" Width="49px" Text="注銷" runat="server"></asp:Button>
    </TD>
  </TR>
</TABLE>

後端核心實作 (.ascx.cs)

1. 定義事件參數類別

public class LogInOutEventArgs : EventArgs
{
    public string UserName { get; set; }
    public bool IsLogin { get; set; }
}

2. 宣告委派與事件

// 建議置於控制項類別外部
public delegate void LogInOutClickHandler(object sender, LogInOutEventArgs e);

public partial class LogInOutControl : UserControl
{
    public event LogInOutClickHandler LogInOutClick;
    
    // 自訂屬性：語言切換
    private Language _language;
    public Language Lg 
    { 
        get { return _language; } 
        set { _language = value; UpdateDisplay(); } 
    }

3. 觸發事件的保護方法

protected virtual void OnLogInOutClick(LogInOutEventArgs e)
{
    LogInOutClick?.Invoke(this, e);
}

4. 按鈕點擊事件處理

protected void ButtonLogIn_Click(object sender, EventArgs e)
{
    var args = new LogInOutEventArgs 
    { 
        UserName = TextBoxUserName.Text, 
        IsLogin = true 
    };
    OnLogInOutClick(args);
}

protected void ButtonLogOut_Click(object sender, EventArgs e)
{
    var args = new LogInOutEventArgs 
    { 
        UserName = TextBoxUserName.Text, 
        IsLogin = false 
    };
    OnLogInOutClick(args);
}

容器頁面使用方式

<%@ Register Src="LogInOutControl.ascx" TagPrefix="uc" TagName="LogInOut" %>
<uc:LogInOut ID="LogInOut1" runat="server" OnLogInOutClick="LogInOut1_LogInOutClick" />

// 頁面代碼後端
protected void LogInOut1_LogInOutClick(object sender, LogInOutEventArgs e)
{
    if (e.IsLogin)
        lblStatus.Text = $"歡迎 {e.UserName} 登入";
    else
        lblStatus.Text = $"{e.UserName} 已登出";
}

關鍵設計模式總結

• 事件參數封裝：繼承 EventArgs 傳遞豐富資訊
• 委派與事件分離：委派定義簽名，事件提供發布/訂閱機制
• 保護式觸發方法：OnXxx 模式支援繼承者覆寫
• 屬性封裝邏輯：set 存取子中同步更新 UI

掌握此模式，即可建構高內聚、低耦合、可重用的企業級使用者控制項。