ASP.NET Web Forms 伺服器控制項分類：HTML、Web、驗證控制項完整比較與應用

伺服器控制項是 Web Forms 核心建構元素，**標記中 runat="server" 賦予伺服器端程式存取能力**。依功能分為三大類：HTML 伺服器控制項、Web 伺服器控制項、驗證伺服器控制項。本文系統比較三類差異、適用場景與進階應用。

經典 ASP 痛點：義大利麵條式程式碼

<html><body bgcolor="yellow">
<center><h2>Hello World!</h2></center>
<p><% Response.Write(DateTime.Now) %></p>
</body></html>

• 程式碼區塊 <% %> 必須置於輸出位置，邏輯與呈現強耦合
• 難以維護、難以測試、設計師與開發者協作困難

三大伺服器控制項分類總覽

HTML 伺服器控制項：標準 HTML 賦予伺服器能力

啟用方式

<!-- 一般 HTML -->
<a href="https://example.com">連結</a>

<!-- HTML 伺服器控制項 -->
<a id="lnkExample" runat="server">連結</a>

• 任何 HTML 標籤加上 runat="server" 且具 id 即成為伺服器控制項
• 需置於 <form runat="server"> 內部
• 對應類別：HtmlAnchor、HtmlInputText、HtmlSelect、HtmlTable、HtmlImage 等

完整範例：動態修改連結

<script runat="server">
    protected void Page_Load(object sender, EventArgs e) {
        lnkDynamic.HRef = "https://www.microsoft.com";
        lnkDynamic.InnerText = "前往 Microsoft";
        lnkDynamic.Attributes["target"] = "_blank";
        lnkDynamic.Attributes["class"] = "external-link";
    }
</script>

<form runat="server">
    <a id="lnkDynamic" runat="server">動態連結</a>
</form>

常用 HTML 伺服器控制項對照

Web 伺服器控制項：高階抽象、豐富功能

標記語法

<asp:Button ID="btnSubmit" Text="送出" runat="server" OnClick="btnSubmit_Click" />
<asp:TextBox ID="txtName" runat="server" />
<asp:DropDownList ID="ddlCategory" runat="server" />

• 前綴 asp: 對應 System.Web.UI.WebControls 命名空間
• 需 runat="server" 與 id
• 不需對應既有 HTML 元素，可渲染複雜結構（如 GridView 產生完整 table + 分頁 + 排序）

Web 伺服器控制項分類

範例：Button 事件處理

<script runat="server">
    protected void btnClick_Click(object sender, EventArgs e) {
        btnClick.Text = "你點擊了我！";
    }
</script>

<form runat="server">
    <asp:Button ID="btnClick" Text="點擊我！" runat="server" OnClick="btnClick_Click" />
</form>

驗證伺服器控制項：聲明式輸入驗證

核心機制

• 每個驗證控制項執行**特定類型驗證**（必填、比較、範圍、正則、自訂）
• 預設：Button/LinkButton/ImageButton 點擊時觸發頁面驗證
• CausesValidation="false" 可停用特定按鈕的驗證觸發
• 客戶端腳本（JavaScript）優先執行，伺服器端二次驗證確保安全

六大驗證控制項

完整驗證範例

<form runat="server">
    <div>
        <label>數字 (1-100)：</label>
        <asp:TextBox ID="txtNumber" runat="server" />
        <asp:RangeValidator ID="rvNumber" runat="server"
            ControlToValidate="txtNumber"
            MinimumValue="1" MaximumValue="100"
            Type="Integer"
            Text="*" ErrorMessage="請輸入 1 到 100 之間的整數"
            ForeColor="Red" />
    </div>
    <br/>
    <asp:Button Text="送出" runat="server" />
    <br/><br/>
    <asp:ValidationSummary ID="vs" runat="server" HeaderText="發現以下錯誤：" />
</form>

驗證群組：單頁多表單獨立驗證

<!-- 登入區塊 -->
<asp:TextBox ID="txtLoginEmail" runat="server" ValidationGroup="vgLogin" />
<asp:RequiredFieldValidator ControlToValidate="txtLoginEmail" ValidationGroup="vgLogin" ... />
<asp:Button ID="btnLogin" Text="登入" ValidationGroup="vgLogin" runat="server" />

<!-- 註冊區塊 -->
<asp:TextBox ID="txtRegEmail" runat="server" ValidationGroup="vgReg" />
<asp:RequiredFieldValidator ControlToValidate="txtRegEmail" ValidationGroup="vgReg" ... />
<asp:Button ID="btnReg" Text="註冊" ValidationGroup="vgReg" runat="server" />

三類控制項選擇指南

進階：自訂伺服器控制項開發

// 簡單自訂控制項：帶標籤的文字方塊
public class LabeledTextBox : WebControl, INamingContainer {
    public string LabelText { get; set; }
    public string Text { 
        get => txt.Text; 
        set => txt.Text = value; 
    }
    
    private TextBox txt = new TextBox();
    private Label lbl = new Label();
    
    protected override void CreateChildControls() {
        lbl.Text = LabelText;
        lbl.AssociatedControlID = txt.ID;
        Controls.Add(lbl);
        Controls.Add(new LiteralControl(" "));
        Controls.Add(txt);
    }
}

// 使用：<cc1:LabeledTextBox ID="ltbName" LabelText="姓名：" runat="server" />

常見問題排查

• HTML 控制項事件不觸發：確認 runat="server"、id、在 form 內、事件名稱正確（ServerClick/ServerChange）
• Web 控制項樣式不生效：CSS 類別衝突、Control.Render 覆寫導致 class 遺失、使用 CssClass 而非 class
• 驗證不觸發：按鈕 CausesValidation="false"、ValidationGroup 不匹配、ControlToValidate ID 錯誤
• 客戶端驗證不執行：瀏覽器禁用 JS、ClientTarget 設定不支援、驗證控制項 EnableClientScript="false"
• 自訂控制項 ViewState 遺失：繼承 WebControl、實作 IStateManager、子控制項加入 Controls 集合

理解三大伺服器控制項分類特性，能根據需求選擇最適合的控制項類型，平衡開發效率、效能與維護性。下一節將介紹 ASP.NET 網頁架構：.aspx 頁面結構、動態頁面、經典 ASP 比較與 Code-Behind 模式。