Ссылка ASP.NET контроля по ID в JavaScript?

Question

Когда элементы управления ASP.NET отображаются, их идентификаторы иногда меняются, например, если они находятся в контейнере имен. Например, Button1 может иметь идентификатор ctl00_ContentMain_Button1, если он отображается.

Я знаю, что вы можете написать свой JavaScript как строки в вашем .cs-файле, получить идентификатор клиента control и вставить скрипт на свою страницу с помощью clientcript, но есть ли способ, с помощью которого вы можете ссылаться на элемент управления непосредственно из JavaScript с помощью ASP .NET Ajax?

Я обнаружил, что запись функции для рекурсивного анализа dom и поиска элемента управления, который СОДЕРЖИТ id, который я хочу, ненадежна, поэтому я искал лучшую практику, а не работу.

Answer 1

О, и я также нашел это, в случае, если кто-то еще сталкивается с этой проблемой.

Используйте пользовательский селектор JQuery для элементов управления ASP.NET: http://john-sheehan.com/blog/custom-jquery-selector-for-aspnet-webforms/

Answer 2

Я не думаю, что для этого есть одна «лучшая практика». Там много разных довольно хорошо практики. Вот наша:

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

<span id="something_crazy_long"> 
    control markup 
</span> 
<script type="text/javascript">new CustomControl('something_crazy_long');</script> 

Каждый элемент управления имеет сопроводительную JS, как:

var CustomControl = function(id) { 
    this.control = document.getElementByID(id); 
    this.init(); 
}; 

CustomControl.prototype.init = function() { 
    //do stuff to wire up relevant events 
}; 

В кодовом коде мы делаем что-то вроде:

class CustomControl : Control 

override void Render(HtmlTextWriter writer) 
{ 
    writer.WriteBeginTag("span"); 
    writer.WriteAttribute("id", this.ClientID); 
    writer.Write(HtmlTextWriter.TagRightChar); 
    //write control markup 
    writer.WriteEndTag("span"); 
    writer.WriteBeginTag("script"); 
    writer.WriteAttribute("type", "text/javascript"); 
    writer.Write(HtmlTextWriter.TagRightChar); 
    writer.Write(
     string.Format("new CustomControl('{0}');", this.ClientID) 
    ); 
    writer.WriteEndTag("script"); 
} 

Answer 3

Пара из вас ghts на этом:

1) Мне очень повезло получить элементы класса css вместо id, потому что идентификаторы asp.net не являются надежными, как вы заявили. Я использую эту функцию, и она работает достаточно хорошо:

function getElementsByClass(searchClass,node,tag) { 
var classElements = new Array(); 
if (node == null) 
    { 
     node = document; 
    } 

if (tag == null) 
    { 
     tag = '*'; 
    } 

var els = node.getElementsByTagName(tag); 
var elsLen = els.length; 
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); 

for (i = 0, j = 0; i < elsLen; i++) 
    { 
     if (pattern.test(els[i].className)) 
      { 
       classElements[j] = els[i]; 
       j++; 
      } 
     } 
return classElements; 
} 

2) jQuery помогает здесь много. Используя jQuery, вы можете надежно получить элементы, где id заканчивается определенной строкой. Хотя это не «причина использования jQuery, это определенно плюс.

3) Это будет исправлено в ASP.NET 4.0 так висят там :-) http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx

Answer 4

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

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

Answer 5

Это сообщение Дэйв Уорд может иметь то, что вы ищете:

http://encosia.com/2007/08/08/robust-aspnet-control-referencing-in-javascript/

Выдержка из статьи:

Действительно есть. Лучшее решение - использовать встроенный ASP.NET код впрыснуть элемент управления ClientID свойства:

$get('<%= TextBox1.ClientID %>') 

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

И некоторые примеры код Дэйв из комментария резьбы этого поста:

<script> 
    alert('TextBox1 has a value of: ' + $get('<%= TextBox1.ClientID %>').value); 
</script> 

Комментария нить к статье я связан выше, имеет некоторые хорошие дискуссии, а также.

Answer 6

Вы можете получить идентификатор с помощью document.getElementById метода, а также.

Answer 7

Для 'ctl00_ContentMain_Button1' - В asp.net, когда страница отображается в браузере, первая часть остается той же 'ctl00'. Вторая часть - это идентификатор ContentPlaceHolder, используемый 'ContentMain'. Третий идентификатор элемента управления «Button1»

мне это понравилось http://codedotnets.blogspot.in/2012/01/how-get-id-server-control-javascript.html

Answer 8

Я предпочитаю данные связанные теги в document.getElementById разметки («<% # TextBox1.ClientID%>»). Значение, по сравнению с использованием реализации тега серверной стороны <% = TextBox1.ClientID%>.

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

При использовании боковых тегов сервера также известен как 'блоки кода' выполнение этой распространенной операцией

this.Form.Controls.Add (myContorl);

формирует эту ошибку во время выполнения:

Коллекция управления не может быть изменена, поскольку контроль содержит блоки кода (т.е. <% ...%>).

К сожалению, это часто становится очевидным только после того, как вы создали свой веб-сайт.

При реализации данных связанных управления «<% # TextBox1.ClientID%>» разрешить значение свойств управления, на который ссылается в разметке, в соответствующем месте, например, в конце Page_Load привязки данных, например так:

.DataBind()

Имейте в виду Page.DataBind() вызывает дочерние элементы управления на странице также DataBind, это может быть нежелательным побочным эффектом, если страница обрабатывает данные связывания определенного ребенка управляет отдельно. Если это так, то связывание данные могут быть выполнены по индивидуальному контролю, как это:

TextBox1.DataBind()

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

Answer 9

Вы можете изменить свойство ClienIDMode элемента управления на 'Static', что приведет к тому же идентификатору, который вы дадите элементу управления в коде .NET.

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

приведет:

<input name="ctl00$MainContent$TextBox1" type="text" id="TextBox1"> 

поэтому у вас есть один и тот же идентификатор.