Comment gérer les éléments ID lors de l'utilisation des contrôles utilisateur jQuery et ASP.NET

Question

J'ai des contrôles utilisateur dans ASP.NET que j'utilise simplement comme HTML, qui est, sans aucun code-behind.

un contrôle j'ai un élément avec un ID fixe et je signale avec quelques scripts clients jQuery. Par exemple:

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

Cela fonctionne très bien sans aucun problème. Mais il y a un effet secondaire à ce sujet. En fait, si j'ajoute deux instances du même contrôle utilisateur sur ma page, je vais avoir deux éléments avec le même ID.

Quelle est à votre avis une bonne façon de gérer une telle situation?

Merci

Answer 1

Si vous avez ajouté runat="server" à vos contrôles HTML simples alors ils ont une ClientID page unique comme tous les autres contrôles serveur. Aucun code behind est nécessaire.

par exemple.

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

Answer 2

contrôleurs Asp.net lorsqu'ils sont obtenus à côté client, crée un code d'identification différent, par exemple:

vous définissez une zone de texte:

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

si vous vérifiez le code source de la page, vous remarquerez que ID textbox sera quelque chose comme ceci:

id="{GUID}_Textbox1"

donc ce que vous devez faire est d'utiliser un sélecteur pour trouver la fin de l'ID comme ceci:

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

documentation de vérification ici: http://api.jquery.com/category/selectors/

jouissions)

Answer 3

Alors que les navigateurs ne peuvent pas se plaindre de plusieurs ID identiques, il n'est pas correct de les avoir sur une page HTML.

Votre vrai problème est que vous devez modifier le code ASP.NET qui ajoute le contrôle de l'utilisateur pour assurer tous les ID sont uniques. Ensuite, votre problème jQuery aussi aller!

Answer 4

Je ne suis pas sûr que je comprends parfaitement votre question, mais en fonction de ce que je pense que vous demandez; Would changer le sélecteur jQuery pour utiliser la classe de l'élément HTML résoudre votre problème? Peut-être quelque chose comme ceci fonctionnerait pour vous:

<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. Ce n'est pas bon d'avoir des éléments HTML sur la page avec le même identifiant / nom, même si les supports du navigateur il.

Answer 5

Le point entier d'un ID unique est d'identifier les éléments. Si vous voulez des éléments « du groupe » ensemble, vous devriez leur donner la même class.

Ceci est une très bonne explication. http://css-tricks.com/818-the- différence entre-id-et-classe /

Answer 6

Lire la clientID du contrôle dans votre balisage et le mettre dans une variable JavaScript ou directement dans votre fonction jQuery.

-à-dire:

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