Как остановить ASP.NET от изменения идентификаторов, чтобы использовать jQuery

Question

У меня есть этот элемент управления ярлыком на моей веб-странице

<asp:Label ID="Label1" runat="server" Text="test"></asp:Label>

И когда страница отображается, идентификатор элемента управления меняется на что-то вроде этого

  <span id="ctl00_ContentPlaceHolder1_Label3">test</span>

Как я могу остановить asp.net от изменения идентификаторов для выполнения операции jQuery, подобной этой

$('#label1').html(xml);

Answer 1

вместо использования этого селектора

$('#Label1')

используйте это, в основном вы используете классический встроенный серверный код asp.

$('#<%= Label1.ClientID %>')

это вставит любой сгенерированный идентификатор для размещения в виде литерала.

Если вы хотите использовать внешние файлы, я бы посоветовал вам создать глобальный объект на странице для хранения всех ваших идентификаторов клиентов, а затем ссылаться на этот объект в ваших внешних файлах (не идеально, но это решение) 1009 *

var MyClientIDs = {
    Label1 = '<%= Label1.ClientID %>',
    Label2 = '<%= Label2.ClientID %>',
    Textbox1 = '<%= Textbox1.ClientID %>',
    Textbox2 = '<%= Textbox2.ClientID %>'
};

, а затем во внешнем файле вы можете получить доступ к Label1, например: $('#' + MyClientIDs.Label1)

Answer 2

.NET 4 теперь позволяет вам выбирать ClientIDMode :

Тип: System.Web.UI.ClientIDMode

Значение, которое указывает, как генерируется свойство ClientID. По умолчанию используется Inherit.

AutoID Значение ClientID генерируется путем объединения значений идентификатора каждого родительского контейнера именования со значением идентификатора элемента управления. В сценарии привязки данных, где несколько экземпляров элемента управления рендеринг, инкрементное значение вставляется перед элементом управления Значение идентификатора. Каждый сегмент отделяется символом подчеркивания (_). Этот алгоритм использовался в версиях ASP.NET ранее, чем ASP.NET 4.

Статический Значение ClientID установлено равным значению свойства ID. Если элемент управления является контейнером именования, элемент управления используется как верх иерархия именования контейнеров для любых элементов управления, которые она содержит.

Предсказуемый Этот алгоритм используется для элементов управления, связанных с данными управления. Значение ClientID генерируется путем объединения Значение ClientID родительского контейнера именования со значением идентификатора контроль. Если элемент управления связан с данными, который генерирует несколько строк, значение поля данных, указанного в Свойство ClientIDRowSuffix добавляется в конце. Для GridView контроль, несколько полей данных могут быть указаны. Если Свойство ClientIDRowSuffix пустое, добавлен порядковый номер в конец вместо значения поля данных. Это число начинается с нуля и увеличивается на 1 для каждой строки. Каждый сегмент разделен символ подчеркивания (_).

Наследовать Элемент управления наследует настройку ClientIDMode своего элемента управления NamingContainer.

Answer 3

В .NET 4+ установлено ClientIDMode="Static". Это решит вашу проблему.

Пример:

<asp:Label ID="Label1" ClientIDMode="Static" runat="server" Text="test"></asp:Label>

Answer 4

Вы не можете остановить asp.net от генерации этих идентификаторов. Вот только как это работает.

Вы все еще можете использовать jquery так:

$('#<%=label1.ClientID %>').html(xml) 

или

$('[id$=_label1]').html(xml)

Answer 5

Если и , только если ваша компоновка контейнера никогда не изменится и вам требуется поместить JavaSctipt / jQuery во внешний файл, вы может использовать сгенерированные идентификаторы в селекторах jQuery, например

$('#ctl00_ContentPlaceHolder1_Label3').html(xml);

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

В противном случае ваши лучшие варианты

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

$('#<%= Label3.ClientID %>').html(xml);

2. Определите уникальные классы CSS для каждого элемента управления, который вам нужно использовать в вашем jQuery, который все равно позволит вам поместить свой код js во внешний файл -

<asp:Label ID="Label3" runat="server" Text="test" CssClass="label3">
</asp:Label>

$('.label3').html(xml);

3. Используйте селекторы jQuery для сопоставления с исходным идентификатором шаблона, что опять-таки позволит вам поместить свой js-код во внешний файл -

$('[id$=Label3]').html(xml);

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

EDIT:

Я подумал, что было бы полезно обратить ваше внимание на IDOverride . Пример страницы можно найти здесь

Это позволяет вам указать, какие элементы управления должны иметь свой искаженный идентификатор в выходной разметке HTML, переопределенной с идентификатором, как это указано в файле .aspx при визуализации страницы HTML. Я только кратко поиграл с одной мастер-страницей и панелями, но, похоже, она работает хорошо. Используя это, вы можете использовать оригинальные идентификаторы в ваших селекторах jQuery. Имейте в виду, однако, что результаты непредсказуемы, если бы вы имели элементы управления с одинаковыми идентификаторами на главной странице и страницах контента, которые объединены для отображения HTML для одной страницы.

Answer 6

Краткий ответ, не беспокойтесь об использовании идентификаторов asp.net. В asp.net вы можете добавить свой собственный атрибут к тегу:

<asp:TexBox ID="myTBox" runat="server" MyCustomAttr="foo" />

Тогда в jquery вы можете обратиться к этому элементу через:

$("input[MyCustomAttr='foo']")

Я делаю это все время с помощью jQuery. Надеюсь, это поможет.

Answer 7

Вы можете называть имя класса вместо использования идентификатора

Например;

$('.CssClassName'). ...

Или, если вы введете это в самой первой строке MasterPage, ваши идентификаторы управления не изменятся:

ClientIDMode="Static"

Например;

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="Main_MasterPage" ClientIDMode="Static" %>

Answer 8

Встроенный код является правильным способом сделать это. Однако это изменится в ASP.NET 4.0. Мы потратили некоторое время на добавление функции, которая позволяет полностью контролировать идентификаторы, которые генерируются на стороне клиента. Ниже приведены некоторые ресурсы в Интернете об этой функции.

• http://blog.osbornm.com/archive/2009/01/06/asp.net-4.0-clientid-overview-again.aspx
• http://channel9.msdn.com/shows/10-4/10-4-Episode-3-ASPNET-WebForms-40/

Answer 9

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

$("[id$=origControlId]")

довольно медленный, но проблема не слишком очевидна, если на странице нет большого количества элементов управления и большого количества jQuery.

Поскольку присвоение нескольких классов элементу управления довольно безболезненно, вы можете назначить каждому класс CSSC, соответствующий идентификатору. Поскольку тогда они будут уникальными (вам придется наблюдать элементы управления типа повторителя, которые генерируют несколько элементов управления), вы можете выбирать по классам.

Например:

<asp:Label ID="Label1" CssClass="Label1 SomeOtherClass" runat="server" Text="test">
</asp:Label>

может быть выбран уникальным образом:

$(".Label1")

Что на почти так же быстро, как выбор идентификатора.

Я никогда не думал об этом:

$('#<%= Label1.ClientID %>')

но я собираюсь попробовать!

Answer 10

Вы можете использовать ClientID (как и все остальные), но проблема в том, что его нельзя использовать во внешнем файле JavaScript.

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

<asp:Label ID="Label1" runat="server" Text="test" CssClass="myclass"></asp:Label>

Тогда вы можете сослаться на это так:

$(".myclass")