如何使用 javascript 訪問 runat="server" ASP 元素？

Question

似乎每個人都在這樣做（在代碼帖子等中）......但我不知道如何。 :(

每當我嘗試使用 JavaScript 操作 asp 元素時，我都會收到"element is null"或"document is undefined"等錯誤.....

JavaScript 通常可以正常工作，...但只有當我添加runat="server"屬性時，我的 JavaScript 才能看到該元素。

任何建議，將不勝感激。

謝謝，安德魯

Answer 1

可能發生的情況是您的元素/控件位於一個或多個 ASP.NET 控件中，這些控件充當命名容器（母版頁、ITemplate、向導等），這導致其 ID 發生更改。

您可以在瀏覽器中使用“查看源代碼”來確認呈現的 HTML 中發生的情況。

如果您的 JavaScript 位於 ASPX 頁面中，則臨時解決此問題的最簡單方法是使用元素的 ClientID 屬性。 例如，如果您想通過 JS 引用一個名為 TextBox1 的控件：

var textbox = document.getElementById('<%= TextBox1.ClientID %>');

Answer 2

使元素runat="server"根據 ASP.NET 命名容器的內容更改該元素的客戶端 ID。 因此，如果您使用document.getElementById來操作元素，則需要將 .NET 生成的新 ID 傳遞給它。 查看ClientId屬性以獲取生成的 ID ...您可以在 Javascript 中內聯使用它，如下所示：

var element = document.getElementById('<%=myControl.ClientID%>');

Answer 3

如果你有一個文本框：

<asp:TextBox id="txtText" runat="server" />

您可以使用：

var textBox=document.getElementById('<%=txtText.ClientID %>');

任何 WebControl 都公開相同的 ClientID 屬性。

Answer 4

盡管問題已經得到解答，但我想我會發布一些進一步的信息......

Rick Strahl 為這個問題提供了相當有趣的工作。

http://www.west-wind.com/WebLog/posts/252178.aspx

值得慶幸的是，當 ASP .NET 4.0 到來時，它將允許您准確指定客戶端 ID 是什么！

http://www.codeproject.com/KB/aspnet/ASP_NET4_0ClientIDFeature.aspx