为啥这个脚本不是从母版页运行的？

Posted 2023-04-13

技术标签:

【中文标题】为啥这个脚本不是从母版页运行的？【英文标题】：Why isn't this script running from the masterpage?为什么这个脚本不是从母版页运行的？ 【发布时间】：2010-10-15 11:39:57 【问题描述】：

我有一个与母版页关联的页面。在母版页中，我将 css 链接放在 head 部分，并将 jquery 脚本标记和包含切换网格功能的脚本放置，但是当它不起作用时。当我点击一个项目时，看起来它甚至没有调用 showhide。

这是母版页的sn-p：

<head runat="server">
<title></title>
<link href="MainLayout.css" rel="stylesheet" type="text/css" />
<link href="ajaxtab.css" rel="stylesheet" type="text/css" />
<link href="dialog.css" rel="stylesheet" type="text/css" />
<link href="grid.css" rel="stylesheet" type="text/css" />
<link href="pager.css" rel="stylesheet" type="text/css" />
<link href="subgrid.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
      //master: id of div element that contains the information about master data
      //details: id of div element wrapping the details grid
      function showhide(master, detail) 
          //First child of master div is the image
          var src = $(master).children()[0].src;
          //Switch image from (+) to (-) or vice versa.
          if (src.endsWith("plus.png"))
              src = src.replace('plus.png', 'minus.png');
          else
              src = src.replace('minus.png', 'plus.png');

          //Set new image
          $(master).children()[0].src = src;

          //Toggle expand/collapse                   
          $(detail).slideToggle("normal");
      
</script>
<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>
</head>

这里是aspx页面中onclick事件中包含showhide函数的div：

<div class="searchgroup" 
id='<%#String.Format("master0",Container.DataItemIndex)%>'
onclick='showhide(<%#String.Format("\"#master0\"",Container.DataItemIndex)%>
,
<%#String.Format("\"#detail0\"",Container.DataItemIndex) %>)'>
<asp:Image ID="imgCollapsible" 
           CssClass="first" 
           ImageUrl="plus.png" 
           Style="margin-right: 5px;"
           runat="server" />

<span class="searchheader"><%#Eval("Business")%></span>
</div>

这是它为 master 和 detail div 生成的 html：

//master div
<div class="searchgroup"   
     id='master0'                                                     
     onclick='showhide("#master0","#detail0")'>

<img id="ctl00_ContentPanel_gvMaster_ctl02_imgCollapsible" 
     class="first" src="plus.png" 
     style="border-width:0px;margin-right: 5px;" />
     <span class="searchheader">ABC</span>
</div>

//details div
<div id='detail0' class="searchdetail">
<div>
<table class="searchgrid"
       id="ctl00_ContentPanel_gvMaster_ctl02_gvDtails">
<tr>
<th>Status</th>
<tr class="searchrow">
<td>2</td>
</tr>
</table>
</div>
</div>

我无法让 JQuery 工作，而且我的时间不多了，所以现在我决定使用 ajax 控制工具包中的可折叠面板 externder。当我有时间时，我将调查 JQuery 问题，感谢您迄今为止的所有建议。如果有人有更多，请告诉我。

【问题讨论】：

@Xaisoft 尝试调试一下，查看生成的 html 源代码并确保它进入 showhide。在使用实际代码时，有些事情可以更快地识别出来。我的想法完全正确 - 查看呈现的 html，如果您仍然卡住，请编辑您的帖子以包含 html 的相关部分。 【参考方案1】：

您的 javascript 在 src.endsWith("plus.png") 处抛出错误，因为 js 中没有内置的 endsWith 函数。将其替换为 src.substr(-8) == "plus.png" 即可：

<script type="text/javascript">
      //master: id of div element that contains the information about master data
      //details: id of div element wrapping the details grid
      function showhide(master, detail) 
          //First child of master div is the image
          var src = $(master).children()[0].src;
          //Switch image from (+) to (-) or vice versa.
          if (src.substr(-8) == "plus.png")
              src = src.replace('plus.png', 'minus.png');
          else
              src = src.replace('minus.png', 'plus.png');

          //Set new image
          $(master).children()[0].src = src;

          //Toggle expand/collapse                   
          $(detail).slideToggle("normal");
      
</script>

编辑 - 工作示例：

MasterPage.master

<%@ Master Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
          //master: id of div element that contains the information about master data
          //details: id of div element wrapping the details grid
          function showhide(master, detail) 
              //First child of master div is the image
              var src = $(master).children()[0].src;
              //Switch image from (+) to (-) or vice versa.
              if (src.substr(-8) == "plus.png")
                  src = src.replace('plus.png', 'minus.png');
              else
                  src = src.replace('minus.png', 'plus.png');

              //Set new image
              $(master).children()[0].src = src;

              //Toggle expand/collapse                   
              $(detail).slideToggle("normal");
          
    </script>

    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Default2.aspx

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="searchgroup" id='master0' onclick='showhide("#master0","#detail0")'>

    <img id="ctl00_ContentPanel_gvMaster_ctl02_imgCollapsible" class="first" src="plus.png" style="border-width:0px;margin-right: 5px;" />
     <span class="searchheader">ABC</span>
    </div>

    <div id='detail0' class="searchdetail">
        <div>
            <table class="searchgrid"
               id="ctl00_ContentPanel_gvMaster_ctl02_gvDtails">
                <tr>
                    <th>Status</th>
                </tr>
                <tr class="searchrow">
                    <td>2</td>
                </tr>
            </table>
        </div>
    </div>
</asp:Content>

【讨论】：

为什么我不使用母版页时没有收到此错误。一旦我将脚本放在母版页的 head 部分，showhide 函数就不会触发，当我在 firebug 中设置断点时，它显示所有内容都未定义 JQuery是否也有可能有endsWidth函数。 @xaisoft，不知道你为什么没有得到它。为我把它扔进 ff3 “src.endsWith 不是一个函数”行：17 我也在使用 firefox，但就像我说的，当我在一个没有与之关联的母版页的页面上测试它时它正在工作，但是当我把它放在一个带有母版，它不起作用。我是否将脚本放在母版页中的正确位置？ @xaisoft，不知道为什么它不适合你。看看我添加的示例是否有效。除了丢失之外我看不出它有任何不应该工作的原因。【参考方案2】：

“看起来当我点击一个项目时它甚至没有调用 showhide。”如果你只用一个 alert() 函数来简化这个函数，它会起作用吗？

代码对我来说看起来不错。也许有一些 id 不匹配。

【讨论】：

如果我把 alert("hello");在 showhide(master,detail) 函数中，它工作正常。那么你的原始声明“看起来当我点击一个项目时它甚至没有调用 showhide。”是不正确的。 Jquery select 语句可能没有选择正确的对象。在继续之前检查选择对象的返回值。如何调试 javascript，我不能设置断点。我在 VS 2008 工作希望这会有所帮助。 weblogs.asp.net/scottgu/archive/2007/07/19/…这是著名的“ScottGu”圣经:-) 在 Visual Studio 中调试 javascript 在我看来是一件痛苦的事情。如果您有带有 firebug 扩展的 firefox，则可以轻松调试 javascript。除非您遇到仅 IE 的错误，否则它绝对是 javascript 调试的最佳方式...【参考方案3】：

您可以在您的页面（使用此母版页的页面）中检查 jquery 的路径是否正确。

为了确定它是否调用 showhide()，您可以在 Firefox 中使用 Firebug，并在函数中设置断点。

此外，它还会为您提供更多调试线索和猜测问题所在。

代码对我来说似乎也可以。

【讨论】：

当我在没有母版页的页面上测试时，该代码有效，但如果我将它放在母版页中则无效。路径是正确的。我可以将脚本直接放在页面本身中，而不是母版中吗？【参考方案4】：

只是一个想法，如果您在浏览器上右键单击查看源代码，您是否正确看到了 jquery 路径？我的经验告诉我您需要解析母版页上的 javascript url（它适用于 css，但不适用于 js 文件）

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

【讨论】：

以上是关于为啥这个脚本不是从母版页运行的？的主要内容，如果未能解决你的问题，请参考以下文章

我可以在一个共享点站点上使用多个母版页吗？

为啥我的嵌套母版页会丢失 CSS 格式？

母版页子母版页页面之间的关系

Google Adword 和 asp.net 母版页

VS2005 使用了母版页技术，可是点运行后母版页的设计内容无法显示，特别是图片就是空白的，该怎么解决呢

母版页