在子文件夹内的默认页面中加载 CSS 和 JS答案

【问题标题】：Loading CSS and JS in default page inside subfolder在子文件夹内的默认页面中加载 CSS 和 JS
【发布时间】：2012-03-15 23:15:38
【问题描述】：

我有一个托管在 Windows 专用服务器中的 ASP.NET Web 应用程序。在我的应用程序中有很多文件夹。为了简化我的问题，假设我有这种情况：

文件夹
- default.aspx
- CSS
- js

我想将 default.aspx 设置为我的默认页面，也就是说，当用户键入 domain.com 时，会显示 default.aspx。

为了做到这一点，我编辑了我的 web.config 文件并且它工作正常。问题是样式和javascripts。

我的 default.aspx 包含这个：

<script type="text/javascript" src="js/xxxx.js"></script>
<link href="css/styles.css" rel="stylesheet" type="text/css" />

所以没有找到样式和javascript。

我真的不想删除该文件夹并将所有内容都放在根目录中，并且仅移动 default.aspx 页面并不是一个真正的选择，因为我有一个 MasterPage。

【问题讨论】：

标签： asp.net web-config

【解决方案1】：

使用resolveUrl或根路径来解析js和css的位置

    <script src='<%= this.ResolveUrl("~/js/xxxx.js") %>' type="text/javascript"></script>
    <link href="~/css/styles.css" rel="stylesheet" type="text/css" />

【讨论】：

@DoNetUser ResolveURL 似乎在样式表中不起作用。 html 显示：。根相对路径有效，唯一的问题是在本地工作时，它不起作用，因为路径还包含 Web 应用程序的名称。
如果可能的话，你能否从后面的代码中为它做一个 ResolveUrl？检查你是否在元素中使用 runat="server"。这个链接很有用stackoverflow.com/questions/2588740/…
Page.ResolveUrl("~//css/styles.css");返回“/DTSOnline/css/styles.css”，在本地工作时正确。我检查了元素包含 runat="server" 属性

【解决方案2】：

如果您想要链接到项目，您可以使用网站根目录中的路径。只需在路径前放置一个斜线.. 像这样：

 <link rel="stylesheet" href="/css/webedit.css" type="text/css" />

【讨论】：

根相对路径在服务器上工作正常，问题是在本地工作时，因为路径还包含 Web 应用程序的名称。

【解决方案3】：

您可以使用Page.ResolveUrl 方法来获取正确的路径：

<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/xxxx.js") %>'></script>
<link href='<%= Page.ResolveUrl("~/css/styles.css")' rel="stylesheet" type="text/css" />

欲了解更多信息，请参阅Specifying Paths for Resources。

编辑：评论中提到这不适用于样式表。这是部分正确的。它不适用于服务器端，但适用于客户端元素。

您的<link> 元素似乎位于服务器端<head> 标记内，这意味着ASP.NET treats <link> inside <head> as a server-side controls even if you didn't specify runat="server" attribute there。所以在这种情况下你不需要使用服务器端构造：

<link href="~/css/styles.css" rel="stylesheet" type="text/css" />

【讨论】：

Page.ResolveURL 似乎在样式表中不起作用。 html 显示如下：

【解决方案4】：

对于 ASP.NET WebForms 和 MVC 项目，我强烈建议转移到 Client Dependency framework 并让它处理您的页面依赖项。

对于您的两个依赖项，您只需将这些声明添加到页面：

<CD:CssInclude ID="CssIncludeStyles" runat="server" FilePath="~/css/styles.css" />
<CD:JsInclude ID="JsIncludeXXXX" runat="server" FilePath="~/js/xxx.js" />

这已经更干净了，然后在每个部门上调用this.ResolveUrl。宣言。

您还可以通过在依赖框架中引入映射路径来促进依赖声明（有关操作方法，请参阅documentation）。

开始使用客户端依赖项的最简单方法是通过 NuGet 将其添加到您的 ASP.NET 网站项目中。

它确保您不会在一个页面上出现重复的依赖项，并让您可以控制依赖项的排序方式。

【讨论】：