getElementById无法找到由ASP.net生成的控件

Question

我只是想在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>

我遇到了一个错误，提示说“期望对象”？？

- Johnrad

Answer 1

ASP.NET 生成的 ID 不会是 "lblError"，因此您需要使用它的 ClientID 引用它。

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

如果你的 JavaScript 文件是外部文件，我通常需要编写一种 "Init" 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";
    }
}

- hunter

---

除了Šime Vidas的解释，这个答案也可能会有所帮助。 - John Fisher

@hunter，楼主说“JavaScript正在链接到他的HTML文件”。 - Šime Vidas

+1 提到了 ASP 更改 ID，但 @ŠimeVidas 是正确的。他们提到 JS 在文件外部。或者，他们可以在页面中添加 <Script>var lblErrorID = '<%=lblError.ClientID %>';</script> 并在其他外部脚本中引用它（如果脚本在页面加载后调用）。 (var error = document.getElementByID(lblErrorID);) - Brad Christie

谢谢大家！你们真是太棒了，帮了我大忙！ - Johnrad

Answer 2

“hunter”提供了一种相当稳定的做法，但在我看来，更好的方法是使用控件上的“CliendIDMode”属性，并将该属性设置为“Static”。这将使客户端和服务器ID相同。如下所示：

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

- Maverick

---

哇，谢谢。但是这篇文章说使用它会有一些缺点。 - Arman

是的，根据控件的类型，它并不总是理想的。然而，总的来说，我仍然喜欢它。特别是如果你把所有的 JavaScript 放在外部文件中（就像一个好孩子一样）。 - Maverick

Answer 3

的ID不是“lblError”。ASP.net引擎已更改ID。请检查浏览器中的HTML源代码以查找真实的ID。

- Šime Vidas

---

@ŠimeVidas：我不建议硬编码ID值，因为这可能会根据容器位置而改变。如果页面要相对静态，那么这样做是可以的，但在任何未来的添加/重新设计中，这可能会成为一个问题。 - Brad Christie

@Brad 是的，硬编码是个不好的主意。我不用ASP.net，但我记得曾经遇到过这个问题，并且我读过一个功能可以让你直接定义ClientID。那将是解决这个问题的方法。 - Šime Vidas

Answer 4

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

查看网页源代码以查看呈现页面上HTML元素的ID。

- StuperUser

Answer 5

你可以使用这个：

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

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

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

将被渲染为类似于这样的内容：

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

- algreat