Ссылка ASP.NET с помощью ID в JavaScript?

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

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

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

Ответ 1

О, и я также нашел это, если у кого-то другая проблема.

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

Ответ 2

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

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

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

Действительно, есть. Лучшее решение заключается в использовании встроенного кода ASP.NET для вставить элементы управления ClientID Свойство:
$get('<%= TextBox1.ClientID %>')
Теперь правильный идентификатор элемента клиента ссылки, независимо от структура страницы и вложенность уровень контроля. По моему мнению, очень незначительные эксплуатационные издержки этот метод стоит того, чтобы ваш клиентский скрипт более устойчив для изменения.

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

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

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

Ответ 3

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

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

приведет к:

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

чтобы у вас был тот же идентификатор.

Ответ 4

Несколько мыслей об этом:

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

Ответ 5

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

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

<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");
}

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

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

При использовании тегов на стороне сервера также известны как "блоки кода", выполняющие эту общую операцию

this.Form.Controls.Add(myContorl);

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

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

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

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

Page.DataBind()

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

TextBox1.DataBind()

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