如何阻止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(不理想,但它是一个解决方案)

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值前插入递增值.每个段由下划线字符(_)分隔.此算法用于早于ASP.NET 4的ASP.NET版本.

Static ClientID值设置为ID属性的值.如果控件是命名容器,则该控件将用作其包含的任何控件的命名容器层次结构的顶部.

可预测此算法用于数据绑定控件中的控件.ClientID值是通过将父命名容器的ClientID值与控件的ID值连接而生成的.如果控件是生成多行的数据绑定控件,则会在末尾添加ClientIDRowSuffix属性中指定的数据字段的值.对于GridView控件,可以指定多个数据字段.如果ClientIDRowSuffix属性为空,则在末尾添加序号而不是数据字段值.此数字从零开始,每行增加1.每个段由下划线字符(_)分隔.

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

Answer 3

设定ClientIDMode="Static".这将解决您的问题.

例:

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

Answer 4

你不能阻止asp.net生成这些ID.这就是它如何做到的事情.

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

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

要么

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

Answer 5

如果和仅当你容器布局是永远不会改变和你需要把你的JavaSctipt/jQuery的一个外部文件,你可以用你的jQuery选择IE中的生成的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控件可能很有用.一个例子页面可以在这里找到

它允许您指定哪些控件应该在输出的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/