If you develop your ASP.NET sites like I do, your work involves jumping through some hoops to make sure that your site's CSS referenced images are always visible.
The problem stems from ASP.NET's handy '~' prefix to a URL. The presence of the '~' tells the .NET interpreter that the file can be found by starting at the beginning of the Application's URI. Unfortunately, that feature is not available when serving up .CSS files. There are multiple ways to handle the problem, but mine generally involves creating a virtual directory in IIS that mirrors the final Application's configuration to serve up my local or test versions of the site.
I have a co-worker who likes to load up a project and hit the 'Play' button to test and debug. When he does that, he doesn't always get the CSS for the site (usually because the project name is different from the presumed final name and location for the Application). So, I finally took the time to search for a more elegant solution to the problem yesterday.
The solution came from a user at The Code Project, and I had the simple part working in a matter of minutes. The problem came when I began to work on the submitter's suggested 'Better solution.' The better solution utilizes a HTTPHandler in ASP.NET to parse all .CSS files and replace a temporary string with the desired Background-Color HEX Code or, in my case, the proper path for a image's URI.
I failed to notice and make a few adjustments to the Handler that I created in the first steps, and so I'm blogging this lesson now to help to establish a more technical direction for this blog.
The important thing to notice in the final bit of code, is that now the file is no longer a .ASHX (HTTPHandler file extension) but is instead a .CS (or .VB in my case) file that should be in the APP_CODE directory of your Application.
If you do put the Class file in your APP_CODE directory, then the following bit of code for you Web.Config file needs to be modified:
The last 'CustomeHandler' in the ADD node can be eliminated (if you are using the APP_CODE), or it should be the name of the reference file (.DLL) that contains the Class. Also, if you are using a Namespace in your class, your Namespace should replace the 'CustomHandler' at the beginning of the ADD node's type attribute.<httpHandlers>
<add verb="*" path="*.css" type="CustomHandler.CSSHandler, CustomHandler"/>
</httpHandlers>
Another thing worth mentioning is that you will also have to modify IIS to get the .NET interpreter to parse your .CSS files. I added the following comment to my Web.Config to help anyone else setting up a site:
- Go to the IIS Manager, right click on the Default Web Site (or Web Site or Virtual Directory if you don't want to modify all of them.)
- Select the 'Home Page' tab, the click the 'Configuration' button (somewhere near the bottom middle of the screen).
- Under the 'Mappings' tab (the default tab), find a existing setting that uses the ASP.NET executible.
- Edit the selected setting, but just copy the path in the Executible textbox.
- Click the 'Add' button to create a new setting. Use '.CSS' as the file extension, paste the path to the ASP.NET 2.0 Executible, set the Verbs to 'All' (you could probably only use the 'GET' verb, but I'm just being safe) then uncheck the 'Verify that file exists' and click 'OK'
You should now be ready to use your Web Application from any server or URL and you will always get the images from your CSS files!
0 comments ↓
There are no comments yet...Kick things off by filling out the form below.
You must log in to post a comment.