jqueryおよびasp.netユーザーコントロールを使用するときの要素IDを処理する方法

StackOverflow https://stackoverflow.com/questions/6830328

質問

ASP.NETには、単にHTMLとして使用しているユーザーコントロールがあります。つまり、コードビハインドなしで使用しています。

私は1つのコントロール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つの要素があります。

あなたの意見では、このような状況を処理する良い方法はどれですか？

ありがとう

役に立ちましたか？

解決

追加した場合 runat="server" あなたのシンプルなHTMLコントロールには、他のすべてのサーバーコントロールと同様に、ページUnique ClientIDがあります。 CodeBehindコードは必要ありません。

例えば

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

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

他のヒント

ASP.NETコントローラークライアント側でレンダリングされた場合、別のIDを作成します。例：

テキストボックスを定義します。

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

ページのソースコードを確認すると、TextBox IDが次のようなものになることに注意してください。

id="{GUID}_Textbox1"

したがって、あなたがする必要があるのは、セレクターを使用してこのような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>

ここでドキュメントを確認してください： http://api.jquery.com/category/selectors/

楽しい ;）

ブラウザは複数の同一のIDについて文句を言うことはないかもしれませんが、HTMLページにそれらを持っていることは正しくありません。

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

私はあなたの質問を完全に理解しているかどうかはわかりませんが、あなたが尋ねていると思うことに基づいています。 jQueryセレクターを変更してHTML要素のクラスを使用して問題を解決しますか？たぶん、このようなことはあなたのために働くでしょう：

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

PSブラウザーがサポートしていても、同じID/名前を持つHTML要素をページに配置することは良い習慣ではありません。

IDの全体的なポイントは、要素を一意に識別することです。要素を「グループ」したい場合は、同じものを与える必要があります class.

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

読む clientID マークアップ内のコントロールの中で、JavaScript変数の内側またはJQUERY関数に直接配置します。

つまり：

<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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top