Have you ever tried to deploy an application to a virtual directory in IIS? For example lets say you have your primary website running at http://www.graphicnetdesign.com and you decide it would be nice to have a sub-domain where you can host all of your utility and experimental applications so you create http://dev.graphicnetdesign.com. It is under this sub-domain where you have created virtual directories in IIS to host each of those applications. So you set up a virtual directory for a little application you are playing around with which checks the heart beat of all your websites and web applications and you name it ippoke and your new application’s URL looks like http://dev.graphicnetdesign.com/ippoke.
All excited you quickly FTP your new application to that virtual directory for a little smoke testing. But, sadly, the application which was developing so nicely on your development machine looks like crap. It appears as though your CSS is not loading and if it is it looks like all of the Images embedded in that CSS file are not loading. The Horror! You quickly double check all of your references to the CSS file, you check all of the image URLs within the CSS file and everything looks perfect and it all runs perfectly on your dev machine. What is going on?
After hours of frustration and Google searches you find an article which states that under IIS when using virtual directories to host ASP.net applications IIS does not use the virtual directory as the root of your newly deployed application, instead it uses the root of the main site or http://dev.graphicnetdesign.com. What does that all mean, it means that even though the path to your logo.png file in your ippoke application is ‘/images/logo.png’ and that works on your dev machine and is relative to the root of your application on that machine once deployed to the virtual directory the path required to get that image is has to now be relative to the root of the site under which you created the virtual directory in which your ippoke application is running. In other words the relative path of ‘/images/logo.png’ is no longer a correct path to that image because it is now relative to the root site and resolves to http://dev.graphicnetdesign.com/images/logo.png. In order to make your CSS and images work correctly in the virtual directory you have to change all of your references to resolve from the root so the path needs to be ‘/ippoke/images/logo.png’ instead of ‘/images/logo.png’.
What a pain! So now you have to come up with some way to support the differences between your local dev environment where the site is being developed as a root website in visual studio and what it will eventually be deployed as. In Visual Studio you can actually change the virtual path in the properties of the web application project and there are several other ways you can try to resolve the issue by using separate CSS files for each environment, or by editing the CSS file just before deployment but all of these issues just make more work and make maintenance of the site horrifying. They also do not make the application portable without a lot of editing, for example if I decided to move the application to be its own root site or if I want to change it to a different virtual directory or deploy the site to a completely different server.
The only way I have found to combat the virtual directory CSS and Image bug when it comes to ASP.net applications was to simply create my own custom ASP.net Server Control which is smart enough to know when the application has been deployed as a root site or as a virtual site and armed with that knowledge it creates a copy of the CSS file and updates all image references with the correct virtual directory path so the CSS and Images can be resolved by IIS. This control checks to see if a virtual CSS file exists already and if not it will create one and write it to disk on the first call to the application. If the file already exists it will check to see if the original CSS file has been recently updated and if so the control will create a new version of the virtual CSS in order to capture the changes. Once it has taken care of building the virtual CSS file it then writes out a new tag for the virtual CSS file to the page and that is that. No more missing images, no more missing CSS files and it just works when deployed as either a root site or within a virtual directory.
The code for this control is below, feel free to use it.
Version:0.9 StartHTML:0000000105 EndHTML:0000024318 StartFragment:0000000105 EndFragment:0000024318