小编典典

使用jquery访问Asp.net控件(所有选项)

javascript

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

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

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


阅读 445

收藏
2020-05-01

共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并再次进行更改。而是使用上面的选项之一进行覆盖。

2020-05-01