ASP.NET 控件 ID 深度解析：UniqueID 與 ClientID 的區別與應用

在上一篇《漫談 ID（上）——Name 與 ID 的種種》中，我們探討了 HTML 元素中 Name 與 ID 的基本概念。本文將深入 ASP.NET 伺服器端控件的三大 ID 屬性：ID、ClientID 與 UniqueID，重點剖析它們在自訂控件、Repeater 等資料繫結控件中的運作機制，並提供實際程式碼範例協助理解。

三大 ID 屬性核心差異

ASP.NET 伺服器控件擁有三種身分識別屬性，各司其職：

• ID：伺服器端程式設計的識別碼，用於後端程式碼存取控件屬性、方法與事件。
• ClientID：伺服器產生的用戶端 HTML 元素 ID，供 JavaScript 等客戶端腳本存取渲染後的 HTML 元素。預設與伺服器端 ID 相同，但在命名容器（如 Repeater、GridView）中會自動加入前綴以確保唯一性。
• UniqueID：伺服器控件的唯一階層式識別碼，採用 IdSeparator（預設為冒號 :）串連父控件的 UniqueID 與自身 ID。主要用於伺服器端區分重複控件中的同名子控件。

ClientID 與 UniqueID 的生成規則

兩者皆由父控件識別碼與自身 ID 組合而成，差異在於分隔符號：

• ClientID：以底線 _ 連接，例如 Repeater1_ctl01_Label1。
• UniqueID：以 IdSeparator（預設 :）連接，例如 Repeater1:ctl01:Label1。

實戰範例：DataGrid 中的 Button 控件

前端標記：

<asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateColumn>
            <ItemTemplate>
                <asp:Button ID="btnEdit" runat="server" Text="編輯" />
            </ItemTemplate>
        </asp:TemplateColumn>
    </Columns>
</asp:DataGrid>

後端綁定資料：

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        ArrayList list = new ArrayList { 1, 2 };
        DataGrid1.DataSource = list;
        DataGrid1.DataBind();
    }
}

執行後，每一列產生的 Button 會擁有唯一的 ClientID（如 DataGrid1_ctl02_btnEdit、DataGrid1_ctl03_btnEdit）與 UniqueID（如 DataGrid1:ctl02:btnEdit），避免命名衝突。

客戶端腳本存取技巧

若需在 JavaScript 中存取繫結控件內的元素，可透過 ClientID 取得確切 ID：

var btn = document.getElementById('<%= btnEdit.ClientID %>');

或使用 document.querySelector('[id$=btnEdit]') 進行屬性結尾匹配。

總結

掌握 ID、ClientID、UniqueID 的差異與生成邏輯，是開發自訂控件、處理動態命名容器、撰寫客戶端腳本互動的關鍵基礎。善用這三者，能有效避免 ID 衝突，提升程式碼可維護性。