Changing location of CSS file in master page based on compilation configuration.

Question

Visual Studio 2010 has a new feature that is just way cool. You can now add transformation files that will change the web.config file based on the configuration you are compiling. The upshot of which is that you can change the web.config file for your various environments (eg: dev, staging, production, etc).

That's all fine and dandy for the web.config file but what about other pages that may need such tender care. Our master page, for example, points to different locations for it's CSS file in different environments (Yes, I know, it wasn't my idea and I can't change it). Is there a cool and/or elegant way to make the change?

I have tried to using

  <appSettings>
    <add key="pathPrefix" value="/OAFA/"  xdt:Transform="Replace" xdt:Locator="Match(key)"/>
   </appSettings>

and then add the following in the master page. PathPrefix is a simple property that justs queries the value in the web config.

    <script src="<%= PathPrefix %>scripts/jquery-1.3.2.js" type="text/javascript"></script>

This works great for the scripts but sucks rocks for this....

    <link rel="Stylesheet" href="<%= PathPrefix %>css/main.css" />

In this case it just encodes the "<%=" and "%>" which is far less than ideal. Any thoughts?

Answer 1

Add an ID and a runat="server" attribute to your link, like this:

<link id="StylesheetLink" runat="server"
      rel="stylesheet" href="stylesheet1.css" type="text/css" />

And then you can change the stylesheet's source programmatically in your codebehind like this:

StylesheetLink.Attributes["href"] = "stylesheet2.css";