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

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

30
asp.net jquery master-pages

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

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

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

убедитесь, что 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 создает уникальный атрибут id и name для каждого элемента, что затрудняет их поиск. Раньше вам нужно было передать свойство UniqueID javascript с сервера, но jQuery делает это ненужно.

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

20

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

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

15

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

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

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

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

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

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

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

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

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

5

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

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

проверьте этот пост:

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

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

1

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

1

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

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

здесь lbl - это идентификатор метки, а текст, отображаемый в метке, - "Hello"

1

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

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

0

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

0

  • проблема --> при использовании сайта.Главные страницы имена идентификаторов элементов управления (для элементов управления ASP) получают префикс ContentPlaceHolderID. (Обратите внимание, что это не проблема для элементов управления без asp, поскольку они не "переинтерпретированы" - т. е. они просто отображаются как написанные)

  • решения:

      1. Simplest --> добавить ClientIDMode= "Static" в определение элемента управления asp (или установить со свойствами) в aspx страница
    • альтернативы включают:
      1. Hardcoding имя ContentPlaceHolderID в коде js e.g "#ContentPlaceHolder1_controlName " - eek!!!!
      1. используя на странице ASP-plus, назначая его - там-переменной (или объекту переменных). Переменная (или точечная нотация объекта) может использоваться на внешней странице js (Примечание: не удается использовать in внешние JS-файлы)
      1. использование CssClass с уникальным (тем же именем, что и ID) на странице ASP и ссылка на элемент управления как ".controlName "вместо" #controlName"
      1. используя "[id$=_controlName] "вместо" #controlName " - это включает в себя небольшой поиск и ищет элемент управления, который заканчивается уникальным именем-таким образом, начало не имеет значения
0