getElementById 找不到由 ASP.net 生成的控件答案

【问题标题】：getElementById not finding control generated by ASP.netgetElementById 找不到由 ASP.net 生成的控件
【发布时间】：2011-01-04 16:17:22
【问题描述】：

我只是想将标签存储在 javascript 中的变量中，但由于某种原因，这不适用于 document.getElementById('control');。我知道我的 javascript 可以正常链接到我的 html 文件，因为其他一切正常。

这是我的 javascript 代码：

function performEvapCooledCircuit(txt)
{
    var error = document.getElementById('lblError');


    if (txt.value == null || isNaN(txt.value))
    {
       error.style.visibility = "visible";
    }
}

这是我的标签的 html 代码：

<asp:Label ID="lblError" class="NormLabel" runat="server" 
   style="color:red; visibility:hidden;" Text="Invalid Input."></asp:Label>

我收到一个错误，提示对象是预期的？？

【问题讨论】：

标签： javascript asp.net getelementbyid

【解决方案1】：

ASP.NET 将生成的 ID 不会是“lblError”，因此您需要通过其 ClientID 引用它

document.getElementById('<%=lblError.ClientID %>');

如果您的 javascript 文件是外部的，我通常必须编写一种“初始化”javascript 方法来确保我的 ID 已设置属性

在您的 ASPX 页面上：

<script type="text/javascript">
    var lblError = null;
    function InitializeVariables()
    {
        if (lblError == null) // make sure you only do this once
        {
            lblError = document.getElementById("<%=lblError.ClientID %>");
        }
    }
</script>
<asp:Label 
    ID="lblError"
    class="NormLabel"
    runat="server" 
    style="color:red; visibility:hidden;"
    Text="Invalid Input."></asp:Label>

然后在您的 javascript 文件中，您必须调用 InitializeVariables() 以确保您的变量指向正确的 asp.net 控件

function performEvapCooledCircuit(txt)
{
    InitializeVariables();

    if (txt.value == null || isNaN(txt.value))
    {
        lblError.style.visibility = "visible";
    }
}

【讨论】：

连同 Šime Vidas 的解释，这个答案可能会有所帮助。
@hunter OP 说“javascript 正在链接到他的 html 文件”
+1 用于提及 ASP 更改 ID，但 @ŠimeVidas 是正确的。他们提到 JS 在文件之外。或者，他们可以在页面中添加<Script>var lblErrorID = '<%=lblError.ClientID %>';</script> 并在其他外部脚本中引用它（如果在页面加载后调用脚本）。 (var error = document.getElementByID(lblErrorID);)
谢谢你们！你帮了大忙！

【解决方案2】：

“hunter”提供了一种非常可靠的做事方式，但是，在我看来，更好的方法是在控件上使用“CliendIDMode”属性并将该属性设置为“Static”。这将使客户端和服务器 ID 相同。像这样：

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

【讨论】：

哇，谢谢。但是this post 说使用这个有一些缺点。
是的，根据控件的类型，它并不总是理想的。总的来说，我仍然喜欢它。特别是如果您将所有的 javascript 都放在外部文件中（比如好男孩或好女孩）。

【解决方案3】：

标签的 ID 不是“lblError”。 ASP.net 引擎更改了 ID。在浏览器中查看HTML源代码，找出真实ID。

【讨论】：

@ŠimeVidas：我不建议对 ID 值进行硬编码，因为这可能会根据容器位置而改变。给定一个适度静态的页面，这很好，但在未来的任何添加/重新设计中，这可能是一个问题。
@Brad 是的，硬编码是个坏主意。我不使用 ASP.net，但我记得遇到过这个问题，并且我读到了一个可以让您直接定义 ClientID 的功能。这将是解决这个问题的方法。

【解决方案4】：

标签不是 HTML，而是一个 ASP.NET 控件，它将在响应中发送之前呈现为 HTML。 ASP.NET WebForms 控件有时会更改它们创建的 HTML 的 ID。

查看网页的源代码以查看呈现的页面上 HTML 元素的 id 是什么。

【讨论】：

【解决方案5】：

你可以用这个：

document.getElementById('<%= lblError.ClientID %>').click()

从 ASP.NET 4.0 开始，您可以为您的元素使用 ClientIDMode 属性。如果您将其设置为Static，那么ClientID 的值将设置为ID 属性的值：

 <asp:Label ID="lblError" runat="server" ClientIDMode="Static" />

会被渲染成这样的：

<span id="lblError" name="ctl00$MasterPageBody$ctl00$Label1" />

【讨论】：