使用jquery访问Asp.net控件（所有选项）

Question

如何使用jQuery访问asp.net控件

<asp:TextBox runat="server" ID="myTextBox" />

$('#myTextBox') 不会工作。

Answer 1

<asp:TextBox runat="server" ID="myTextBox" />

上面的aspx代码在页面上呈现时变为

<input type="text" id="ctl00_Main_myTextBox" name="ctl00$Main$myTextBox"/>

这是因为.net控件所在的主控信息和控制信息被预先放置，这使我们编写选择器变得有些棘手。

您有几种选择。这绝不是全面的，但我会尝试一下。

选项1：

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

使用ClientID-推荐，但不是。ClientID如果可以的话，我会尽量避免写作。主要原因是，您只能在.aspx页面中使用它，而不能在外部.js文件中使用它。

选项2：

$('[id$=myTextBox]') // id which ends with the text 'myTextBox'

$('[id*=myTextBox]') // id which contains the text 'myTextBox'

使用属性选择器-也建议使用，看起来有点难看，但有效。

我在这里看到了一些问题，担心这些选择器的性能。 这是最好的方法吗？ 没有。

但是，大多数情况下，您甚至都不会注意到性能下降，除非您的DOM树很大。

选项3：

使用CssClass-强烈建议。因为使用类的选择器是干净且简单的。

如果您想知道，CssClass.net控件与class传统html控件相同。

<asp:TextBox runat="server" ID="myTextBox" CssClass="myclass" /> //add CssClass

$('.myclass') //selector

选项4：

ClientIDMode="Static"在控件上使用.NET Framework 4.0中引入的Use ，以便其ID保持不变。-也推荐。

<asp:TextBox runat="server" ID="myTextBox" ClientIDMode="Static"  /> //add ClientIDMode

$('#myTextBox') //use the normal ID selector

注意：根据我的经验，我看到过类似的丑陋选择器$(‘#ctl00_Main_myTextBox’)。这是直接复制粘贴从页面呈现的ID并将其在脚本中使用的结果。看，这会起作用。但是请考虑一下，如果控件ID或主ID发生更改，将会发生什么情况。显然，您将不得不重新访问这些ID并再次进行更改。而是使用上面的选项之一进行覆盖。