jQuery 獲取 ASP.NET 伺服器控制項 ClientID 實作技巧

問題背景

ASP.NET 伺服器控制項渲染後的 HTML id 屬性會被重命名 (如 ctl00_ContentPlaceHolder1_StoreName)，導致 jQuery 無法直接用靜態 ID 選取。需在前端動態取得 ClientID。

解決方案：內嵌伺服器端運算式

前端 JavaScript

<script type="text/javascript">
    $(function () {
        // 取得 TextBox ClientID 並綁定 focus 事件
        $("#<%= StoreName.ClientID %>").focus(function () {
            // 取得 Label ClientID 並設定提示文字與顏色
            $("#<%= Label5.ClientID %>").val("請輸入真實的店鋪名稱");
            $("#<%= Label5.ClientID %>").css("color", "#666");
        });
    });
</script>

後端標記

<table>
    <tr>
        <td>店鋪名稱：</td>
        <td>
            <asp:TextBox ID="StoreName" runat="server"></asp:TextBox>
        </td>
        <td>
            <asp:Label ID="Label5" runat="server" Text="真實的店鋪名稱，0-10個字。（必填項）"></asp:Label>
        </td>
    </tr>
</table>

原理說明

• <%= StoreName.ClientID %> 在頁面渲染階段由伺服器解析，輸出實際 HTML id (如 ctl00_MainContent_StoreName)。
• 瀏覽器接收到的 JS 已包含真實 ID，jQuery 選取器即可精準匹配。

進階最佳實務 (ASP.NET 4.0+)

1. 設定 ClientIDMode="Static"

<asp:TextBox ID="StoreName" runat="server" ClientIDMode="Static" />

渲染後 id="StoreName" 保持不變，JS 可直接用 $("#StoreName")。注意：命名容器 (MasterPage、UserControl、Repeater 等) 內使用 Static 模式需確保 ID 唯一，否則產生重複 ID 導致選取器匹配多個元素。

2. 使用 ClientIDMode="Predictable"

<asp:ListView ID="lvItems" runat="server" ClientIDMode="Predictable" ClientIDRowSuffix="ProductID">
    <ItemTemplate>
        <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>' />
    </ItemTemplate>
</asp:ListView>

產生可預測 ID：lvItems_lblName_1, lvItems_lblName_2... 適合重複項模板。

3. 統一專案層級設定 (Web.config)

<system.web>
    <pages clientIDMode="Static" />
</system.web>

全專案預設 Static，視需求在個別控制項覆寫為 AutoID (舊版相容) 或 Predictable。

總結

建議：新專案 (4.0+) 全域設定 Static，配合 BEM 命名規範確保唯一；舊專案維護期使用 <%= ClientID %> 過渡。