web-dev-qa-db-ja.com

jQueryでasp.netrunatサーバーからIDを取得する

ASP.NETを使用してjQueryでいくつかのものを作成しようとしています。ただし、runat="server"のIDは、HTMLで使用されているIDと同じではありません。

私はこれを使用して、この状況からIDを取得していました。

$("#<%=txtTest.ClientID%>").val();

ただし、この場合は機能しません。理由がわからない。

Javascript

/* Modal */
function contatoModal() {
    //alert("Test");
    alert($("#<%=txtTest.ClientID%>").val());
}

HTML

< input runat="server" id="txtTest" value="test" />

任意のヒント？

javascriptjqueryasp.netrunatserver
7
Michel Ayres

<%= txtTest.ClientID %>は機能するはずですが、サーバーサイドスクリプトが実行されない別のjavascriptファイルでは機能しません。別の可能性は、クラスセレクターを使用することです。

<input runat="server" id="txtTest" value="test" class="txtTest" />

その後：

var value = $('.txtTest').val();
19
Darin Dimitrov

他の人が述べたように、クラスセレクターをjQueryに渡すことができますが、それは少し面倒です。 jQuery属性はselectorで終わる を使用することを好みます。生成されたIDがコントロールのフラット化された階層である場合、「endswith」セレクターを使用して要素を見つけることができます。

<input runat="server" id="txtText" />

レンダリングされると、生成されたIDは次のようになります（マスターページのコンテンツプレースホルダー内の場合）。

<input id="ctl00_contentplaceholder_txtText" />

このコントロールを見つけるには：

$("input[id$='txtText']")

リピーター内で使用する場合は注意が必要です。

5
Alex

WebForm/HTMLページで...

<asp:TextBox ID="txtUserName" runat="server" Class="form-control"></asp:TextBox>

Jqueryで

var UserName = $("[id*=txtUserName]").val();
alert(UserName);

100％確かに私のために働いています...

4
Ahsan Aftab

ASP.NET 4を使用していて、ClientIDModeが「Predictable」に設定されている場合、階層に基づいてIDを予測できます。または、「静的」に設定して、asp.netが混乱しないようにします。

それに関するScottGuの記事 http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids- vs-2010-and-net-4-0-series.aspx

また、これは外部JSファイルシナリオを使用する場合に非常に役立ちます。

2
shaans

Darin Dimitrov が彼の答えで言ったように：

<%= txtTest.ClientID %>は機能するはずですが、サーバーサイドスクリプトが実行されない別のjavascriptファイルにはありません。

それらのために私が見つけることができた解決策は次のとおりです。

<input runat="server" id="txtTest" value="test" class="txtTest" />
  • classの代わりにIDを使用してください

クラスを使用すると、どこでも値を取得できます。これは最良の解決策の1つです（通常は最良です）

var value = $('.txtTest').val();
  • ClientIDでaspxコードを使用します

AspxではいつでもClientIDを呼び出すことができますが、ある種の構造を使用している場合、これは最善の解決策ではありません。私は何かをテストするときにこの方法を使うのが好きです。

var value = $('#<%=txtTest.ClientID%>').val();

回避策を使用して、外部jsファイルでClientIDを使用することもできます。 それはきれいではありません、本当に必要な場合にのみ使用してください。私は通常、Telerikを使用するときにこれを行います。

Aspxの場合：

var id = <%=txtTest.ClientID%>;

Jsファイル：

var value = $('#'+id).val();

したがって、HTMLは

<input runat="server" id="txtTest" value="test" ClientIDMode="Static" />

そしてjsはそれが名前が付けられているようにそれを呼び出すことができます

var value = $('#txtTest').val();

このソリューションの問題は、ページのidsでの重複を避けるために、非常に注意する必要があることです。コントローラでStaticモードを使用しないでください。

述べているようにMSDN：

ClientID値は、IDプロパティの値に設定されます。コントロールがネーミングコンテナの場合、コントロールは、コントロールに含まれるすべてのコントロールのネーミングコンテナの階層の最上位として使用されます。

shaansの回答 のリンクは、ClientIDModeに関する追加情報を確認するのに最適な場所です。

ASP.NET 4 Webフォームを使用したよりクリーンなHTMLマークアップ-クライアントID（VS2010および.NET4.0シリーズ）

2
Michel Ayres

変数名に入れてみてください：

var txtTestID = '#' + '<%=txtTest.ClientID %>';

$(txtTestID).val();

<%=が二重引用符で囲まれるのが好きかどうかはわかりません。一重引用符を使用しない場合、私は常にさまざまな動作をしていました。

2
Joel Etherton

レンダリングされたIDの問題を回避するには、代わりにクラスを使用してください。これはレンダリング中に変更されません：

function contatoModal() {

//alert("Test");

alert($(".txtTest").val());

}

HTML：

< input runat="server" id="txtTest" value="test" class="txtText" />
0
Curt