asp.net中嵌套元素的jQuery ID选择器？答案

【问题标题】：jQuery ID selector for nested elements in asp.net?asp.net中嵌套元素的jQuery ID选择器？
【发布时间】：2016-11-17 13:34:54
【问题描述】：

我无法弄清楚这个选择器是如何正确选择 txtUsername 元素的：

aspx:

<asp:Content ID="Content1" ContentPlaceHolderID="body" runat="Server">
    ...
    <div class="copy" style="float: left; width: 210px">
        <span class="copy" style="float: left; width: 210px">
            <asp:TextBox ID="txtUserName" runat="server" CssClass="ffield copy" Style="width: 198px;"></asp:TextBox>
        </span>
    </div>

jQuery:

var username = $('#body_txtUserName').val();

asp:TextBox 的 ID 是 txtusername 而不是 body_txtUserName，我唯一能想到的是 txtusername 嵌套在带有 ContentPlaceHolderID="body" 的 asp:Content 元素中

如果这是真的，下划线的意义是什么？我找不到关于 jQuery 选择器的语法的任何文档

【问题讨论】：

您是否检查了实际的 HTML 输出而不是 webforms 视图？ ASP.Net webforms 以在运行时更改runat="server" 元素的ID 属性而广为人知。
是的。客户 ID 和实际 ID 可能不同。在您的情况下，body_txtUserName 是客户端 ID。
使用类名作为输入，它是静态的并且更容易工作！

标签： javascript c# jquery css asp.net

【解决方案1】：

ASP.NET 是在运行时修改 ID，最好不要去猜测它。相反，您应该修复 ID，使用生成的 ID，或者对您在客户端选择的内容保持明智。您的选择：

如果您的脚本位于 aspx 页面本身，您应该可以像这样使用 ClientID：
```
$('#<%=txtUserName.ClientID %>')
```
如果您绝对确定此控件是页面上唯一使用此 ID 的控件，请使用此控件属性修复 ID：
```
ClientIDMode="Static"

$('#txtUserName')
```
您可能不应该依赖它，但生成的 ID 通常以您在服务器端使用的任何 ID 结尾。所以你可以尝试使用“以”结尾的 jQuery 选择器：
```
$('input[id$="txtUserName"]')
```

同样，这不是一个好主意，因为它依赖于关于 ID 生成工作原理的假设。

分配另一个 CSS 类并使用它。您不需要在样式表中定义此类，可以将此技术仅用于选择目的：
```
CssClass="ffield copy userNameText"

$(".userNameText")
```

【讨论】：

【解决方案2】：

它与 jquery 无关。这是因为客户端Id 和实际Id 可能不同。 body_txtUserName 在您的情况下是客户 Id。试试：

 $('#<%= txtusername.ClientID %>');

【讨论】：

请注意，这仅在您的代码位于 .aspx 文件中时才有效（实际上不应该如此）。如果它在 .js 文件中，则 ASP 标记将按原样呈现。
@rory-mccrossan 感谢您的补充:)

【解决方案3】：

这里有几个选项取决于您的实际 Javascript 所在的位置。

ASPX 文件中的 JavaScript

这很简单，因为您可以使用ClientID 属性为控件解析适当的客户端 ID：

// This will resolve the client-side ID as expected
$('#<%= txtUserName.ClientID %>');

如果您的 jQuery 代码包含在外部 Javascript 文件中，这将不起作用。

外部文件中的Javascript

如果您的 Javascript 包含在外部文件中，您可以考虑使用 the jQuery "ends-with" selector $= 来匹配以适当 ID 结尾的元素：

$('[id$="txtUserName"]')

【讨论】：