Question

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

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

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

但是，更好的选择是查看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）之类的操作。

Answer 2

我使用这种方法。

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

只需将其放在标签上方即可...

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

Answer 3

可以为您的脚本使用不同的contentplaceholder。看起来应该是这样的

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

</asp:ContentPlaceHolder>

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

哦，还有一件事，确保jQuery然后FancyBox在任何其他js之前加载，否则它将无效。 Javascript按照调用的顺序加载，jQuery必须先加载！

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

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

4 个答案: