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

Question

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

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

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

Answer 1

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

在页面级别，如下图：

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

在网站级别

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

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

   ...
 </system.web>

Answer 2

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

示例

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

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

Answer 3

<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'

使用attribute selectors - 也推荐，看起来有点丑但是很有效。

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

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

选项3：

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

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

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

$('.myclass') //selector

选项 4：

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

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

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

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