ASP.NET 伺服器控件開發（四）——複合控件

建立可重用的登入複合控件：從介面實作到渲染輸出

核心概念與必要介面

• 複合控件： 組合多個基礎控件（Label、TextBox、Validator、Button）為單一控件，類似 .ascx 但編譯為 .dll。
• INamingContainer： 建立新命名容器，確保子控件 ID 在整個應用程式唯一。
• CreateChildControls： 動態建立子控件、設定屬性、加入 Controls 集合。
• EnsureChildControls： 確保子控件已建立，屬性存取前必須呼叫。

完整 LoginControl 程式碼結構

[DefaultProperty("Text")]
[ToolboxData("<{0}:LoginControl runat=server ButtonText='登入' NameLabel='用戶名：' PasswordLabel='用戶密碼：'></{0}:LoginControl>")]
public class LoginControl : WebControl, INamingContainer
{
    // 子控件欄位
    private Button _button;
    private TextBox _nameTextBox, _passwordTextBox;
    private Label _nameLabel, _passwordLabel;
    private RequiredFieldValidator _nameValidator, _passwordValidator;

    // 屬性包裝（均呼叫 EnsureChildControls）
    public string ButtonText { get { EnsureChildControls(); return _button.Text; } set { EnsureChildControls(); _button.Text = value; } }
    public string Name { get { EnsureChildControls(); return _nameTextBox.Text; } set { EnsureChildControls(); _nameTextBox.Text = value; } }
    public string Password { get { EnsureChildControls(); return _passwordTextBox.Text; } } // 唯讀，Browsable(false)
    // ... NameLabel, PasswordLabel, NameErrorMessage, PasswordErrorMessage 同理

    protected override void CreateChildControls()
    {
        Controls.Clear();
        // 實例化所有子控件，設定 ID、驗證屬性
        _nameLabel = new Label();
        _nameTextBox = new TextBox { ID = "nameTextBox" };
        _nameValidator = new RequiredFieldValidator { ID = "validator1", ControlToValidate = "nameTextBox", Text = "*", Display = ValidatorDisplay.Static };
        _passwordLabel = new Label();
        _passwordTextBox = new TextBox { ID = "passwordTextBox", TextMode = TextBoxMode.Password };
        _passwordValidator = new RequiredFieldValidator { ID = "validator2", ControlToValidate = "passwordTextBox", Text = "*", Display = ValidatorDisplay.Static };
        _button = new Button { ID = "button1" };

        // 加入控件樹
        Controls.Add(_nameLabel);
        Controls.Add(_nameTextBox);
        Controls.Add(_nameValidator);
        Controls.Add(_passwordLabel);
        Controls.Add(_passwordTextBox);
        Controls.Add(_passwordValidator);
        Controls.Add(_button);
    }

    protected override void Render(HtmlTextWriter writer)
    {
        AddAttributesToRender(writer);
        writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "1", false);
        writer.RenderBeginTag(HtmlTextWriterTag.Table);
        // 逐列渲染：用戶名列、密碼列、按鈕列
        // ... 省略具體 RenderControl 呼叫
        writer.RenderEndTag(); // Table
    }
}

關鍵點總結

1. 繼承 WebControl 並實作 INamingContainer。
2. 屬性存取前呼叫 EnsureChildControls()。
3. CreateChildControls 負責實例化與加入子控件。
4. Render 使用 HtmlTextWriter 輸出結構化 HTML（此處為 Table 佈局）。

此模式可建立高度封裝、設計工具支援完善的複合控件，適合元件化開發。