Come gestire gli elementi ID quando si utilizza jQuery e ASP.NET controlli utente

Question

Ho alcuni controlli utente in ASP.NET che sto usando semplicemente come HTML, che è, senza code-behind.

I un controllo Ho un elemento con un ID fisso e sto indicando con alcuni script client jQuery. Ad esempio:

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

Questo funziona molto bene senza alcun problema. Ma v'è un effetto collaterale di questo. In realtà, se posso aggiungere due istanze dello stesso controllo utente sulla mia pagina avrò due elementi con lo stesso ID.

Qual è secondo te un buon modo per gestire una situazione come questa?

grazie

Answer 1

Se si è aggiunto ai tuoi runat="server" semplici controlli HTML allora avrebbe un ClientID pagine unica come tutti gli altri controlli server. Non è necessario alcun codice codebehind.

per es.

<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

controller Asp.net quando resi in lato client, crea un ID diverso, ad esempio:

si definisce una casella di testo:

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

se si controlla il codice sorgente della pagina, noterete che ID testo sarà qualcosa di simile a questo:

id="{GUID}_Textbox1"

in modo che cosa dovete fare è usare un selettore per trovare alla fine della ID in questo modo:

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

documentazione di controllo qui: http://api.jquery.com/category/selectors/

godere;)

Answer 3

Mentre i browser non possono lamentarsi più ID identici, non è corretto avere loro su una pagina HTML.

Il vero problema è che è necessario modificare il codice ASP.NET che aggiunge il controllo utente per garantire che tutti gli ID sono unici. Quindi il problema jQuery sarà anche andare via!

Answer 4

Non sono sicuro di aver capito completamente la tua domanda, ma sulla base di quello che penso che stai chiedendo; Sarebbe cambiare il selettore jQuery per utilizzare la classe dell'elemento HTML risolto il problema? Forse qualcosa di simile potrebbe funzionare per voi:

<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. Non è buona norma avere html elementi della pagina con lo stesso ID / nome, anche se i supporti del browser esso.

Answer 5

Il punto centrale di un ID è quello di identificare in modo univoco gli elementi. Se si desidera elementi "di gruppo" insieme si dovrebbe dare loro la stessa class.

Questa è una buona spiegazione. http://css-tricks.com/818-the- differenza-tra-id-e-class /

Answer 6

Leggi l'clientID del controllo nel markup e metterlo all'interno di una variabile JavaScript o direttamente nella vostra funzione di jQuery.

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