Dynamically setting CSS values using ASP.NET

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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(" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"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" rel="nofollow noreferrer noopener" />

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.

Method 2

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(" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"css-server") %>style.css" />

Method 3

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.

Method 4

You duped your own question:

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

Method 5

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:websiteswww.site.comwwwimages" />
<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.

Method 6

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.

Method 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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x