jQueryとASP.NETユーザーコントロールを使用する場合の要素IDの処理方法

Question

私は単純なHTMLとして、つまりコードビハインドなしで使用しているASP.NETのユーザーコントロールをいくつか持っています。

私は固定IDの要素を持っていますが、私はいくつかのjQueryクライアントスクリプトを指しています。例：

<div id="slider-section"></div> 

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     var slider = $('#slider-section'); 
     // ... do something with the jQuery Object 
    }); 
</script> 

これは問題なく非常に良好に動作します。しかし、これには副作用があります。実際、同じユーザーコントロールのインスタンスをページに2つ追加すると、同じIDを持つ2つの要素が表示されます。

これはあなたの意見では、このような状況に対処する良い方法はありますか？

おかげ

Answer 1

単純なHTMLコントロールにrunat="server"を追加した場合、他のすべてのサーバーコントロールと同様にページ固有のClientIDが使用されます。コードビハインドコードは必要ありません。

など。

Answer 2

マークアップ内のコントロールのclientIDを読み、あなたのjQueryの機能に直接JavaScript変数の中に置きますか。

すなわち：

<div id="slider-section"></div> 

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     var slider = $('#<%= yourControl.ClientID %>'); 
     // ... do something with the jQuery Object 
    }); 
</script> 

Answer 3

私は、私は完全にあなたの質問を理解していることをわからないんだけど、私はあなたが求めていると思うものに基づいて、 html要素のクラスを使用するようにjQueryセレクターを変更すると問題が解決するでしょうか？おそらくこのようなものがあなたのために働くでしょう：

<div id="slider-section1" class="slider-section"></div> 
<div id="slider-section2" class="slider-section"></div> 

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     var slider = $('.slider-section'); 
     // ... do something with the jQuery Object 
    }); 
</script> 

p.s.たとえブラウザがサポートしていても、id/nameが同じhtml要素をページ上に持つのは良い方法ではありません。

Answer 4

ブラウザは複数の同一のIDについて不平を言うことはできませんが、HTMLページにそれらを置くことは正しくありません。

実際の問題は、すべてのIDが一意であることを確認するためにユーザーコントロールを追加するASP.NETコードを変更する必要があることです。その後、jQueryの問題も解消されます。

Answer 5

IDの全体点は、要素を一意に識別することです。要素をまとめてグループ化する場合は、同じclassを与える必要があります。

これはかなり良い説明です。 http://css-tricks.com/818-the-difference-between-id-and-class/

Answer 6

Asp。ネットコントローラクライアント側でレンダリングする場合、別のIDを作成し、例：

あなたはテキストボックスを定義します。

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

ページのソースコードをチェックすると、あなたはそのテキストボックスのIDが何かになります注意しますこのように：

<div id="slider-section"></div> 

    <script type="text/javascript" language="javascript"> 
     $(document).ready(function() {  
      var slider = $('input[id$='TextBox1']').{youroptions}; 
      // ... do something with the jQuery Object 
     }); 
    </script> 

：

id="{GUID}_Textbox1" 

はそう、あなたが何をする必要があるか、このようなIDの終わりを見つけるために、セレクタを使用していますここ

チェックドキュメント：http://api.jquery.com/category/selectors/

を楽しむには、 - すなわちなしのclientid）