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.

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

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