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

Accessing Asp.net controls using jquery (all options)

本文关键字：选项 控件 jquery 访问 Asp net 使用      更新时间：2023-10-18

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

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

$('#myTextBox')行不通。

<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 树很大。

选项 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 并再次更改它们。取而代之的是，请使用上述选项之一并被覆盖。

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

例 

<asp:TextBox ID="txtSalesInvoiceDate" runat="server" />
var invDate = $("input[name=txtSalesInvoiceDate]");

除了按@krishna回答之外，您还可以使用 ClientIDMode="Static" In ASP.NET 4.0 在页面级别和网站级别控制 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>
相关文章：