Dynamically setting CSS values using ASP.NET

Question

I'm working on a site where the images and other resources will be located on a separate domain from the main content of the site. We will use something like 'www.example.com' for the main site, and then 'images.example.com' for all extra resources for styles, etc.

When developing the site I will keep all of these resources on local dev. machines. The challenge here is keeping CSS references consistent between the production server and development environments.

What I was thinking of doing was creating a web.config key that would store the URL of the images server. Then, when switching from development to production I could just change the web.config value and everything would be done.

Is there any way to add a value to a CSS file, dynamically or otherwise, from some place in a config or C# class? Or am I going about this the wrong way?

Also, I'm limited to using .NET 2.0 if that makes a difference.

UPDATE
To expand on this a little more, I know I can use a web.config setting for server controls' URLs. Those are already generated dynamically. What I'm more interested in is what options I have for modifying (or doing "something") to static CSS files that will allow me to change URLs for things such as background image resources that would be referenced in CSS. Is there anything I can do besides find/replacing the values using my IDE? Perhaps something that can be done automatically with a deployment script?

Answer 1

You duped your own question:

http://stackoverflow.com/questions/449236/dynamically-setting-css-values-using-asp-net

Answer 2

This is a common problem. What we do is have seperate web.config files for each environment. There is a appSettings key in the web.config and any config values go there like this.

<appSettings>
<add key="ImagePath" value="d:\websites\www.site.com\www\images\" />
<appSettings>

When setting the image control in the code behind, use the following:

myImage.ImageUrl = + _

System.Configuration.ConfigurationSettings.AppSettings("ImagePath") + "image1234567890.jpg"

Just change your ImagePath key to correspond with the path on the production or qa servers. Also, you could make the test server have the same path, but in my experience this solution works.

Answer 3

Is keeping the CSS file on the image server an option? If that it possible, you could make all the image references relative, and then you just need to update the link to the css file.

<link rel="stylesheet" href="<%= ConfigurationManager.AppSettings("css-server") %>style.css" />

If you still want to send or generate a css file dynamically:

css files don't have to end in css. aspx is fine. You could do this:

<link rel="stylesheet" href="style.aspx" />

and then in your style.aspx page:

protected void page_load(){
    Response.ContentType = "text/css";
    if (ConfigurationManager.AppSettings("css-server") == "local") {
        Server.Transfer("css/local.css");
    } else {
        Server.Transfer("css/production.css");
    }   
}

If you still want to dynamically generate a css file, I'd use an HttpHandler, set the contenttype to "text/css", then generate the css with Response.Write. If you insist on having the page end in css, you could always register css to go to asp.net in IIS, then on incoming requests in global.asax application_Begin request, if the file ends in .css, use httpcontext.current.rewritepath to your handler.

This will have a net effect of style.css being dynamically generated at runtime.

Answer 4

I would create a server control for my CSS that registered the css script block on page load. You could very easily change all paths at that point programmatically.

Answer 5

What about putting a place holder on the web page and then selecting which CSS file to utilize (PROD, TEST, etc.) at run time and add it to the place hodler?

I think that Update had the right idea...

<link rel="stylesheet" href="<%= ConfigurationManager.AppSettings("css-server") %>style.css" />

Answer 6

Sounds like a job for a NAnt [link] script to me. They're pretty easy to work with and well documented.

That way your code has isn't changing your css links, they're being updated at deploy time. This isn't a code issue, it's a deployment issue, so addressing it as such feels more "right" to me. That way you know if it loads correctly (with the right images) the first time it will load every time. NAnt scripts are a good thing to have in your toolbox.

The other solutions will work, but that code will be running every time the page loads for a change that should have happened once -- when the app was deployed.

Answer 7

Perhaps you can do something with the hosts file on your dev server(s)? That way you won't have to actually change any code.

It IS possible to send files with the .css extension through the asp.net engine, though. You could also have .ashx handlers that return valid css and reference those handlers in the tags. Seems like kind of a waste of processor for stuff that is 90% static text though.