Transforms for CSS and Views in MVC - css

Question

I have an MVC application which I am deploying out to a staging server using Team City. I have created a Web.Staging.config transform to handle the different database connection, certificates and service calls.
On this staging server I have had a request to have the title of the Index view to read "TEST SYSTEM" and to have a different colour scheme to signify, at a glance that the user is on the test system.
So far I have handled this by changing the view on the file system in notepad, and swapping the bootstrap.css file to one with a different theme however every time I do a new commit/deploy these changes are wiped and its becoming tiresome.
Is there anyway to handle CSS/view changes per server by using a similar transform system as employed to handle the web.config

Answer 1

There's not really an easy way to transform CSS files like that, but what you could do is have your master CSS file link in your config file, so your view would be something like:
<link href='#ConfigurationManager.AppSettings["MainCSS"]'>
Then your web.Debug (and other transformations) could point to the correct path:
<add key="MainCSS" value="/Content/Site.css" />
And your web.Staging config could point to another:
<add key="MainCSS" value="/Content/Staging/Site.css" />
You can also apply the above logic for your Index view:
public ActionResult Index()
{
string viewName = ConfigurationManager.AppSettings["MainView"];
return View(viewName);
}
Then have in your web.Debug (and others):
<add key="MainView" value="Index" />
And in your web.Staging:
<add key="MainView" value="IndexStaging" />

Answer 2

One solution could be to add a key to the web.config and read it using the WebConfigurationManager.AppSettings. Those settings can be transformed. In your view you can check this setting if you need to change the title and if you need to load an additional css file.
In your web.config:
<appSettings>
<add key="IsTestSystem" value="False" />
</appSettings>
and in as transform:
<appSettings>
<add key="IsTestSystem" value="True" xdt:Locator="Match(key)" xdt:Transform="SetAttributes"/>
</appSettings>
In your view / layout:
if (Boolean.TryParse(WebConfigurationManager.AppSettings["IsTestSystem"] ?? "False", out run)) {
// include css file for test system or modify the title
}
And, if you want, you can just switch between the two bootstrap.css files.