ASP.NET MVC - Referencing stylesheets in the master page

Question

I have a master page that is in /Views/Shared. The master page references a stylesheet in the /Content folder.

Everything works fine if I reference the stylesheet using "../../Content/style.css". However, my web application is not in the root folder in our production environment, so the relative path doesn't work.

I have tried "<%=ResolveUrl("~/content/style.css") %>" which does work in the production scenario, but then the designer in Visual Studio complains about my classes being wrong (and I cannot preview the page with CSS in the design tab).

Is there a solution that makes this work in both situations? I accomplished this in WebForms by writing server-side code that reset the link tag. I could do that here, but I would like to avoid it.

Herwin

"my web application is not in the root folder"...A relative path doesn't reference the root folder, so I'm not sure why this would matter. Are you sure your Content folder is in the same relative location on the production server? – Vaas

The relative path is the same in both production and development. The relative path is correct when it is relative to the master page. However, the path is not relative to the page that uses the master page, which is the path the user's browser uses. – Herwin

Answer 1

Try this technique - include your stylesheet both ways. Include one with a fixed path reference that Visual Studio will use for design-time support, but enclose it in server-side comments so it's not actually included during run-time. The second reference is the "real" reference used at run-time, and with Url.Content() it'll work whether your app is a sub directory or not.

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

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

Impend

+1 Interesting technique! I would use T4MVC in order to do this as well. – Supplejack

I like this idea. It's a work-around, but it meets both of the requirements. It would be nice if the ASPX designer would parse server side code when previewing the page. – Herwin

You can also make the static link runat="server" visible="false" which is somewhat simpler. – Luckett

Answer 2

It is best practice to Extend the URL Helper. This allows you to easily call it from your view, and if your structure or files change, you don't need to do a massive find/replace.

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

Citric

so that you can easily refer it in your view, and if any of those change, you don't have to do a find/replace. – Citric

I understand your point, but it doesn't solve the problem of the VS designer not resolving the CSS location. – Herwin

I wouldn't rely on the VS designer (the designer rarely renders like a real browser). You should be viewing the page in an actual browser. – Citric

I agree. But it comes in handy for a reference check. – Herwin

Answer 3

In the Views folder and then going into the Shared folder helps understand how the CSS file is referenced in the MVC.

Transmutation