Как обрабатывать идентификатор элементов при использовании управления пользователем 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 у них будет страница-Unique ClientId, как и все другие элементы управления сервером. Код кода не требуется.

Например

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

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>