HTML

Question

我正在使用VS＃，.NET Framework 4.5中的C＃构建ASP.NET Webform应用程序

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

以下是问题：如果页面位于根文件夹，那么一切都正常工作（css + js），如果我在子文件夹中放置任何页面< / strong>然后css工作但是那些JavaScripts完全没有工作，显然参考路径是错误的。

所以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

root中的

：单个MasterPage，Default.aspx，test.aspx，js文件夹，css文件夹和Pages文件夹。默认和测试页面是工作文件，但是Pages文件夹中的所有页面都不显示.js如果页面不在根目录中，那么路径是错误的

在我的母版页中：

<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>

script.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')
$(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({
.....

Web浏览器的开发人员工具（控制台）中的错误：

    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.

Answer 1

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

在测试所有内容时，不要忘记清除缓存或进行隐私浏览！

Answer 2

您可以在head标记，contentplaceholder标记或body标记内包含.js文件。这将在所有情况下反映在包含此母版页的其他页面中。您需要关注的只是创建路径的方式。

下面的代码将jquery文件添加到母版页的head部分的母版页中。

<%@ 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>

相对vs绝对网址

通过在url路径之前使用../和〜/，您将创建一个相对URL。当您更改所引用文件或包含该链接的文件的文件夹级别时，相对URL的路径会受到影响。

../符号从包含链接的文件夹中退出一步。确保你有足够的'../'来引用正确的文件。

〜/ symbol创建一个从项目根开始的路径。

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

有关绝对和相对URL检查之间差异的更多信息 Difference between Relative path and absolute path in javascript

Answer 3

尝试将〜/ 替换为 ../ 。我的一个项目是做同样的事情并修复它。

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

Answer 4

在文件位置之前，您应该使用~前缀。（像这样：~/projects/files/web/admin）

Answer 5

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

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

你如何在Master Page中包含JavaScript？

5 个答案:

HTML

的script.js

MISC