ASP.NET 控件的 JavaScript getElementById 返回 null？答案

【问题标题】：JavaScript getElementById for ASP.NET Control returns null?ASP.NET 控件的 JavaScript getElementById 返回 null？
【发布时间】：2010-11-10 06:43:20
【问题描述】：

我使用 JavaScript，在执行过程中出现此错误：

Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object

这是我的代码：

<asp:Content ID="content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script language="javascript" type="text/javascript">
    function ConfirmTransfere() {
        if (confirm("Syatem not allow negative inventory, would you like to continue ?") == true) {
            document.getElementById("btnAlelrt").click();

        }       
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="uxContainer" runat="server">
    <ContentTemplate>
 <table> 
<tr>
        <td>
        <asp:Button ID="uxTransfer" runat="server" Text="Transfer" OnClick="uxTransfer_Click" /> 
        <asp:Button ID="btnAlelrt" runat="server" Text="GetDetails" OnClick="btnAlelrt_Click" />       
        </td>
        </tr>
</table>
    </ContentTemplate>
<Triggers>
    <asp:PostBackTrigger ControlID="uxTransfer" />    
    </Triggers>
    </asp:UpdatePanel>

 </asp:Content>

【问题讨论】：

标签： javascript asp.net webforms getelementbyid

【解决方案1】：

这个：

function ConfirmTransfere() {
        if (confirm("Syatem not allow negative inventory, would you like to continue ?") == true) {
            document.getElementById("btnAlelrt").click();

        }

必须是这样的：

function ConfirmTransfere() {
        if (confirm("Syatem not allow negative inventory, would you like to continue ?") == true) {
            document.getElementById('<%=btnAlert.ClientID%>').click();

        }

问题在于您的按钮是一个 ASP.Net 控件，并且会生成它自己的客户端 ID，这与您指定的 ID 不同。输入代码<%=btnAlert.ClientID%> 会将生成的代码发布到浏览器。

【讨论】：

【解决方案2】：

你可以用这个：

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

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

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

会被渲染成这样的：

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

【讨论】：

谢谢，ClientIDMode="Static" 解决了我的问题，因为我无法在 javascript 中获取 div。

【解决方案3】：

您为 asp:Button 提供的 ID 是 ASP.Net 在服务器上使用的 ID。它不是客户端脚本使用的 ID。

你应该使用：

document.getElementById("<%= btnAlelrt.ClientID %>").click();

【讨论】：

【解决方案4】：

如果您在生成的页面上查看源代码，您可能会发现该按钮不再具有 ID“btnAlelrt”。它可能有类似“ctl001_btnAlert”之类的东西，或其他生成的唯一性标识符。

这就是您的 javascript 找不到它的原因。

您需要按标签搜索，并检查 ID 以查看它们是否以 btnAlelrt 结尾，或者您必须在其周围放置一个 DIV 或 SPAN，并使用不会更改的 ID（即'没有 runat="server")。然后，您可以通过其 ID 找到该元素，然后获取其中的按钮。

如果可以，您可以使用语法在您的 javascript 中插入正确的 ID。

（旁注：这应该是 btnAlert 吗？）

【讨论】：

【解决方案5】：

目前我找不到可以为您发布的代码示例，但我可以解释您遇到的问题。

ASP.NET 在将对象/元素/按钮写入页面时不使用您为其提供的 ID，而是为对象提供客户端 ID。

如果您在代码中执行 Msgbox(btnAlelrt.clientID)，那么您将看到您的 javascript 应该使用的对象名称。

最好让 .NET 代码在 javascript 中将这些值写入页面，因为它们不是常量。

希望这会有所帮助。

詹姆斯

【讨论】：

【解决方案6】：

如果您查看呈现的页面，名为 btnAlelrt 的控件不再具有该名称...

如果添加“

【讨论】：

【解决方案7】：

尝试使用 ClientIDMode="Static"。这不会在运行时更改按钮 ID。

  <asp:Button ID="SendMessageButton" ClientIDMode="Static" runat="server" Text="Send Message" CssClass="buttonPositive"
            CausesValidation="True" OnClientClick="validate();" OnClick="SendMessageButton_Click" />

然后您可以使用下面的 jquery 来访问您的按钮。我希望这有帮助。

 var element = document.getElementById('SendMessageButton');

【讨论】：