40

在没有母版页的 aspx 页面中使用 JQuery 时我没有问题，但是当我尝试在有母版页的页面中使用它时，它不起作用，所以我最终将 jquery 文件和其他脚本文件放在页面而不是母版。现在，如果我有 10 页，我对所有 10 页都这样做，我知道这是不正确的。在下面的示例母版页中，我将我的脚本文件放在哪里。

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

我最近使用了fancybox插件，我所做的不是将jquery脚本和fancybox脚本放在母版页中，因为我对让它工作感到沮丧，我只是把它放在我希望脚本运行的页面中，特别是在底部，就在关闭 asp:Content 之前。当然，现在我有一个问题，如果我想在其他页面中使用fancybox插件，我会将jquery脚本和fancybox脚本放在所有5个页面上，而不仅仅是母版页。在处理母版页时，使用我上面的示例，一切都在哪里？

4

4 回答 4

56

您可以像往常一样在母版页中声明主要的 jQuery 脚本：

<head runat="server">
  <link href="/Content/Interlude.css" rel="Stylesheet" type="text/css" />
  <script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>

然后可以在引用 Head ContentPlaceholder 的 Content 控件中加载任何特定于页面的 JS 文件。

但是，更好的选择是查看ScriptManager和ScriptManagerProxy控件——它们可以让您更好地控制 JS 文件提供给客户端的方式。

因此，您将在母版页中放置一个 ScriptManager 控件，并在其中添加对 jQuery 核心代码的引用：

<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
        <asp:ScriptReference Path="/Scripts/jquery-1.3.2.min.js" />
      </Scripts>
    </asp:ScriptManager>

然后，在需要一些自定义 JS 文件或 jQuery 插件的页面中，您可以拥有：

<asp:Content ID="bodyContent" ContentPlaceholderID="body">
  <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
      <Scripts>
        <asp:ScriptReference Path="/Scripts/jquery.fancybox-1.2.1.pack.js" />
      </Scripts>
  </asp:ScriptManagerProxy>

ScriptManager 允许您执行诸如使用LoadScriptsBeforeUI控制页面脚本在何处呈现（或者更好的是，将其设置为 False 之后）之类的操作。

于 2009-04-08T19:44:22.310 回答
8

我使用这种方法。

<script type="text/javascript" language="javascript" src='<%=ResolveUrl("~/scripts/jquery.js") %>' ></script>

只需将其放在您的标签上方...

<asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
于 2010-02-11T01:40:25.623 回答
2

好的，为您的脚本使用不同的内容占位符。它应该看起来像这样

<script type="text/javascript" src="myscript.js" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server">

</asp:ContentPlaceHolder>

将此标签放在母版页底部，靠近</body>标签。这将允许您在母版页以及您的页面上添加脚本。通过查看页面源代码并确保 HTML 以正确的方式呈现，确保您的脚本以正确的顺序加载。祝你好运。

哦还有一件事，确保 jQuery 和 FancyBox 在您可能拥有的任何其他 js 之前加载，否则它将无法工作。Javascript按调用顺序加载，jQuery必须先加载！

于 2009-04-08T19:19:10.793 回答
0

这将在母版页中起作用：

对于脚本文件：

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

对于 CSS 文件：

<link rel="stylesheet" href="~/styles/CssFile.min.css" runat="server" />

补充笔记：

  1. 尽可能使用缩小版本 (FileName.min.js) 和 (FileName.min.css) 以减少加载时间并改善 SEO。
  2. 将 CSS 放在前面</head>，将脚本放在前面，</body>以提高性能并改善 SEO。
  3. 路径中的平铺字符 (~) 将自动解析为您网站的根目录。
  4. 不要忘记runat="server"仅用于样式表。该脚本必须没有，runat="server"因为它已经使用了服务器操作符<%= %>。
  5. 您可以使用在线http://jscompress.com/来压缩您的 javascript 和https://csscompressor.net/来压缩您的 CSS 文件。
于 2015-05-12T01:12:52.617 回答