ASP.NET 无法加载 CSS 和 Javascript 文件
Posted
技术标签:
【中文标题】ASP.NET 无法加载 CSS 和 Javascript 文件【英文标题】：ASP.NET Fails to Load CSS and Javascript Files 【发布时间】：2015-08-08 16:09:27 【问题描述】：我在使用 ASP.NET 时遇到了一个非常特殊的问题。 我有一个小网站。我编写了一个简单的 MasterPage，该页面用于该站点的大多数页面。
我想包含 Bootstrap 和 jQuery 的 CSS 和 javascript 文件。当我在我的母版页中链接指向远程位置的 URI（见下文）时，一切正常：
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
出于几个原因，我希望这些 JS 和 CSS 文件在本地可用，因此我将相关文件下载到服务器。但是当我尝试在母版页中包含这些本地文件时，它们无法加载。
我试过了：
使用绝对路径（即~/res/css/...）
使用<%= ResolveUrl("...") %>
使用<ScriptManager> - 效果相同
尝试在内容页面中以相同方式将这些文件包含在head contentPlaceHolder 中时，效果是一样的。
非工作代码示例：
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="~/App_LocalResources/css/bootstrap.min.css"/>
<script src="~/App_LocalResources/js/jquery.min.js"></script>
<script src="~/App_LocalResources/js/bootstrap.min.js"></script>
</asp:ContentPlaceHolder>
无论我是否使用ContentPlaceHolder，结果都是一样的。
如果你能帮助我解决这个问题，我会非常棒 - 提前感谢。
【问题讨论】：
如果你想在本地使用，你不应该使用 CDN。您可以下载文件并将其放在脚本文件夹中。 当然。我发现我的问题不是 100% 清楚 - 我将所有相关文件分别下载到~/res/css/ 和 ~/res/js/。
您检查过浏览器检查器中出现的错误吗？我敢打赌，如果您检查了 URL 被解析的内容以及它们不正确的原因，您就会发现自己的错误。
您在浏览器中看到这些文件的 404 吗？
感谢更新和非常详细的自我回答。
【参考方案1】：
在阅读了一些非常有用的 cmets 后，我能够快速检测并解决此问题失败的原因 - 所以向发布它们的用户表示敬意。
问题是由404s 引起的（当试图访问js 和css 文件时）。 404s 发生的原因是：
~（home）字符，但它以某种方式被转换为相对于页面的路径。
在 Firefox/Firebug 控制台中看到的 404 示例（确保“日志记录”已打开：
我能够通过使用ResolveUrl 解决此问题。
例子：
<script src="<%= ResolveUrl("~/App_LocalResources/js/bootstrap.min.js") %>"></script>
解决第一个问题后，404s 仍然存在。
我尝试直接通过浏览器访问文件，但出现IIS 404.8 错误 - 这意味着服务器阻止了对App_LocalResources 文件夹的访问。这是 IIS 服务器对某些预定义文件夹名称（包括App_LocalResources、bin、App_Data 等）的默认行为。
所以，我将css 和js 文件移动到名为res 的文件夹中，这样就成功了。
最终，母版页中的<head> 部分如下所示：
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="<%= ResolveUrl("~/res/css/bootstrap.min.css") %>" />
<script src="<%= ResolveUrl("~/res/js/jquery.min.js") %>"></script>
<script src="<%= ResolveUrl("~/res/js/bootstrap.min.js") %>"></script>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
【讨论】：
以上是关于ASP.NET 无法加载 CSS 和 Javascript 文件的主要内容，如果未能解决你的问题，请参考以下文章
asp.net core mvc razor page css未在特定路由上加载