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

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

Ответ 1

ИЗМЕНИТЬ

Как отмечает @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" />

Ответ 2

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

<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.2.6.min.js") %>' ></script>

Ответ 3

Убедитесь, что 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 в разметку, что облегчает чтение и упрощает рефакторинг.

Ответ 4

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

Нет никакой магии в использовании мастер-страниц с jQuery.

Ответ 5

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

Мастер-страница:

<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" />

Ответ 6

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

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

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

Затем вы можете писать такие вещи, как

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

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

Ответ 7

Мастер-страница:

Библиотека 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));

Ответ 8

Отправляй сообщение:

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

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

Ответ 9

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

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

где lbl - это идентификатор метки, а текст для отображения в метке - "Hello"

Ответ 10

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

Ответ 11

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

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

Ответ 12

Адам Лассек связан с использованием селекторов 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).

Ответ 13

ПРОБЛЕМА → при использовании страниц Site.Master имена идентификаторов элементов управления (для элементов управления ASP) получают префикс ContentPlaceHolderID. (Обратите внимание, что это не проблема для элементов управления без asp, поскольку они не получают "reinterpreted" - то есть они просто отображаются как написано)
SOLUTIONS:
- - Simplest → добавить ClientIDMode = "Static" в определение управления asp (или установить со свойствами) на странице aspx
- Альтернативы включают:
- 1. Hardcoding имя ContentPlaceHolderID в коде js, например, "# ContentPlaceHolder1_controlName" - eek!!!!
1. с использованием <% = controlName.ClientID% > на странице ASP - плюс, назначая его - там - переменную (или объект переменных). Переменная (или обозначение точки объекта) затем может использоваться на внешней странице js (ПРИМЕЧАНИЕ. Нельзя использовать <% = controlName.ClientID% > во внешних js)

Использование CssClass с уникальным (то же имя, что и ID) на странице ASP и ссылкой на элемент управления как ".controlName" вместо "#controlName"

Используя "[id $= _ controlName]" вместо "#controlName" - это предполагает небольшой поиск и ищет элемент управления, который заканчивается уникальным именем - таким образом, начало не имеет значения.