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

How to access asp.net control using jquery

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

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

$('#myTextBox') wouldn't work.

$（'＃myTextBox'）不起作用。

3 个解决方案

#1

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

The above aspx code when rendered on a page changes to

在页面上呈现时，上面的aspx代码更改为

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

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.

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

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

你有几个选择。这绝不是全面的，但我会试一试。

Option1:

选项1：

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

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.

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

Option2:

选项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.

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

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

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

Option3:

2选项：

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

使用CssClass - 强烈推荐。因为使用类的选择器干净且不复杂。

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

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

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

$('.myclass') //selector

Option4:

3选项：

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

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

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

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

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.

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

#2

In addition to the answer by krishna you can use name attribute instead when it is rendered in HTML by IIS the name attribute value assigned should be the same as the ID value:

除了krishna的答案之外，你可以使用name属性，当它由IIS呈现为HTML时，分配的name属性值应该与ID值相同：

Example

例

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

var invDate = $("input[name=txtSalesInvoiceDate]");

#3

In addition to the answer by @krishna, you can control the web control client ID generation at Page level as well as web site level using ClientIDMode="Static" In ASP.NET 4.0.

除了@krishna的答案之外，您还可以使用ClientIDMode =“Static”在ASP.NET 4.0中控制页面级别以及网站级别的Web控件客户端ID生成。

At Page level, as shown below :

在页面级别，如下所示：

<%@ Page Title="" Language="C#" MasterPageFile="~/Members/Site.Master" AutoEventWireup="true" CodeBehind="Calculator.aspx.cs" 
Inherits="store.Members.Calculator" 
ClientIDMode="Static"
%>

At web site level

在网站级别

You can use the web.config settings as shown below

您可以使用web.config设置，如下所示

 <system.web>
    <pages ClientIDMode="Static">
    </pages>

   ...
 </system.web>

#1