Question

我有一个网页内容表单，其母版页是嵌套母版页。我想把JQuery代码放在这个页面中，但它不接受Script标签。在这个页面中，我只有：

<asp:Content ContentPlaceHolderID="MainContent">

</asp:Content>

我还希望通过我的ASP按钮点击触发JQuery代码，而不是传统的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" />&nbsp;
              </div>

被修改

我按照@Akram和@pumkin的建议进行了更改，但仍然是JQuery代码没有响应任何事件。我已经更新了上面的母版页代码。

有人建议我使用FireBug来识别控件的实际ID名称。虽然FireBug我检测到其中一个控件的ID为：

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>

它根本无法识别Click或任何其他事件。我猜控件没有到达上面的代码区域。

Answer 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。

中

Answer 2

像Akram S一样回答如果你想把jQuery放在nesterd主页中，你需要把headContent占位符。

如果您只想在其上禁用回调函数并为其提供ID，则可以使用普通的asp按钮。

在nestermaster页面中使用jQuery，您必须找到ASP ID，因为masterpages总是将一些内容添加到id中，并且有几种方法可以附加到这些按钮。

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

或 - 使用代码隐藏附加＆lt;％vb.variable％＆gt;

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

OR - 一种效率较低的方式但始终有效 - Don使用＃。从顶部选择第一个匹配的ID。

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

- 编辑

这些直接来自我的网站，该网站适用于母版页。

复选框母版页面上的值

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

MasterPage上的文本框值

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

Answer 3

尝试将脚本代码放在Site.Master页面中的form标记内，并放在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>

将JQuery代码放在Web内容表单中的位置以及如何使其工作？

3 个答案: