Как использовать JQuery с мастер-страницами? - PullRequest
30 голосов
/ 15 ноября 2008

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

Ответы [ 13 ]

26 голосов
/ 15 ноября 2008

EDIT

Как отмечает @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" />
24 голосов
/ 19 ноября 2008

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

<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.2.6.min.js") %>' ></script>
20 голосов
/ 18 марта 2009

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

15 голосов
/ 15 ноября 2008

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

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

7 голосов
/ 26 февраля 2010

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

Главная страница:

<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" />
5 голосов
/ 15 ноября 2008

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

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

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

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

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

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

1 голос
/ 16 сентября 2012

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

1 голос
/ 17 января 2012

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

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

, где lbl - идентификатор метки, а текст для отображения в метке - «Привет»

1 голос
/ 15 ноября 2008

Проверьте это сообщение:

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

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

1 голос
/ 15 ноября 2008

Главная страница:

Библиотека 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));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...