在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" />
补充笔记:
- 尽可能使用缩小版本(FileName.min.js)和(FileName.min.css)来减less加载时间并改善SEO。
- 把
</head>
和脚本放在</body>
之前,以提高性能和改善SEO。 - path中的瓦片字符(〜)将自动parsing到您网站的根目录。
- 不要忘记只使用
runat="server"
作为样式表。 该脚本不能有runat="server"
因为它已经使用服务器操作符<%= %>
。 - 你可以使用在线http://jscompress.com/来压缩你的javascript和https://csscompressor.net/来压缩你的CSS文件。;
- 在JavaScript中引用ASP.NET控件的ID?
- 为什么要创build一个ASP.NET 5类库项目?
- 如何用简单的词语和用法来解释Katana和OWIN?
- System.Web.Http.Authorize与System.Web.Mvc.Authorize
- web.config> configuration> runtime> assemblyBinding中生成的条目是什么意思/原因?
- “参数字典包含参数的空条目” – 如何解决?
- 如何在debuggingASP.NET应用程序时在Fiddler中显示本地主机stream量?
- 将`List <string>`转换为逗号分隔的string
- C#中的基础构造函数 – 哪个被首先调用?