ASP.NET 2.0 母版頁面導致 JavaScript 找不到控制項解決方案

問題重現：原本正常的 JS 失效

單一頁面中，JavaScript 透過 document.getElementById("txt") 存取 <textarea id="txt" runat="server"> 運作正常。套用母版頁後，同樣程式碼卻拋出 'document.getElementById(...) 為空或不是物件' 錯誤。

根本原因：命名容器改變 ClientID

母版頁面與內容頁面皆為 INamingContainer，導致伺服器控制項渲染時 ID 加上命名容器前綴。原本 id="txt" 變為 id="ctl00_ContentPlaceHolder1_txt"（視層級而定），JavaScript 硬編碼 "txt" 自然找不到元素。

三種解決策略

1. ClientID 模式（ASP.NET 4.0+）：設定 ClientIDMode="Static" 保持 ID 不變（需 .NET 4.0 以上）。
2. 伺服器端輸出 ClientID：在 JS 中使用 <%= txt.ClientID %> 動態產生正確 ID。

   function insert() {
       document.getElementById('<%= txt.ClientID %>').value += '(__)';
   }

3. jQuery 選取器容錯：使用屬性結尾選取器 $('[id$=txt]') 或 CSS Class 定位，不依賴完整 ID。

最佳實務建議

• 避免在外部 .js 檔硬編碼伺服器控制項 ID，改用 data-* 屬性或 Class 當選取鉤子。
• 若必須在內嵌腳本使用 ID，統一採用 <%= Control.ClientID %> 模式。
• 採用 Master Page 專案時，建立共用 JS 輔助函式 getId(serverId) 統一處理命名容器邏輯。