web-dev-qa-db-ja.com

jqueryを使用したAsp.netコントロールへのアクセス（すべてのオプション）

Jqueryを使用してasp.netコントロールにアクセスする方法

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

$('#myTextBox')は機能しません。

javascriptc#jqueryasp.net
25
Krishna

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

上記のaspxコードは、ページにレンダリングされると次のように変わります。

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

これは、.netコントロールが存在するマスターおよびコントロール情報が先頭に追加されるため、セレクターを作成するのが少し面倒になるからです。

いくつかのオプションがあります。これは決して包括的なものではありませんが、試してみます。

Option1：

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

ClientIDを使用します-推奨されますが、それほどではありません。できればClientIDを書かないようにします。主な理由は、_.aspx_ページでのみ使用でき、外部の_.js_ファイルでは使用できないことです。

Option2：

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

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

attribute selectors -を使用することもお勧めします。少しugいですが効果的です。

ここでいくつかの質問を見て、これらのセレクターのパフォーマンスについて心配しています。 これが最良の方法ですか？いいえ。

しかし、ほとんどの場合、もちろんDOMツリーが巨大でない限り、パフォーマンスの低下に気付くことすらありません。

Option3：

CssClassの使用-強くお勧めします。クラスを使用するセレクタはクリーンで複雑ではないためです。

ご参考までに、.netコントロールのCssClassは、従来のhtmlコントロールのclassと同じです。

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

$('.myclass') //selector
_

Option4：

.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を再確認し、再度変更する必要があります。その代わりに、上記のオプションのいずれかを使用してカバーしてください。

80
Krishna

krishna による答えに加えて、IIS割り当てられた名前属性値はID値と同じでなければなりません。 ：

例

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

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

@krishnaによる回答に加えて、ClientIDMode="Static" ASP.NET 4.0で。

以下に示すように、ページレベルで：

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

Webサイトレベルで

以下に示すようにweb.config設定を使用できます

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

   ...
 </system.web>
0
M.Hassan