Как использовать JQuery с мастер-страницами?
Я могу заставить простые примеры работать нормально, пока не задействована главная страница. Все, что я хочу сделать, - это нажать кнопку и сказать ей "привет мир" с javascript в файле.js, используя главную страницу. Любая помощь очень ценится:)
13 ответов
РЕДАКТИРОВАТЬ
Как отмечает @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" />
Если на вашем сайте есть контентные страницы в других папках, используйте ResolveUrl Метод в пути src гарантирует, что ваш js-файл всегда будет найден:
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.2.6.min.js") %>' ></script>
Убедитесь, что 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]' будет соответствовать началу, но для целей фильтрации уникального идентификатора это будет не очень полезно. Есть много других полезных селекторов, которые вы можете использовать с jQuery. Изучите их все, и большая часть вашей работы будет выполнена для вас.
Проблема в том, что ASP.Net создает уникальный атрибут id и name для каждого элемента, что затрудняет их поиск. Раньше вам приходилось передавать свойство UniqueID в javascript с сервера, но jQuery делает это ненужным.
С помощью селекторов jQuery вы можете полностью отделить javascript от серверной части и связать события непосредственно в своем коде javascript. Вам больше не нужно добавлять javascript в разметку, что повышает удобочитаемость и значительно упрощает рефакторинг.
Просто переместите <script type="text/javascript" src="jquery.js" /> тег в заголовок тега на главной странице. Тогда вы можете использовать jquery на всех страницах контента.
В использовании мастер-страниц с jQuery нет ничего волшебного.
Решение Адама является лучшим. Просто!
Главная страница:
<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" />
Обратитесь к файлу Jquery .js в заголовке MasterPage следующим образом:
<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script>
(некоторые браузеры не любят заканчивать его на />)
Тогда вы можете написать такие вещи, как
$('#<%= myBtn.ClientID%>').show()
в вашем javascript убедитесь, что вы используете ClientId при обращении к элементу управления ASP.Net в вашем клиентском коде. Это будет обрабатывать любое искажение имен и идентификаторов элементов управления.
Главная страница:
Библиотека 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));
Проверьте этот пост:
http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx
Также объясняется, как получить IntelliSense для JQuery в Visual Studio.
Когда страницы отображаются вместе с главными страницами, идентификатор управления изменяется при отображении страницы, поэтому мы не можем ссылаться на них в jQuery, как это #controlid, Вместо этого мы должны попробовать использовать input[id$=controlid], Если элемент управления отображается как элемент управления вводом или если в качестве тега привязки используется a[id$=controlid] в jQuery.
В случае, если кто-то хочет получить доступ к метке, вот синтаксис
$('[id$=lbl]').text('Hello');
где lbl это идентификатор метки и текст для отображения в метке "Привет"
Адам Лассек связался с использованием селекторов 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).
Я также начал с самых простых примеров и мне не повезло. Наконец мне пришлось добавить файл jquery .js вне <head> раздел главной страницы. Это был единственный способ заставить что-либо работать в Firefox (пока еще не пробовал другие браузеры).
Я также должен был ссылаться на файл.js с абсолютным адресом. Не совсем уверен, что с этим.
ПРОБЛЕМА -> при использовании страниц Site.Master имена идентификаторов элементов управления (для элементов управления ASP) получают префикс ContentPlaceHolderID к ним. (Обратите внимание, что это не проблема для элементов управления не asp, так как они не "переосмысливаются" - то есть они просто появляются как написано)
РЕШЕНИЯ:
- Самый простой -> добавить ClientIDMode="Static" в определение элемента управления asp (или установить со свойствами) на странице aspx
- Альтернативы включают в себя:
- Жесткое кодирование имени ContentPlaceHolderID в коде js, например, "#ContentPlaceHolder1_controlName" - eek!!!!
- используя <% = controlName.ClientID%> на странице ASP - плюс, назначая его - там переменной (или объекту переменных). Переменная (или точечная нотация объекта) может затем использоваться на внешней странице js (ПРИМЕЧАНИЕ. Невозможно использовать <% = controlName.ClientID%> во внешней js)
- Использование CssClass с уникальным (то же имя, что и ID) на странице ASP и ссылка на элемент управления как ".controlName" вместо "#controlName"
- Использование "[id$=_controlName]" вместо "#controlName" - это включает в себя небольшой поиск и ищет элемент управления, который заканчивается уникальным именем - таким образом, запуск не имеет значения