Как использовать JQuery с главными страницами?

Я могу заставить простые примеры работать нормально, пока не задействована эталонная страница. Все, что я хочу сделать, это нажать кнопку и сказать «привет, мир» с javascript в файле .js, используя главную страницу. Любая помощь очень ценится :)


jquery asp.net master-pages
person Keith Myers    schedule 15.11.2008    source источник

Ответы (13)


arrow_upward
26
arrow_downward

ИЗМЕНИТЬ

Как указывает @Adam в комментариях, существует собственный механизм jQuery, который в основном делает то же самое, что и хак в моем первоначальном ответе. Используя jQuery, вы можете сделать

 $('[id$=myButton]').click(function(){ alert('button clicked'); });

Мой хак изначально был разработан как прототип для ASP.NET, и я адаптировал его для исходного ответа. Обратите внимание, что jQuery в основном делает то же самое под капотом. Однако я рекомендую использовать способ jQuery вместо реализации моего хака.

Исходный ответ оставлен для контекста комментария

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

Я использую эту функцию, чтобы сделать это:

function asp$( id, tagName ) {
    var idRegexp = new RegExp( id + '$', 'i' );
    var tags = new Array();
    if (tagName) {
        tags = document.getElementsByTagName( tagName );
    }
    else {
        tags = document.getElementsByName( id );
    }
    var control = null;
    for (var i = 0; i < tags.length; ++i) {
       var ctl = tags[i];
       if (idRegexp.test(ctl.id)) {
          control = ctl;
          break;
       }
    }

    if (control) {
        return $(control.id);
    }
    else {
        return null;
    }
}

Затем вы можете сделать что-то вроде:

jQuery(asp$('myButton','input')).click ( function() { alert('button clicked'); } );

где у вас есть следующее на вашей дочерней странице

<asp:Button ID="myButton" runat="server" Text="Click Me" />
person tvanfosson    schedule 15.11.2008
comment
Я новичок в этом и понятия не имел о искажении имен. Я попробую позже. Я ценю это. - person Keith Myers; 15.11.2008
comment
Привыкайте к использованию «Просмотр исходного кода» (или эквивалента) в вашем браузере. Это позволяет вам не только проверять, что ваши страницы отображают то, что вы хотите, но и учиться трюкам на страницах других людей. - person belugabob; 09.12.2008
comment
это преднамеренная опечатка '$asp' v 'asp$'? я не мог заставить это работать - он берет управление в порядке, но вызов jQuery по какой-то причине не работает - person flesh; 20.12.2008
comment
Вы НАМНОГО переусложняете это. Вы можете заменить всю эту функцию на $('[id$=myButton]').click(function(){ alert('button clicked'); }); - person Adam Lassek; 18.03.2009
comment
На самом деле, это было еще до того, как я начал активно использовать jQuery, и хак был заменой Prototype с использованием, адаптированным для jQuery. Я перешел на ASP.NET MVC и, к счастью, мне вообще не нужно беспокоиться об искажении имен. - person tvanfosson; 18.03.2009
comment
Использование ClientID для получения имени элемента управления является гораздо более простым методом и всегда будет работать, потому что независимо от того, что главная страница/страница содержимого создает в качестве идентификатора, javascript на странице содержимого будет корректно жестко кодироваться при создании. Хотя это не будет работать ни с какими включенными файлами javascript. :( - person achinda99; 18.03.2009
comment
В этом есть смысл. Я просто хотел сказать кое-что, чтобы люди знали, что это даже не близко к лучшей практике. - person Adam Lassek; 18.03.2009
comment
@achinda99: Проще? Позволю себе не согласиться; это заставляет вас тесно связать серверный код с интерфейсным javascript и разметкой. Если идентификатор рассматриваемых элементов может измениться, вы можете дать ему класс css и выбрать его таким образом. - person Adam Lassek; 18.03.2009
comment
@ Адам - ​​твой путь самый простой. stackoverflow .com/questions/1274806/ - person Jagd; 15.06.2010

arrow_upward
24
arrow_downward

Если на вашем сайте есть страницы контента в других папках, использование метода ResolveUrl страницы в пути src гарантирует, что ваш файл js всегда можно будет найти:

<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.2.6.min.js") %>' ></script>
person djuth    schedule 19.11.2008
comment
Когда я помещаю это тег заголовка и запускаю, возникает ошибка страницы и предоставляется эта коллекция элементов управления, которая не может быть изменена, поскольку элемент управления содержит блоки кода (т. е. ‹% ... %›). Описание: во время выполнения текущего веб-запроса возникло необработанное исключение. Пожалуйста, просмотрите трассировку стека для получения дополнительной информации об ошибке и о том, где она возникла в коде. Сведения об исключении: System.Web.HttpException: Коллекция Controls не может быть изменена, так как элемент управления содержит блоки кода (т. е. ‹% ... %›). - person Sarawut Positwinyu; 23.05.2011
comment
Вставлено из предложения @Jos: в ответ на комментарий @Sarawut вы получаете его проблему, например, когда используете темы. Темы попытаются добавить элементы управления в заголовок, но это не удастся, если в заголовке уже есть теги ‹%...%›. Чтобы предотвратить это, вы можете добавить скрипт через код (на главной странице): Public Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Dim lit As New Literal() lit.Text = String.Format("<script type='text/javascript' src='{0}'><" & "/script>", ResolveUrl("~/Script/jquery-1.6.1.js")) Page.Header.Controls.Add(lit) End Sub - person Andomar; 13.06.2011
comment
Мне пришлось вернуться к использованию веб-форм asp.net, и ваш ответ решил мою проблему, поскольку я не мог использовать синтаксис бритвы mvc 3 для @Url.Content... например. ‹script [email protected](~/Scripts/modernizr-1.7.min.js) type=text/javascript›‹/script› Спасибо! - person Tom Stickel; 30.05.2012

arrow_upward
20
arrow_downward

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

<asp:Button ID="myButton" runat="server" Text="Submit" />

Вы можете подключить javascript следующим образом:

$(document).ready(function() {
    $('[id$=myButton]').click(function() { alert('button clicked'); });
});

$(document).ready() срабатывает, когда DOM полностью загружен, и все элементы должны быть там. Вы можете упростить это с помощью

$(function() {});

Синтаксис селектора $('[id$=myButton]') ищет элементы на основе их атрибута id, но соответствует только концу строки. И наоборот, '[id^=myButton]' будет соответствовать началу, но для целей фильтрации UniqueID это будет не очень полезно. Есть много других полезных селекторов, которые вы можете использовать с jQuery. Изучите их все, и большая часть вашей работы будет сделана за вас.

Проблема в том, что ASP.Net создает уникальный идентификатор и атрибут имени для каждого элемента, что затрудняет их поиск. Раньше вам нужно было передать свойство UniqueID в javascript с сервера, но jQuery делает это ненужным.

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

person Adam Lassek    schedule 18.03.2009

arrow_upward
15
arrow_downward

Просто переместите тег <script type="text/javascript" src="jquery.js" /> в тег заголовка главной страницы. Затем вы можете использовать jquery на всех страницах контента.

В использовании эталонных страниц с jQuery нет ничего волшебного.

person gius    schedule 15.11.2008

arrow_upward
7
arrow_downward

Решение Адама является лучшим. Простой!

Основная страница:

<head runat="server">    
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>    
</head>

Страница содержания:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">       
<script type="text/javascript">
    $(document).ready(function () {
        $("[id$=AlertButton]").click(function () {
            alert("Welcome jQuery !");
        });
    }); 
</script> 
</asp:Content>

где кнопка

<asp:Button ID="AlertButton" runat="server" Text="Button" />
person AFD    schedule 26.02.2010

arrow_upward
5
arrow_downward

Ссылайтесь на файл Jquery .js в заголовке MasterPage следующим образом:

<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script>

(некоторым браузерам не нравится оканчиваться на />)

Затем вы можете написать что-то вроде

$('#<%= myBtn.ClientID%>').show()

в вашем javascript, убедившись, что вы используете ClientId при ссылке на элемент управления ASP.Net в своем клиентском коде. Это справится с любым «искажением» имен и идентификаторов элементов управления.

person Jared    schedule 15.11.2008
comment
Должен ли я был ожидать, что это сработает? $('#‹%= Button1.ClientID%›').click(function() { alert('Hello world!'); }); Этот код находится в моем файле .js. Я знаю, что у меня все настроено правильно, потому что, если я скопирую «искаженный» идентификатор из источника страницы, он будет работать нормально. - person Keith Myers; 16.11.2008
comment
Синтаксис ‹% %› работает только в файле .aspx. Поэтому, если вы хотите использовать это, вам нужно поместить свой скрипт в блок ‹script› в файле aspx. - person AaronSieb; 05.12.2008

arrow_upward
1
arrow_downward

Основная страница:

Библиотека jQuery находится на главной странице. Посмотрите, правильно ли указан путь. Вы можете добавить дополнительную документацию следующим образом:

<head>
    <script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script> 
    <% if (false) { %>
    <script type="text/javascript" src="/Scripts/jquery-1.2.6-vsdoc.js"></script>
    <% } %>
</head>

Основная страница:

<head>
<script type="text/javascript">
    $(document).ready(
        function()
        {
            alert('Hello!');
        }
    );
</script>
</head>

CodeBehind для страниц контента и пользовательских элементов управления:

this.textBox.Attributes.Add("onChange",
    String.Format("passElementReferenceToJavascript({0})", this.textBox.ClientID));
person Patrick de Kleijn    schedule 15.11.2008

arrow_upward
1
arrow_downward

Посмотрите этот пост:

http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx

также объясняет, как получить IntelliSense для jQuery в Visual Studio.

person Stefan    schedule 15.11.2008

arrow_upward
1
arrow_downward

Когда страницы отображаются вместе с мастер-страницами, идентификатор элемента управления изменяется при отображении страницы, поэтому мы не можем сослаться на них в jQuery, как это #controlid. Вместо этого мы должны попробовать использовать input[id$=controlid]. Если элемент управления отображается как элемент управления вводом или в качестве тега привязки, используйте a[id$=controlid] в jQuery.

person Nitin Nayyar    schedule 16.09.2012

arrow_upward
1
arrow_downward

В случае, если кто-то хочет получить доступ к метке, вот синтаксис

$('[id$=lbl]').text('Hello');

где lbl — это идентификатор метки, а текст, отображаемый в метке, — «Привет».

person hoodwink    schedule 17.01.2012

arrow_upward
0
arrow_downward

Я также начал с простейших примеров и не повезло. В конце концов мне пришлось добавить файл jquery .js снаружи раздела <head> главной страницы. Это был единственный способ заставить что-либо работать в Firefox (еще не пробовал другие браузеры).

Мне также пришлось ссылаться на файл .js с абсолютным адресом. Не совсем уверен, что с этим.

person Scott Marlowe    schedule 24.07.2009

arrow_upward
0
arrow_downward

Адам Лассек ссылается на использование селекторов jQuery, хотя я думаю, что стоит явно вызывать выбор элементов по их классу, а не по их идентификатору.

например Вместо $("#myButton").click(function() { alert('button clicked'); });

вместо этого используйте $(".myButtonCssClass").click(function() { alert('button clicked'); });

и добавьте класс к кнопке:

<asp:Button ID="myButton" runat="server" Text="Submit" CssClass="myButtonCssClass" />

Преимущество этого заключается в том, что вам не нужно беспокоиться о том, что два идентификатора элементов управления «заканчиваются» одинаково, в дополнение к возможности применять один и тот же код jQuery к нескольким элементам управления одновременно (с одним и тем же классом css).

person n00b    schedule 27.03.2012

arrow_upward
0
arrow_downward

  • ПРОБЛЕМА --> при использовании страниц Site.Master имена идентификаторов элементов управления (для элементов управления ASP) получают префикс ContentPlaceHolderID. (Обратите внимание, что это не проблема для элементов управления, отличных от ASP, поскольку они не «переинтерпретируются» - т.е. они просто отображаются так, как написано)

  • РЕШЕНИЯ:

      1. Simplest --> add ClientIDMode="Static" to the asp control definition (or set with properties) in aspx page
    • Альтернативы включают:
      1. Hardcoding the ContentPlaceHolderID name in the js code e.g "#ContentPlaceHolder1_controlName" - eek!!!!
      1. using the <%= controlName.ClientID %> in the ASP page - plus, assigning it - there- to a variable (or object of variables). The variable (or object dot notation) can then be used in external js page (NOTE: Can't use <%= controlName.ClientID %> in external js)
      1. Using CssClass with a unique(same name as ID) in ASP page and refering to the control as ".controlName" instead of "#controlName"
      1. Using the "[id$=_controlName]" instead of "#controlName" - this is involves a small search and is looking for a control that ends with the unique name - that way the start is irrelevant
person Mike    schedule 19.12.2017