由 ASP.NET 操作的 HTML 元素的 id 和 name 属性答案

【问题标题】：id and name attributes of HTML elements manipulated by ASP.NET由 ASP.NET 操作的 HTML 元素的 id 和 name 属性
【发布时间】：2010-10-04 03:57:22
【问题描述】：

我的 C# ASP.NET 应用程序有一个问题，其中 id 和 name 标签在运行时被修改，分别带有前缀“MainView_”和“MainView$”。所以我的代码：

<asp:Button ID="OKToContinueCheckInButton" runat="server" CausesValidation="False" Visibility="false" Style="display: none" OnClick="btnOKToContinueCheckIn" />

<script type="text/javascript">
<!--
    var answer = confirm("Some Warning");
    if (answer)
        document.getElementById('OKToContinueCheckInButton').click();
// -->
</script>

变成：

<input type="submit" name="MainView$OKToContinueCheckInButton" value="" id="MainView_OKToContinueCheckInButton" Visibility="false" style="display: none" />

<script type="text/javascript">
<!--
    var answer = confirm("Some Warning");
    if (answer)
        document.getElementById('OKToContinueCheckInButton').click();
// -->
</script>

getElementID() 返回 null，因为名称已更改。谁能告诉我为什么会发生这种情况，以及是否有办法禁止它更改 id 和 name 值。谢谢！

-Sephral

【问题讨论】：

标签： asp.net javascript html

【解决方案1】：

我想这会对你有所帮助...

<script type="text/javascript">
<!--
    var answer = confirm("Some Warning");
    if (answer)
        document.getElementById('<%= OKToContinueCheckInButton.ClientID %>').click();
// -->
</script>

这就是成功的部分

<%= OKToContinueCheckInButton.ClientID %>

【讨论】：

【解决方案2】：

这是 Asp .Net Forms 模型工作方式的基本部分。

ID 已更改，因此您不必担心在用户控件、自定义控件、中继器等中保持 ID 的唯一性。

您可以使用 Cyril 的方法。我还发现 JQuery 非常适合这种模型，因为您可以通过控件的类或在文档中的位置轻松引用控件。

【讨论】：

【解决方案3】：

好消息是 ASP.Net 4.0 将解决这个问题。

http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx

【讨论】：

天啊，谢天谢地 - 这个反功能让我中风了一半 - 可惜他们的修复方法很笨拙，但这是一个开始

【解决方案4】：

我想你忘记了单引号：

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

应该是：

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

【讨论】：

【解决方案5】：

<asp:Button ID="OKToContinueCheckInButton" runat="server" CausesValidation="False" Visibility="false" Style="display: none" OnClick="btnOKToContinueCheckIn" />

<script type="text/javascript">
<!--
    var answer = confirm("Some Warning");
    if (answer)
        document.getElementById(<%=OKToContinueCheckInButton.ClientID %>).click();
// -->
</script>

【讨论】：

【解决方案6】：

从后面的代码编写您的脚本。将其注册为启动脚本，并使用对象的客户端 ID。

System.Text.StringBuilder script = new System.Text.StringBuilder();
script.Append("var answer = confirm('Some Warning');");
script.Append("if (answer)");

// The client ID will be what is put in the browser so it will find it.
script.AppendFormat("document.getElementById('{0}').click();", this.btnSomeButton.ClientID);

// Hook this up to the button
this.btnSomeButton.OnClientClick = script.ToString();

【讨论】：

你为什么要让他做一些不可维护的事情？

【解决方案7】：

您必须像这样使用 ClientID 属性：

<asp:Button ID="OKToContinueCheckInButton" runat="server" CausesValidation="False" Visibility="false" Style="display: none" OnClick="btnOKToContinueCheckIn" />

<script type="text/javascript">
<!--
    var answer = confirm("Some Warning");
    if (answer)
        document.getElementById(<%=OKToContinueCheckInButton.ClientID%>).click();
// -->
</script>

【讨论】：

【解决方案8】：

如果您愿意使用 jQuery，这根本不是问题，您不必担心更改名称。通过使用 $= (ends with) 选择器，这不会有问题：

if (answer)
  $("a[id$='MainView_OKToContinueCheckInButton']:first").click();

jQuery 选择器非常容易使用

【讨论】：

【解决方案9】：

感谢您的所有回复，我想我明白为什么要替换这些值。但是，当我尝试上述解决方案时，它会出现错误，因为它会生成以下 HTML 并带有“_”而不是“$”。我正在使用 document.getElementById().click();

<input type="submit" name="MainView$OKToContinueCheckInButton" value="" id="MainView_OKToContinueCheckInButton" Visibility="false" style="display: none" />

<script type="text/javascript">
<!--
    var answer = confirm("Some Warning");
    if (answer)
        document.getElementById(MainView_OKToContinueCheckInButton).click();
// -->
</script>

【讨论】：