使用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- 推荐但是meh ..不是那么多.ClientID如果可以的话,我会尽量避免写作.主要原因是,您只能在.aspx页面而不是外部.js文件中使用它.

选项2:

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

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

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

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

但是,大多数情况下你甚至都不会注意到性能损失,除非你的DOM树很大.

2选项:

使用CssClass- 强烈推荐.因为使用类的选择器是干净且简单的.

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

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

$('.myclass') //selector

3选项:

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

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

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

注意:根据我的经验,我看过像丑陋的选择器$('#ctl00_Main_myTextBox').这是直接复制粘贴从页面呈现的ID并在脚本中使用它的结果.看,这会奏效.但想想如果控件ID或主ID发生变化会发生什么.显然,您将不得不重新访问这些ID并再次更改它们.而不是那样,使用上面的选项之一并涵盖.