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

在没有masterpage的aspx页面中使用JQuery时没有问题，但是当我尝试在具有masterpage的页面中使用它时，它不起作用，所以我最终将jquery文件和其他脚本文件在页面而不是主人。现在，如果我有10页，我就这么做了10个，我知道这是不正确的。在下面的示例masterpage中，我会在哪里放置我的脚本文件。在ASP.NET中使用MasterPages时使用JQuery的正确方法？

<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脚本，而不仅仅是masterpage。在处理masterpages时，上面的示例使用了哪些内容？

来源

2009-04-08 Xaisoft

你会在母版页中声明你的主要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文件可能引用该头的ContentPlaceHolder的内容控件中加载。

但是，更好的选择是查看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-08 19:44:22

好的，为脚本使用不同的contentplaceholder。它应该看起来像这样

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

</asp:ContentPlaceHolder>

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

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

来源

2009-04-08 19:19:10

JavaScript加载HTML标记之前？ – Xaisoft 2009-04-08 19:40:26

我使用这种方法。

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

只要将它放在标签上方...

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

来源

2010-02-11 01:40:25 Kieran

+1，但是当包含语言属性时表示包含无效属性 – 2014-07-04 19:13:33

这是将母版页里面工作：

对于脚本文件：

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

对于CSS文件：

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

其他不ES：

使用缩小的版本，如能尽可能（FileName.min.js）和（FileName.min.css），以减少加载时间，提高搜索引擎优化。
将CSS放在</head>之前，并且在</body>到之前的脚本可以提高性能并改善SEO。
路径中的瓦字符（〜）将自动解析为您网站的根目录。
不要忘记只使用样式表runat="server"。该脚本不能有runat="server"，因为它已经使用服务器运营商<%= %>。
你可以使用在线http://jscompress.com/压缩你的javascript和https://csscompressor.net/压缩你的CSS文件。

来源

2015-05-12 01:12:52

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

回答

相关问题