JavaScript 操作 ASP.NET 服務器控件：ClientID 模式與 jQuery 選取實戰

核心問題

ASP.NET 服務器控件渲染後的 HTML id 可能被命名容器改寫（如 ctl00_ContentPlaceHolder1_txtName），導致 JS 直接 document.getElementById("txtName") 失敗。

解決方案：ClientID 屬性

服務器端控件暴露 ClientID，即實際渲染的客戶端 ID。

1. 內聯輸出 ID

<script>
    var txtName = document.getElementById('<%= txtName.ClientID %>');
</script>

2. jQuery 選取

var $txtName = $('#<%= txtName.ClientID %>');
$txtName.val('新值').css('border', '1px solid red');

3. 外部 .js 文件無法內聯的替代方案

• ClientIDMode="Static"（.NET 4.0+）：強制渲染 ID 等於服務器 ID，需保證頁面唯一性。
• CSS Class 選取：給控件加 CssClass="js-txt-name"，JS 用 $('.js-txt-name')。
• data-* 屬性：<asp:TextBox data-role="username" />，JS 用 $('[data-role="username"]')。
• 全局變量注入：頁面內聯 window.txtNameId = '<%= txtName.ClientID %>';，外部 JS 直接用變量。

最佳實踐建議

1. 新專案啟用 ClientIDMode="Predictable" 或 Static，減少不可預測 ID。
2. 盡量用 Class/data-* 選取器，解耦服務器端命名。
3. 避免在外部 JS 硬編碼 ClientID，維護成本極高。