Cómo manejar los elementos ID de Elementos cuando usa control de usuario JQuery y ASP.NET

Question

Tengo algunos controles de usuario en ASP.NET que estoy usando como simplemente HTML, es decir, sin ningún código, detrás.

Yo un control tengo un elemento con una identificación fija y lo estoy apuntando con algunos scripts de clientes jQuery. Por ejemplo:

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

Esto funciona muy bien sin ningún problema. Pero hay un efecto secundario con esto. De hecho, si agrego dos instancias del mismo control de usuario en mi página, tendré dos elementos con la misma ID.

¿Cuál es en su opinión una buena forma de manejar una situación como esta?

Gracias

Answer 1

Si agregaste runat="server" Para sus controles HTML simples, entonces tendrían un Clientid unique a la página como todos los demás controles del servidor. No se necesita código CodeBehind.

P.ej

<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

Controladores ASP.NET Cuando se renderizan en el lado del cliente, crea una ID diferente, ejemplo:

Defines un cuadro de texto:

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

Si verifica el código fuente de la página, notará que TextBox ID será algo como esto:

id="{GUID}_Textbox1"

Entonces, lo que debe hacer es usar un selector para encontrar el final de la identificación como este:

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

Verifique la documentación aquí: http://api.jquery.com/category/selectors/

disfrutar ;)

Answer 3

Si bien es posible que los navegadores no se quejen de múltiples identificaciones idénticas, no es correcto tenerlos en una página HTML.

Su verdadero problema es que necesita cambiar el código ASP.NET que agrega el control del usuario para garantizar que todas las ID sean únicas. ¡Entonces tu problema de jQuery también desaparecerá!

Answer 4

No estoy seguro de entender completamente su pregunta, pero en función de lo que creo que está preguntando; ¿Cambiar el selector JQuery para usar la clase del elemento HTML resolvería su problema? Tal vez algo como esto funcionaría para ti:

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

PD: No es una buena práctica tener elementos HTML en la página con la misma identificación/nombre, incluso si el navegador lo admite.

Answer 5

El objetivo de una identificación es identificar de manera única elementos. Si quieres "agrupar" elementos juntos, debes darles lo mismo class.

Esta es una buena explicación. http://css-tricks.com/818-the-diferference-between-id--class/

Answer 6

Leer el clientID del control en su marcado y colóquelo dentro de una variable JavaScript o directamente en su función jQuery.

es decir:

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