logo标签列表

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

asp.netjquerymaster-pagesfancybox
40

在没有母版页的aspx页面中使用JQuery时，我没有任何问题，但是当我尝试在具有母版页的页面中使用它时，它不起作用，所以我最终将jQuery文件和其他脚本文件放在页面而不是母版中。现在如果我有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插件，我需要在所有5个页面中放置jquery脚本和fancybox脚本，而不仅仅是主页面。那么，在处理主页面时，根据我上面的示例，所有内容应该放在哪里呢？

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>

然后，任何特定于页面的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>

通过LoadScriptsBeforeUI（更好的方式是将其设置为False），ScriptManager允许您控制脚本在页面上呈现的位置。

8
我使用这种方法。
<script type="text/javascript" language="javascript" src='<%=ResolveUrl("~/scripts/jquery.js") %>' ></script>

“只需将它放在标签上方即可……”
<asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
+1 但是当我包含语言属性时，收到了一个警告，说属性无效。 - Mina Gabriel
我更喜欢这个，因为它不需要ScriptManager或额外的组件。 - Circle Hsiao
2

好的，为您的脚本使用不同的contentplaceholder。它应该像这样：

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

</asp:ContentPlaceHolder>

将此标签放置在您的母版页底部，靠近</body>标签。这将允许您在母版页上添加脚本，并且也可以在您的页面上添加脚本。通过查看页面源代码并确保HTML以正确的方式呈现，确保您的脚本按正确顺序加载。祝好运。
哦，还有一件事，请确保jQuery和FancyBox在您可能拥有的任何其他js之前加载，否则它将无法正常工作。Javascript按被调用的顺序加载，jQuery必须首先加载！
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文件。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接