Как обрабатывать 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

Если вы добавили 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 2

Контроллеры 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 3

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

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

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-the-difference-between-id-and-class/

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>