ASP.NET MVC - 在主页中引用样式表

Question

我有一个位于 /Views/Shared 目录下的主页面。该主页面引用了 /Content 文件夹中的样式表。

如果我使用 "../../Content/style.css" 引用样式表，一切都工作正常。但是，在我们的生产环境中，我的Web应用程序不在根文件夹中，因此相对路径无法使用。

我尝试过使用 "<%=ResolveUrl("~/content/style.css") %>"，它在生产环境中可以工作，但是 Visual Studio 中的设计师会抱怨我的类名错误（我无法在设计选项卡中预览带有 CSS 的页面）。

有没有一种解决方案可以在两种情况下都能够工作？在 WebForms 中，我通过编写服务器端代码来重置链接标记来实现这一点。我也可以在这里这样做，但我想避免这样做。

- Mike Therien

---

我的Web应用程序不在根文件夹中。相对路径不引用根文件夹，所以我不确定为什么这很重要。您确定您的Content文件夹在生产服务器上与相同的相对位置吗？ - Robert Harvey

相对路径在生产和开发中是相同的。当它相对于主页面时，相对路径是正确的。但是，该路径与使用主页面的页面不相关，这是用户浏览器使用的路径。 - Mike Therien

Answer 1

尝试使用这种技术-包含您的样式表两种方式。其中一种是使用固定路径引用，以便Visual Studio在设计时支持，但是将其置于服务器端注释中，以便在运行时实际上不会被包含。 第二个引用是在运行时使用的“真实”引用，并且使用Url.Content()函数可以在您的应用程序是子目录还是其他情况下正常工作。

<% /* %> 
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" /> 
<% */ %>

<link href="<%=Url.Content("~/Content/Site.css") %>" rel="stylesheet" 
      type="text/css" />

- Kurt Schindler

---

+1 有趣的技巧！我也会使用T4MVC来实现这个。 - Dan Atkinson

我喜欢这个想法。虽然是一个变通方法，但它满足了两个要求。如果ASPX设计师在预览页面时解析服务器端代码，那就太好了。 - Mike Therien

你也可以将静态链接runat="server"的visible属性设置为"false"，这样会更加简单。 - Ian Mercer

Answer 2

最佳实践是扩展URL助手。这样可以轻松地从视图中调用它，如果您的结构或文件更改，您不需要进行大量的查找/替换。

public static string Image(this UrlHelper helper, string fileName)  
{  
    return helper.Content("~/Content/Images/" + fileName));  
}  

public static string Stylesheet(this UrlHelper helper, string fileName)  
{  
    return helper.Content("~/Content/Stylesheets/" + fileName);  
}  

public static string Script(this UrlHelper helper, string fileName)  
{  
    return helper.Content("~/Content/Scripts/" + fileName);  
}

   <link href="<%= UrlHelper.Stylesheet("Main.css")%>" rel="stylesheet" 
         type="text/css" />  

- Martin

---

这样你可以在视图中轻松引用它们，如果其中任何一个更改了，你就不必进行查找/替换。 - Martin

我理解你的观点，但这并不能解决VS设计器无法解析CSS位置的问题。 - Mike Therien

我不会依赖于VS设计师（设计师很少像真正的浏览器一样呈现）。你应该在实际的浏览器中查看页面。 - Martin

我同意。但它对于参考检查很有用。 - Mike Therien

Answer 3

在Views文件夹中，然后进入Shared文件夹可以帮助理解CSS文件在MVC中的引用方式。

- june1992