Куда поместить код jQuery в форму веб-контента и как заставить его работать?

ProgramBox

Куда поместить код jQuery в форму веб-контента и как заставить его работать?

Post author:admin
Запись опубликована:7 мая, 2023
Post category:Вопросы по программированию

#jquery #asp.net #asp.net-3.5

Вопрос:

У меня есть форма веб-контента, главная страница которой является вложенной главной страницей. Я хочу поместить код jQuery на эту страницу, но он не принимает теги Script. На этой странице у меня есть только:

 <asp:Content ContentPlaceHolderID="MainContent">

</asp:Content>

Я также хочу, чтобы код jQuery запускался при нажатии кнопки ASP, в отличие от традиционной кнопки HTML. Распознает ли он событие нажатия кнопки ASP?

Отредактировано: Он по-прежнему не работает. Я попробовал предложения, приведенные ниже. Я внес следующие изменения в свой код:

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

 <head runat="server">
    <link rel="Stylesheet" type="text/css" href="Styles/main.css" runat="server" />
    <link id="Link1" rel="Stylesheet" href="Styles/selectCompany.css" type="text/css" runat="server" />
        <link type="text/css" href="AJAX/jqueryUI/css/ui-lightness/jquery-ui-1.8.12.custom.css" rel="Stylesheet" />
        <script type="text/javascript" src="AJAX/jqueryUI/js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="AJAX/jqueryUI/js/jquery-ui-1.8.12.custom.min.js"></script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

</head>

Изменения в форме контента:

 <asp:Content ContentPlaceHolderID="head" runat="server">
       <script type="text/javascript" language="javascript">
           $(document).ready(function() {
           $(this).attr('id').match('btnNew2').click(function() {
                   alert("Hello world!");
               });
           });
     </script>
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="MasterContentArea" runat="server">

 <div id="divHeadings" runat="server" class="TopBar">NEW COMPANY</div>
              <div id="divEntryForm" runat="server"  class="CompanyEntryForm">
                  <asp:Button ID="btnNew2" runat="server" Text="New" 
                CssClass="BtnStyle" />amp;nbsp;
              </div>

Отредактировано

Я внес изменения, предложенные @Akram и @pumkin, по-прежнему код jQuery не реагирует ни на какие события. Я обновил приведенный выше код главной страницы.

Кто-то предложил мне использовать FireBug для определения фактического идентификатора элемента управления. Хотя FireBug я обнаружил, что идентификатор одного из элементов управления является:

ctl00_MasterContentArea_btnNew2

Я заменил код jQuery изменениями, указанными ниже, но окно предупреждения по-прежнему не отображается:

Код в форме веб-контента

 <asp:Content ContentPlaceHolderID="head" runat="server">
       <script type="text/javascript" language="javascript">
           $(document).ready(function() 
           {
               $('input[id*='ctl00_MasterContentArea_btnNew2']').val().click(function() 
                {
                   alert("Hello world!");
               });
           });
       </script>
</asp:Content>

Он просто не распознает щелчок или любые другие события. Я предполагаю, что элемент управления не достигает указанной выше области кода.

1. Странно, что это должно работать. что вы подразумеваете под «не разрешать»?. Вы можете вызвать метод Jquery с помощью onClientClick кнопки server control

2. есть ли какая-либо ошибка на странице, если вы нажимаете F12 в IE или проверяете eleemtn в chrome? Любой красный крест или желтый !? попробуйте отладить код — работает ли простое оповещение только для проверки, в порядке ли синтаксис?

Ответ №1:

Поместите ContentPlaceHolder в раздел вашей главной страницы <head> :

 <head runat="server">    
   <link rel="Stylesheet" type="text/css" href="Styles/main.css" runat="server" />    
   <link id="Link1" rel="Stylesheet" href="Styles/selectCompany.css" 
      type="text/css" runat="server" />    
   <link type="text/css" 
      href="AJAX/jqueryUI/css/ui-lightness/jquery-ui-1.8.12.custom.css"
      rel="Stylesheet" />        
   <script type="text/javascript" 
       src="AJAX/jqueryUI/js/jquery-1.5.1.min.js"></script>              
   <script type="text/javascript" 
       src="AJAX/jqueryUI/js/jquery-ui-1.8.12.custom.min.js"></script>   

   <asp:ContentPlaceHolder ID="head" runat="server">        
   </asp:ContentPlaceHolder>
</head>

На странице поместите соответствующий Content :

 <asp:Content ID="head" ContentPlaceHolderID="headPlaceHolder" runat="server">

</asp:Content>

Разместите скрипты и стили вашей страницы внутри этого Content .

1. @RPK: Очистите ContentPlaceHolder на главной странице. Разместите скрипты и стили внутри заголовка, но за пределами ContentPlaceHolder.

2. @Akram: Так было и раньше. Скрипты находились в теге head за пределами ContentPlaceHolder. Он все еще не работает.

3. @RPK: Ранее у вас был пустой ContentPlaceHolder для основного раздела вашей страницы!!

4. @RPK Я отредактировал ответ. Именно таким должен быть раздел head на вашей главной странице..

5. Каким-то образом это сработало, когда я добавил ссылку на файлы jQuery в область заголовка содержимого формы веб-контента, а также изменил, как предложил Памкин: (‘[id $ =MyButton]’).click(функция(){ оповещение (‘нажата кнопка’); }); Спасибо обоим.

Ответ №2:

Как и ответил Akram S, вам нужно поместить вместо заголовка заголовок, если вы хотите поместить jQuery на главную страницу nesterd.

Вы можете использовать обычную кнопку asp, если хотите, просто отключите функцию обратного вызова на ней и присвоите ей идентификатор.

Используя jQuery в nestermaster pages, вам нужно будет найти идентификатор ASP, поскольку masterpages всегда добавляют некоторые элементы к идентификатору, и есть несколько способов прикрепить их к этим кнопкам.

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

ИЛИ — Используйте привязку codebehind <%vb.variable%>

 $("#<%=page.MyButton%>").click();

ИЛИ — Менее эффективный способ, но всегда работает — Не используйте #. Выбирает первый совпадающий идентификатор сверху.

 $(this).attr('id').match('MyButton').click(function() { });

—Редактировать

Они взяты непосредственно с моего веб-сайта, который работает с главной страницей.

Установите флажок Значение на главной странице

 $("input[name*='myCheckBox']").attr('checked')

Значение текстового поля на MasterPage

 $('input[name*='textGcal1']').val()

1. Я установил AutoPostBack = false для текстового поля, но все еще не работает.

2. Проверьте мой ответ еще раз — после редактирования. Это должно сработать. потому что это работает на моих мастер-страницах.

3. Не отвечает ни на какие события. Я также попробовал эти два способа. Как определить ID-имя любого текстового поля ASP во время выполнения?

Ответ №3:

Попробуйте поместить код скрипта внутри тега формы на сайте.Главная страница и вне тега ContentPlaceHolder.

 <form runat="server">
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('input[id*='ctl00_MasterContentArea_btnNew2']').val().click(function () {
                alert("Hello world!");
            });
        });
   </script> </form>