如何在MasterPage中包含JavaScript？

Question

如何在MasterPage中包含JavaScript？

12

我正在使用C#和VS 2012中的.NET框架4.5构建一个ASP.NET Webform应用程序。

我在应用程序的根目录中有一个MasterPage，在名为js的文件夹中有JavaScript文件。

问题在于：如果页面在根文件夹中，那么一切都正常工作（css + js），但如果我将任何页面放在子文件夹中，则css可以正常工作，但那些JavaScript根本不起作用，显然引用路径是错误的。

因此，Css的引用路径没有问题，但对于脚本来说，无论我使用什么方法（如js / script.js或〜/ js / script.js或/ js / script.js或../ ResolveUrl，ResolClientveUrl ... 或在这个http://yobriefca.se/blog/2010/10/19/%3C-head-%3Eache-including-javascript-in-asp-dot-net-master-pages/中提到的所有方法），它们都会引用root / SUB-FOLDER / js / script.js而不是root / js / script.js。

在我的MasterPage中：

<head runat="server">
<title></title>

<link rel="stylesheet" href="~/css/style.css" />

<%-- tried these and lot more but NOT workkkkkkkkkkk --%>

<%--<script src="~/js/jquery-1.7.1.min.js" ></script>
<script src="~/js/script.js" ></script>--%>

<%--<script src='<%=ResolveUrl("~/js/jquery-1.7.1.min.js") %>' ></script>
<script src='<%=ResolveUrl("~/js/script.js") %>' type="text/javascript"></script>--%>

<%--<script src='<%=ResolveClientUrl("~/js/jquery-1.7.1.min.js") %>' type="text/javascript"></script>
<script src='<%=ResolveClientUrl("~/js/script.js") %>' type="text/javascript"></script>--%>

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

....
    $.include('js/superfish.js')
$.include('js/FF-cash.js')
$.include('js/tms-0.4.x.js')
$.include('js/uCarausel.js')
$.include('js/jquery.easing.1.3.js')
$.include('js/jquery.tools.min.js')
$.include('js/jquery.jqtransform.js')
$.include('js/jquery.quicksand.js')
$.include('js/jquery.snippet.min.js')
$.include('js/jquery-ui-1.8.17.custom.min.js')
$.include('js/jquery.cycle.all.min.js')
$.include('js/jquery.cookie.js')
$(function(){
    if($('.tweet').length)$.include('js/jquery.tweet.js');
    if($('.lightbox-image').length)$.include('js/jquery.prettyPhoto.js');
    if($('#contact-form').length||$('#contact-form2').length)$.include('js/forms.js');
    if($('.kwicks').length)$.include('js/kwicks-1.5.1.pack.js');
    if($('#counter').length)$.include('js/jquery.countdown.js');
    if($('.fixedtip').length||$('.clicktip').length||$('.normaltip').length)$.include('js/jquery.atooltip.pack.js')
// Slider
    $('.main-slider')._TMS({
.....

网页浏览器的开发工具（控制台）中出现错误：

    Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/tms-0.4.x.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/uCarausel.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.jqtransform.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.quicksand.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.snippet.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/FF-cash.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/superfish.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.tools.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery-ui-1.8.17.custom.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cycle.all.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.easing.1.3.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cookie.js
Uncaught TypeError: Object [object Object] has no method '_TMS' script.js:22
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

- Ronaldinho Learn Coding

你应该删除 ~/。因为脚本不是 ASP.NET 控件，它会按原样添加到最终的 HTML 中，浏览器无法识别 ~/。 - Givi

@Givi 没有起作用，我尝试了所有方法 /js、../js、~/js 或 js，然后在 ResolveUrl 和 ResolClientveUrl 中都是一样的。 - Ronaldinho Learn Coding

移除服务器端注释标记。<%-- --%> - Givi

@Givi已删除<%-- --%>，并且包含在根文件夹中的所有页面都无法工作。 - Ronaldinho Learn Coding

你能展示一下你的服务器结构吗？并且可以扩展主页面的结构吗？ - Givi

显示剩余2条评论

5个回答

4

你可以将.js文件包含在标签、标签或标签内。这将反映在包含此母版页的其他页面中。您需要关注的是路径创建的方式。

下面的代码将一个jquery文件添加到母版页的头部。

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<title></title>

<script src="jquery-2.1.1.min.js"></script>

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

<form id="form1" runat="server">
<div>
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">


    </asp:ContentPlaceHolder>
</div>
</form>
<script>

</script>

相对URL和绝对URL

在url路径前使用 "../" 和 "~/ "，可以创建一个相对URL。相对URL的路径会受到你引用的文件或包含链接的文件所在的文件夹层级变化的影响。

“../”符号使路径上移一级，确保使用足够的 "../" 引用正确的文件。

“~/”符号创建从项目根目录开始的路径。

要创建绝对URL，只需将你想要包含在页面中的文件从Visual Studio的解决方案资源管理器中拖动到页面中即可。

了解更多有关绝对和相对URL的差异，请参阅JavaScript中相对路径和绝对路径的区别。

- Bee Dev

2

尝试用../替换~/。我的一个项目也遇到了同样的问题，这个方法解决了它。

此外，请确保即使在服务器上（而不仅仅是在项目中），JS文件夹也直接位于根目录下。

- Johnny Bones

0

如果您希望js在每个页面上加载，包括相对路径，则将其添加到modernizr条目下方即可：

<asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
    <%: Scripts.Render("~/Scripts/jquery.min.js") %>
    <%: Scripts.Render("~/Scripts/my.js") %>
</asp:PlaceHolder>

- smoore4

0

在文件位置前应使用~前缀。（例如：~/projects/files/web/admin）

- Osman Villi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Code Maverick · Accepted Answer

HTML

通常情况下，您不希望在<head />中放置任何脚本，除非是像Modernizr这样具有特征检测功能的脚本。将所有脚本移动到页面底部更符合最佳实践：

<html>
<head runat="server">
    <title></title>
    <link rel="stylesheet" href='<%= ResolveUrl("~/css/style.css") %>' />
    <asp:ContentPlaceHolder ID="Head" runat="server" />
</head>
<body>

    <!-- Scripts at bottom of page for faster loading. -->

    <script src='<%= ResolveUrl("~/js/jquery-1.7.1.min.js") %>'></script>
    <script src='<%= ResolveUrl("~/js/script.js") %>'></script>

</body>
</html>

SCRIPT.JS

在 script.js 中引用其他脚本文件需要将 / 添加到 'js/' 后面，像这样：

$.include('/js/superfish.js');
$.include('/js/FF-cash.js');
$.include('/js/tms-0.4.x.js');
$.include('/js/uCarausel.js');
$.include('/js/jquery.easing.1.3.js');
$.include('/js/jquery.tools.min.js');
$.include('/js/jquery.jqtransform.js');
$.include('/js/jquery.quicksand.js');
$.include('/js/jquery.snippet.min.js');
$.include('/js/jquery-ui-1.8.17.custom.min.js');
$.include('/js/jquery.cycle.all.min.js');
$.include('/js/jquery.cookie.js');

if($('.tweet').length)
    $.include('/js/jquery.tweet.js');

if($('.lightbox-image').length)
    $.include('/js/jquery.prettyPhoto.js');

if($('#contact-form').length || $('#contact-form2').length)
    $.include('/js/forms.js');

if($('.kwicks').length)
    $.include('/js/kwicks-1.5.1.pack.js');

if($('#counter').length)
    $.include('/js/jquery.countdown.js');

if($('.fixedtip').length || $('.clicktip').length || $('.normaltip').length)
    $.include('/js/jquery.atooltip.pack.js');

// Slider
$('.main-slider')._TMS({

MISC

在测试所有这些内容时，请不要忘记清除缓存或使用私密浏览模式！