在 ASP.NET 中使用 MasterPages 时使用 JQuery 的正确方法？答案

【问题标题】：Proper way to use JQuery when using MasterPages in ASP.NET?在 ASP.NET 中使用 MasterPages 时使用 JQuery 的正确方法？
【发布时间】：2010-10-18 09:36:24
【问题描述】：

在没有母版页的 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个页面上，而不仅仅是母版页。在处理母版页时，使用我上面的示例，一切都在哪里？

【问题讨论】：

标签： asp.net jquery master-pages fancybox

【解决方案1】：

您可以像往常一样在母版页中声明主要的 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 的内容控件中加载任何特定于页面的 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 之后）。

【讨论】：

【解决方案2】：

我用这个方法。

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

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

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

【讨论】：

+1 但当包含语言属性无效属性时我收到警告
我更喜欢这个，因为它不需要 ScriptManager 或额外的组件。

【解决方案3】：

可以为您的脚本使用不同的内容占位符。它应该是这样的

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

</asp:ContentPlaceHolder>

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

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

【讨论】：

【解决方案4】：

这将在母版页中起作用：

对于脚本文件：

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

对于 CSS 文件：

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

补充说明：

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

【讨论】：