如何阻止ASP.NET更改ID以使用jQuery

Question

我的网页上有这个标签控件

<asp:Label ID="Label1" runat="server" Text="test"></asp:Label>

当页面呈现控件的id改变为类似

时

  <span id="ctl00_ContentPlaceHolder1_Label3">test</span>

如何阻止asp.net更改ID以执行像这样的jQuery操作

$('#label1').html(xml);

Answer 1

而不是使用此选择器

$('#Label1')

使用这个，基本上你使用的是经典的asp内联服务器端代码。

$('#<%= Label1.ClientID %>')

这将插入生成的任何ID作为文字放置。

如果您希望使用外部文件，那么我建议您在页面上创建一个全局的obj来保存所有客户端ID，然后在外部文件中引用该obj（不理想，但它是一个解决方案）< / p>

var MyClientIDs = {
    Label1 = '<%= Label1.ClientID %>',
    Label2 = '<%= Label2.ClientID %>',
    Textbox1 = '<%= Textbox1.ClientID %>',
    Textbox2 = '<%= Textbox2.ClientID %>'
};

然后在外部文件中，您可以访问Label1，例如：$('#' + MyClientIDs.Label1)

Answer 2

.NET 4现在可以让您选择ClientIDMode：

输入：System.Web.UI.ClientIDMode

一个值，指示如何生成ClientID属性。默认值为Inherit。

  

AutoID ClientID值是通过连接ID值生成的   每个父命名容器的ID值与控件的ID值。在   数据绑定方案，其中控件的多个实例是   渲染时，会在控件前面插入一个递增值   ID值。每个段由下划线字符（_）分隔。   此算法用于早于ASP.NET 4的ASP.NET版本。

     

静态 ClientID值设置为ID属性的值。如果   控件是一个命名容器，控件用作顶部   为其包含的任何控件命名容器的层次结构。

     

可预测此算法用于数据绑定中的控件   控制。 ClientID值是通过连接生成的   具有ID值的父命名容器的ClientID值   控制。如果控件是生成的数据绑定控件   多行，指定的数据字段的值   最后添加ClientIDRowSuffix属性。对于GridView   控制，可以指定多个数据字段。如果   ClientIDRowSuffix属性为空，添加了序号   结束而不是数据字段值。这个数字从零开始   每行增加1。每个部分由一个分隔   下划线字符（_）。

     

继承控件继承其NamingContainer控件的ClientIDMode设置。

Answer 3

您无法阻止asp.net生成这些ID。这就是事情的方式。

您仍然可以像这样使用jquery：

$('#<%=label1.ClientID %>').html(xml) 

或

$('[id$=_label1]').html(xml)

Answer 4

设置ClientIDMode="Static"。这将解决您的问题。

示例：

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

Answer 5

如果而仅，您的容器布局永远不会改变和，您需要将JavaSctipt / jQuery放在外部文件，您可以在jQuery选择器中使用生成的ID，即

$('#ctl00_ContentPlaceHolder1_Label3').html(xml);

显然，这种方法要求您了解生成的ID将是什么，并且如果您开始更改站点/应用程序构造，则需要谨慎。

否则，您的最佳选项

1。使用内联服务器端代码标记。这种方法的缺点是你不能把你的js代码放在外部文件中 -

$('#<%= Label3.ClientID %>').html(xml);

2。在jQuery中需要使用的每个控件上定义唯一的CSS类，这仍然允许您将js代码放在外部文件中 -

<asp:Label ID="Label3" runat="server" Text="test" CssClass="label3">
</asp:Label>

$('.label3').html(xml);

3. 使用jQuery选择器模式匹配原始ID，这也允许您将js代码放在外部文件中 -

$('[id$=Label3]').html(xml);

此jQuery选择器将选择属性为 id 的所有元素，其值以 Label3 结尾。我可以通过这种方法看到的唯一潜在缺点是，理论上，可能有一个带有ID Label3的Label控件，例如Master页面以及两个内容页面。在此示例中，使用上面的jQuery选择器将匹配所有三个标签，这可能会产生不良后果。

修改

我认为将注意力提升到IDOverride control可能会有所帮助。 Example page can be found here

它允许您指定哪些控件应该在输出的HTML标记中具有其错位ID，并在呈现HTML页面时覆盖.aspx文件中给出的id。我只用一个Master Page和Panels简单地玩了它，但看起来效果很好。使用它，您可以在jQuery选择器中使用原始ID。但是请注意，如果您要在主页面和内容页面中使用相同的ID来控制结果，那么结果是不可预测的。这些页面将组合在一起以呈现一页的HTML。

Answer 6

简短回答，不要担心使用asp.net ID。在asp.net中，您可以将自己的属性添加到标记：

<asp:TexBox ID="myTBox" runat="server" MyCustomAttr="foo" />

然后在jquery中你可以通过以下方式引用这个元素：

$("input[MyCustomAttr='foo']")

我一直用jQuery做这个。希望它有所帮助。

Answer 7

您可以拨打课程名称而不是使用ID

例如;

$('.CssClassName'). ...

或者如果您在MasterPage的第一行输入此内容，您的控件ID将无法更改：

ClientIDMode="Static"

例如;

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="Main_MasterPage" ClientIDMode="Static" %>

Answer 8

内联代码是正确的方法。但是，这将在ASP.NET 4.0中发生变化。我们花了一些时间添加一个功能，允许完全控制客户端生成的ID。以下是网络上有关此功能的一些资源。

• http://blog.osbornm.com/archive/2009/01/06/asp.net-4.0-clientid-overview-again.aspx
• http://channel9.msdn.com/shows/10-4/10-4-Episode-3-ASPNET-WebForms-40/

Answer 9

这里的大多数建议都有效，但jQuery代码的测试结果显示纯ID选择器是迄今为止最快的。我经常使用的那个：

$("[id$=origControlId]")

非常慢，但除非页面有很多控件和大量的jQuery，否则问题不会太明显。

由于将多个类分配给控件是相当轻松的，因此可以为每个类提供与ID匹配的CSSClass。由于它们将是唯一的（您必须观察生成多个控件的转发器类型控件），您可以按类选择。

例如：

<asp:Label ID="Label1" CssClass="Label1 SomeOtherClass" runat="server" Text="test">
</asp:Label>

可以通过以下方式唯一选择：

$(".Label1")

几乎与ID选择一样快。

我从未考虑过这个：

$('#<%= Label1.ClientID %>')

但我要去尝试一下！

Answer 10

您可以使用ClientID（就像其他人说的那样），但问题在于它无法在外部JavaScript文件中使用。

所以，理想情况下，不是使用ID从jQuery引用它，使用CSS类：

<asp:Label ID="Label1" runat="server" Text="test" CssClass="myclass"></asp:Label>

然后你可以像这样引用它：

$(".myclass")

Answer 11

你必须将控件的ClientID传递给javascript代码（我怀疑Label1被重命名为Label3）

ClientScriptManager.RegisterClientScriptBlock(GetType(), "someKey", 
    "$('#" + Label1.ClientID + "').html(xml);", true);

Answer 12

这可以通过在呈现控件时将asp.net id替换为原始id来实现。 这非常简单，可以通过创建一组自定义控件来实现。

http://www.bytechaser.com/en/articles/ts8t6k5psp/how-to-display-aspnet-controls-with-clean-id-value.aspx

Answer 13

您还可以创建一个继承自Label的自定义控件，该控件会覆盖您希望的ID属性。

Answer 14

您可以将ClientID和UniqueID覆盖为this fella did。

/// <summary>
/// Override to force simple IDs all around
/// </summary>

public override string UniqueID
{
    get
    {
        return this.ID;
    }
}

/// <summary>
/// Override to force simple IDs all around
/// </summary>

public override string ClientID
{
    get
    {
        return this.ID;
    }
}

Answer 15

存在明显变化的风险：

<asp:Label ID="Label1" runat="server" Text="test"></asp:Label>

到

<Label ID="Label1" Text="test"></Label> 

Answer 16

您需要将属性ClientIDMode="Static"放在按钮中，这样可以在运行时授予ID相同的功能，这就是您在Javascript中获取对象所需的内容。

Answer 17

你不需要“阻止”asp.net更改控件ID，以便使用jquery或javascript来完成此事。

在页面上呈现的ID是控件的ClientID属性，您在控件上设置的是ID。您无法设置ClientID属性，它是为您生成的，可能与您的ID相同或不同。但是，正如其他人所提到的，您可以在aspx中使用ClientID属性：

$('<%= Label1.ClientID %>').html()

或使用ClientScriptManager方法之一在代码隐藏文件中注册客户端脚本。

Answer 18

摆脱占位符。或者按类或DOM层次结构选择。或者甚至在ID上使用部分匹配作为最后的手段。在jQuery中有许多简单，干净的方法来选择元素，我们需要摆脱旧的，丑陋的ASP.NET习惯。

Dreas Grech把最后的钉子放在棺材里。您不能将外部脚本文件与$（'＃＆lt;％= label1.ClientID％＆gt;'）类型解决方案一起使用。

迈克

Answer 19

您仍然可以使用PlaceHolders并在PlaceHolder标记中设置 ClientIDMode ：

<asp:ContentPlaceHolder ID="BodyContent" runat="server" ClientIDMode="Static">        
</asp:ContentPlaceHolder>

所有包含的控件ID都不会被更改。

Answer 20

简单，覆盖控件类。下面是一个HtmlGenericControl示例，但您可以使用任何ASP.Net控件执行此操作：

public class NoNamingContainerControl : HtmlGenericControl
{
    public NoNamingContainerControl(string tag) : base(tag) { }
    public override string ClientID
    {
        get
        {
            return this.ID;
        }
    }
}