使用 jQuery 检索服务器控件的 ID

Posted 2023-03-05

【中文标题】使用 jQuery 检索服务器控件的 ID

【英文标题】：retrieve ID of server control using jQuery

【发布时间】：2011-08-05 16:17:44

【问题描述】：

如何使用 jQuery 获取服务器控件的 ID？

例如我有

<asp:Label ID="label1" runat="server""></asp:Label>

现在我想得到“label1”，

var id = ??

【问题讨论】：

查看生成的 html。不太清楚 ASP runat 的工作原理

@JohnP 是对的，您可以查看 HTML，或者像下面显示的那样使用 clientID。

【参考方案1】：

jQuery 在客户端运行，因此只能访问 html 元素的 ID，而不是服务器上的 asp 控件。

【讨论】：

没错，jQuery 在客户端运行。然而，ASP 对带有 runat 标记的控件的 ID 做了一些奇怪的事情。所以你不能只使用ID。它在运行时改变......

【参考方案2】：

var labelID = $('#<%= label1.ClientID %>');

您需要获取客户端 ID。

如果你只需要ID，而不是控件的实际值，那么你甚至不需要jQuery。

var labelID  = '<%= label1.ClientID %>';

【讨论】：

在您的第一个示例中，我会将“id”重命名为其他名称，因为它是对标签元素的 JQuery 包装器的引用。

【参考方案3】：

标签呈现为跨度标签。所以如果你想选择所有的标签：

    $(document).ready(function()
    
        $Labels = $("span");

        $Labels.each(function()
        
            alert(this.id); 
        );
    );

【参考方案4】：

如果您使用 ASP.NET 4.0，您可以设置属性 ClientIDMode="Static"，您的代码将如下所示：

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

js:

var id = 'label1';

【讨论】：

爱上 .net 4.0。整个 'clientid' 的事情肯定让我在那天花了很长时间的谷歌搜索。

可以在 web.config 中添加页面 clientIdMode="Static" 指令以让整个站点执行此操作。

其实js不应该是var id = document.getElementById("label1");吗？

不，它只是 id，而不是元素本身。

【参考方案5】：

您是否使用母版页。如果是，请提供 ContentPlaceHolderID 以及控件 ID。

例如：

 jQuery("#ContentPlaceHolderID_ControlId").val;
   jQuery("#body_label1").text;

你可以在 Viewsource 中看到这个

【讨论】：

这种方法变得丑陋，你拥有的“嵌套”越多。 ASP 面板、用户控件、母版页等都添加到 ID 值。您要么需要使用纯 jQuery 方法，并获得以您的 ControlID 值“结尾”的控件，要么使用 @pstarkov 或 Jack Marchetti 提到的方法。

【参考方案6】：

var $lblObj = $("label[id$='label1']:first")