У меня есть этот контроль над метками на моей веб-странице.
<asp:Label ID="Label1" runat="server" Text="test"></asp:Label>
И когда страница, отображаемая идентификатором элемента управления, изменится на что-то вроде этого
<span id="ctl00_ContentPlaceHolder1_Label3">test</span>
Как я могу остановить asp.net от изменения идентификаторов, чтобы выполнить операцию jQuery вроде этого
$('#label1').html(xml);
вместо этого селектора
$('#Label1')
используйте этот, в основном вы используете классический встроенный серверный код asp.
$('#<%= Label1.ClientID %>')
это вставляет любой идентификатор, который сгенерирован для размещения в качестве литерала.
Если вы хотите использовать внешние файлы, я бы предложил вам создать объект obj, который является глобальным на странице, чтобы хранить все ваши идентификаторы клиентов, а затем ссылаться на obj внутри ваших внешних файлов (не идеально, но это решение)
var MyClientIDs = {
Label1 = '<%= Label1.ClientID %>',
Label2 = '<%= Label2.ClientID %>',
Textbox1 = '<%= Textbox1.ClientID %>',
Textbox2 = '<%= Textbox2.ClientID %>'
};
а затем во внешнем файле вы можете получить доступ к Label1, например: $('#' + MyClientIDs.Label1)
У .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.
В .NET 4+ установите ClientIDMode="Static". Это решит вашу проблему.
Пример:
<asp:Label ID="Label1" ClientIDMode="Static" runat="server" Text="test"></asp:Label>
Вы не можете остановить asp.net от генерации этих идентификаторов. Это как раз то, как это происходит.
Вы можете использовать jquery так:
$('#<%=label1.ClientID %>').html(xml)
или
$('[id$=_label1]').html(xml)
Если и , только если, вы не планируете компоновку контейнера и, вам нужно разместить 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 control. Примерную страницу можно найти здесь
Он позволяет указать, какие элементы управления должны иметь свой искаженный идентификатор в выведенной HTML-разметке, переопределенной идентификатором, как указано в файле .aspx при визуализации HTML-страницы. Я только играл с ним кратко с одной главной страницей и панелями, но, похоже, она работает хорошо. Используя это, вы можете использовать исходные идентификаторы в своих селекторах jQuery. Однако имейте в виду, что результаты непредсказуемы, если у вас должны быть элементы управления с одинаковыми идентификаторами на главной странице (ов) и странице контента, которые объединены, чтобы отобразить HTML для одной страницы.
Короткий ответ, не беспокойтесь об использовании идентификаторов asp.net. В asp.net вы можете добавить свой собственный атрибут в тег:
<asp:TexBox ID="myTBox" runat="server" MyCustomAttr="foo" />
Затем в jquery вы можете обратиться к этому элементу через:
$("input[MyCustomAttr='foo']")
Я делаю это все время с помощью jQuery. Надеюсь, что это поможет.
Вы можете назвать имя класса, а не использовать идентификатор
Например;
$('.CssClassName'). ...
Или, если вы введете это в первой строке MasterPage, ваши идентификаторы управления не изменятся:
ClientIDMode="Static"
Например;
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="Main_MasterPage" ClientIDMode="Static" %>
Встроенный код - это правильный способ сделать это. Однако это будет изменяться в ASP.NET 4.0. Мы потратили некоторое время на добавление функции, которая позволяет полностью контролировать идентификаторы, созданные с клиентской стороны. Ниже приведены некоторые ресурсы в Интернете об этой функции.
Большинство предложений здесь будут работать, но результаты тестов в коде jQuery показывают, что чистые идентификационные селектора являются самыми быстрыми. Тот, который я использую чаще всего:
$("[id$=origControlId]")
довольно медленный, но проблема не слишком очевидна, если на странице не много элементов управления и много jQuery.
Так как довольно безболезненно назначать несколько классов элементу управления, вы можете дать каждому CSSClass, который соответствует идентификатору. Поскольку они были бы тогда уникальны (вам придется смотреть элементы управления ретранслятора, которые генерируют несколько элементов управления), вы можете выбрать по классу.
Например:
<asp:Label ID="Label1" CssClass="Label1 SomeOtherClass" runat="server" Text="test">
</asp:Label>
можно выбрать однозначно:
$(".Label1")
Это почти так же быстро, как выбор идентификатора.
Я никогда не думал об этом:
$('#<%= Label1.ClientID %>')
но я попробую!
Вам нужно передать идентификатор ClientID в код javascript (я сомневаюсь, что Label1 переименовывается в Label3)
ClientScriptManager.RegisterClientScriptBlock(GetType(), "someKey",
"$('#" + Label1.ClientID + "').html(xml);", true);
Вы можете использовать ClientID (как и все остальные), но проблема заключается в том, что он не может использоваться во внешнем файле JavaScript.
Итак, в идеале вместо использования идентификатора для ссылки на него из jQuery используйте класс CSS:
<asp:Label ID="Label1" runat="server" Text="test" CssClass="myclass"></asp:Label>
Затем вы можете ссылаться на него следующим образом:
$(".myclass")
Вы можете переопределить ClientID и UniqueID как этот парень сделал.
/// <summary>
/// Override to force simple IDs all around
/// </summary>
public override string UniqueID
{
get
{
return this.ID;
}
}
/// <summary>
/// Override to force simple IDs all around
/// </summary>
public override string ClientID
{
get
{
return this.ID;
}
}
Вы также можете создать настраиваемый элемент управления, который наследует от метки, которая переопределяет свойство ID как то, что вы хотите.
Это может быть достигнуто путем замены идентификатора asp.net исходным идентификатором при визуализации элемента управления. Это довольно легко и может быть выполнено путем создания набора настраиваемых элементов управления.
С риском очевидного изменения:
<asp:Label ID="Label1" runat="server" Text="test"></asp:Label>
к
<Label ID="Label1" Text="test"></Label>
Вам нужно поместить свойство ClientIDMode="Static" в свою кнопку, это даст идентификатор, который будет таким же во время выполнения, это то, что вам нужно, чтобы получить объект в Javascript.
вам не нужно "предотвращать" asp.net от изменения идентификатора элемента управления, чтобы использовать jquery или javascript вообще.
идентификатор, который отображается на вашей странице, является свойством ClientID элемента управления, и то, что вы устанавливаете на самом элементе управления, - это идентификатор. вы не можете установить свойство ClientID, которое оно сгенерировано для вас, и может быть или не совпадать с вашим ID. однако, как отмечали другие, вы можете использовать свойство ClientID либо в своем aspx:
$('<%= Label1.ClientID %>').html()
или зарегистрировав клиент script в коде за файлом, используя один из методов ClientScriptManager.
Просто избавитесь от заполнителя. Или выберите по классу или иерархии DOM. Или даже используйте частичное совпадение идентификатора в качестве последнего средства. Есть много простых и чистых способов выбора элемента в jQuery, нам нужно отучить себя от наших старых, уродливых привычек ASP.NET.
И Драас Греч поставил последний гвоздь в гроб. Вы не можете использовать внешние файлы script с помощью типов $('# <% = label1.ClientID% > ').
Майк
Вы по-прежнему можете использовать PlaceHolders и установить ClientIDMode в теге PlaceHolder:
<asp:ContentPlaceHolder ID="BodyContent" runat="server" ClientIDMode="Static">
</asp:ContentPlaceHolder>
Ни один из содержащихся идентификаторов элементов управления не будет изменен.
Простой, с переопределением класса управления. Вот пример с HtmlGenericControl, но вы можете сделать это с помощью любого элемента управления ASP.Net:
public class NoNamingContainerControl : HtmlGenericControl
{
public NoNamingContainerControl(string tag) : base(tag) { }
public override string ClientID
{
get
{
return this.ID;
}
}
}