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

在没有masterpage的aspx页面中使用jQuery没有问题,但是当我尝试在有masterpage的页面中使用它时,它不起作用,所以我最终将jquery文件和其他脚本文件放入而不是主人。 现在,如果我有10页,我正在做这10个,我知道是不正确的。 在下面的示例masterpage中,我将在哪里放置我的脚本文件。

<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脚本放在masterpage中,而是因为让它工作而感到沮丧,我只是把它放在希望脚本运行的页面上,特别是在最后,在closuresasp:Content之前。 当然,现在我遇到了问题,如果我想在其他页面中使用fancybox插件,我会把jquery脚本和fancybox脚本放在所有5个页面上,而不仅仅是masterpage。 在处理masterpages时,上面的示例都使用了哪些内容?

您将在主页面内声明主要的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的内容控件中加载。

但是,更好的select是查看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)。

我使用这种方法。

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

只要把它放在你的标签上面…

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

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

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

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

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

这是什么将在一个母版页内工作:

对于脚本文件:

 <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)来减less加载时间并改善SEO。
  2. </head>和脚本放在</body>之前,以提高性能和改善SEO。
  3. path中的瓦片字符(〜)将自动parsing到您网站的根目录。
  4. 不要忘记只使用runat="server"作为样式表。 该脚本不能有runat="server"因为它已经使用服务器操作符<%= %>
  5. 你可以使用在线http://jscompress.com/来压缩你的javascript和https://csscompressor.net/来压缩你的CSS文件。;