使用 jquery 访问 Asp.net 控件(所有选项) [英] Accessing Asp.net controls using jquery (all options)

问题描述

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

How to access asp.net control using jquery

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

$('#myTextBox') 不起作用.

推荐答案

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

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

The above aspx code when rendered on a page changes to

这是因为 .net 控件所在的主控信息被预先添加，这使得我们编写选择器变得有点棘手.

This is because the master and control information in which the .net control resides gets prepended which makes it a little tricky for us to write a selector.

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

You have a few options. This is by no means comprehensive, but I will give it a try.

选项 1:

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

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

Use the ClientID - recommended but meh.. not so much. I would try to avoid writing ClientID if I could. The primary reason being, you can only use it in .aspx pages and not external .js files.

选项 2:

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

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

使用属性选择器 - 也推荐使用，看起来有点丑但有效.

Using attribute selectors - recommended too, looks a bit ugly but effective.

我在这里看到了一些问题，担心这些选择器的性能.这是最好的方法吗?不是.

I have seen a few questions here, worrying about performance with these selectors. Is this the best way possible? No.

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

But, most of the time you won't even notice the performance hit, unless of course, your DOM tree is huge.

选项 3:

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

Using CssClass - highly recommended. Because selectors using classes are clean and uncomplicated.

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

In case you are wondering, CssClass for .net controls is the same as class for traditional html controls.

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

$('.myclass') //selector

选项 4:

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

Use ClientIDMode="Static", which got introduced in .NET Framework 4.0, on the control so that it's ID will stay unchanged. - recommended too.

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

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

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

Note: In my experience, I have seen ugly selectors like $('#ctl00_Main_myTextBox'). This is the result of directly copy pasting the ID rendered from the page and use it in the script. Look, this will work. But think about what will happen if the control ID or the master ID changes. Obviously, you will have to revisit these IDs and change them again. Instead of that, use one of the options above and be covered.

这篇关于使用 jquery 访问 Asp.net 控件(所有选项)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！