在 ASP.NET 中使用 MasterPages 时使用 JQuery 的正确方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/731407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Proper way to use JQuery when using MasterPages in ASP.NET?
提问by Xaisoft
I have no issues when doing using JQuery in a aspx page without a masterpage, but when I try to use it in pages that have a masterpage, it doesn't work, so I end up putting the jquery files and other script files in the page instead of the master. Now if I have 10 pages, I am doing this for all 10, which I know is incorrect. In the sample masterpage below, where would I put my script files.
在没有母版的 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>
I recently used the fancybox plugin and what I did was instead of putting the jquery script and fancybox scripts in the masterpage because I got frustrated on getting it to work, I just put it in the page where I wanted the script to run, specifically at the bottom, right before the closing asp:Content. Of course, now I have the issue of, if I wanted to use the fancybox plugin in other pages, I would put the jquery script and fancybox script on all 5 pages instead of just the masterpage. When dealing with masterpages, where does everything go using my example above?
我最近使用了fancybox插件，我所做的不是将jquery脚本和fancybox脚本放在母版页中，因为我对让它工作感到沮丧，我只是将它放在我希望脚本运行的页面中，特别是在底部，就在关闭的 asp:Content 之前。当然，现在我有一个问题，如果我想在其他页面中使用fancybox插件，我会将jquery脚本和fancybox脚本放在所有5个页面上，而不仅仅是母版。在处理母版时，使用我上面的例子，一切都去哪里了？
回答by Zhaph - Ben Duguid
You would declare your main jQuery scripts within the master page, as you would normally:
您可以像往常一样在母版页中声明您的主要 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>
And then any page specific JS files could be loaded within the Content controls that reference the Head ContentPlaceholder.
然后可以在引用 Head ContentPlaceholder 的 Content 控件中加载任何特定于页面的 JS 文件。
However, a better option would be to look into the ScriptManagerand ScriptManagerProxycontrols - these can provide you with a lot more control over the way your JS files are served to the client.
但是，更好的选择是查看ScriptManager和ScriptManagerProxy控件 - 这些可以为您提供对向客户端提供 JS 文件的方式的更多控制。
So you would place a ScriptManager control in you master page, and add a reference to the jQuery core code in that:
因此，您将在母版页中放置一个 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>
Then, in your page that requires some custom JS files, or a jQuery plugin, you can have:
然后，在需要一些自定义 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>
The ScriptManager allows you to do things like control where on the page scripts are rendered with LoadScriptsBeforeUI(or better yet, after by setting it to False).
ScriptManager 允许你做一些事情，比如控制页面脚本在LoadScriptsBeforeUI上的呈现位置（或者更好的是，通过将其设置为 False）。
回答by Kieran
I use this method.
我用这个方法。
<script type="text/javascript" language="javascript" src='<%=ResolveUrl("~/scripts/jquery.js") %>' ></script>
Just place it above your tag...
只需将它放在您的标签上方...
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
回答by Al Katawazi
Alright use a different contentplaceholder for your script. It should look like this
好吧，为您的脚本使用不同的内容占位符。它应该是这样的
<script type="text/javascript" src="myscript.js" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server">
</asp:ContentPlaceHolder>
Place this tag at the bottom of your masterpage, close to the </body>tag. This will allow you add scripts on the masterpage and also on your pages as well. Make sure that your scripts are loading in the right order by viewing the page source and ensuring the HTML rendered in the right way. Good luck.
将此标签放在母版页的底部，靠近</body>标签。这将允许您在母版页以及您的页面上添加脚本。通过查看页面源代码并确保以正确的方式呈现 HTML，确保您的脚本以正确的顺序加载。祝你好运。
Oh one more thing, make sure jQuery and then FancyBox load up before any other js you may have out there or else it won't work. Javascript loads in the order it was called, jQuery must load first!
哦，还有一件事，请确保 jQuery 和 FancyBox 在您可能拥有的任何其他 js 之前加载，否则它将无法工作。Javascript 按照调用顺序加载，jQuery 必须先加载！
回答by Shadi Namrouti
This is what will work inside a Master page:
这是在母版页中起作用的内容：
For Script file:
对于脚本文件：
<script type="text/javascript" src="<%= ResolveUrl("~/script/scriptFile.min.js") %>"></script>
For CSS file:
对于 CSS 文件：
<link rel="stylesheet" href="~/styles/CssFile.min.css" runat="server" />
Additional Notes:
补充说明：
- Use the minified versions as could as possible (FileName.min.js) and (FileName.min.css) to reduce loading time and improve SEO.
- Put the CSS before the
</head>and the script before the</body>to enhance performance and improve SEO. - The tile character (~) in the path will resolve automatically to the root of your website.
- Do not forget to use
runat="server"for the stylesheet only. The script must not haverunat="server"because it already uses server operators<%= %>. - You can use the online http://jscompress.com/to compress your javascript and https://csscompressor.net/to compress your CSS files.
- 尽可能使用缩小版本 (FileName.min.js) 和 (FileName.min.css) 以减少加载时间并提高 SEO。
- 将 CSS 放在 之前
</head>，将脚本放在之前，</body>以提高性能并改进 SEO。 - 路径中的磁贴字符 (~) 将自动解析为您网站的根目录。
- 不要忘记
runat="server"仅用于样式表。该脚本不能有，runat="server"因为它已经使用了服务器操作符<%= %>。 - 您可以使用在线http://jscompress.com/来压缩您的 javascript 和https://csscompressor.net/来压缩您的 CSS 文件。
