Как обрабатывать ID элементов при использовании пользовательских элементов управления jQuery и ASP.NET

Question

У меня есть некоторые пользовательские элементы управления в ASP.NET, которые я использую просто как HTML, то есть без какого-либо кода позади.

У меня один элемент управления, у меня есть элемент с фиксированным идентификатором, и я указываюэто с некоторыми клиентскими скриптами 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>

Это очень хорошо работает без каких-либо проблем.Но есть побочный эффект с этим.Фактически, если я добавлю два экземпляра одного и того же пользовательского элемента управления на мою страницу, у меня будет два элемента с одинаковым идентификатором.

Какой, по вашему мнению, хороший способ справиться с такой ситуацией?

спасибо

Answer 1

Контроллеры Asp.net при визуализации на стороне клиента создают другой идентификатор, например:

Вы определяете текстовое поле:

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

если вы проверите исходный код страницы, вы заметите, что идентификатор текстового поля будет выглядеть примерно так:

id="{GUID}_Textbox1"

так что вам нужно использовать селектор, чтобы найти конец идентификатора, как это:

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

наслаждайся;)

Answer 2

Хотя браузеры могут не жаловаться на несколько идентичных идентификаторов, неправильно размещать их на HTML-странице.

Ваша настоящая проблема заключается в том, что вам нужно изменить код ASP.NET, в который добавлен пользовательский элемент управлениячтобы все идентификаторы были уникальными.Тогда ваша проблема с jQuery также исчезнет!

Answer 3

Если вы добавите runat="server" к своим простым элементам управления HTML, они будут иметь уникальный идентификатор страницы, как и все другие элементы управления сервером. Код за кодом не требуется.

Е.Г.

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

Я не уверен, что полностью понимаю ваш вопрос, но исходя из того, что, по-вашему, вы спрашиваете;Решит ли ваша проблема изменение селектора 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 Не рекомендуется размещать на странице элементы html с одинаковым идентификатором / именем, даже если браузер это поддерживает.

Answer 5

Весь смысл идентификатора заключается в уникальной идентификации элементов.Если вы хотите «сгруппировать» элементы вместе, вы должны дать им одинаковые class.

Это довольно хорошее объяснение.http://css -tricks.com / 818-разностной-между-ид-и-класс /

Answer 6

Прочитайте 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>