訪問Asp.net控制使用jQuery（所有選項）

如何使用jQuery訪問Asp.net控制使用jQuery（所有選項）

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

$('#myTextBox')是行不通的訪問asp.net控制。

來源

2013-11-26 Krishna

我有在過去的幾天裏回顧問題時看到了許多與此相似的問題。有足夠的信息，但我決定寫一個全面的列表。希望這可以幫助。 – Krishna

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

這是因爲主和控制信息，其中控制.NET駐留被預先考慮當在頁面改變呈現給

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

上面的aspx代碼這使我們編寫一個選擇器有點棘手。

您有幾個選項。這並不全面，但我會試一試。

選項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

3選項：

使用ClientIDMode="Static"，這得到了在.NET框架4.0中引入的，在控制，這樣它的ID將保持不變。 - 也推薦。

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

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

注：根據我的經驗，我已經看到了醜陋的選擇像$('#ctl00_Main_myTextBox')。這是直接複製粘貼從頁面呈現的ID並在腳本中使用它的結果。看，這會起作用。但想想如果控制ID或主ID改變會發生什麼。很顯然，您將不得不重新訪問這些ID並再次更改它們。取而代之的是，使用上面的一個選項並加以說明。

來源

2013-11-26 20:21:26 Krishna

快速無辜的問題：如果在用戶控件中的某個控件中執行此操作，那麼選項4會發生什麼情況，並且您在頁面上添加此用戶控件兩次。在運行時是否存在某種驗證，或者它是否會導致生成的HTML中的id複製？ –

@Bartdude - 它會導致HTML中的重複。 'ClientIDMode'只是保留現有的ID，所以你必須小心區分哪個ID被點擊。在這種情況下，使用類和/或數據屬性選擇器可能是一個不錯的選擇。 – Krishna

謝謝！正是我的想法。我想你不能擁有一切：安全性和靈活性。 –

除了答案由krishna可以使用name屬性，而不是當它在HTML由IIS呈現分配應該是一樣的ID值的name屬性值：

例

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

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

來源

2017-07-17 15:22:50

除了@krishna的回答，您還可以使用ClientIDMode="Static"在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>

來源

2017-11-07 23:05:44

訪問Asp.net控制使用jQuery（所有選項）

回答

相關問題