April 6, 2009

Using Relative URLs in CSS with ASP.NET

Filed under: Development — Tags: , — Darrin Maidlow @ 6:42 pm

When we started redoing the I decided that this new site would be all CSS based.  No more nasty tables.   Once the initial xhtml/css template was made I moved it into and ASP.NET master page.  As the site was fleshed out I ran into a problem where some of the images were not loading as the master page was used deeper within the sites structure.   A little inspection of the underlying CSS and I noticed this:

   1: #header {width:100%; height:50px;    background: #7D7D7D url(images/header.gif) left top no-repeat;}

 

When the master page is used from a page deeper than the site root, the paths in the CSS become invalid.  To work around this I made my CSS dynamic!  I added a new page to my project in the CSS folder.  I called this page allcss.aspx.css.   Open up this new aspx file and remove all the html.  Leave only the page header definition:

   1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="all.css.aspx.cs" Inherits="landorIS.com.css.allcss" ContentType="text/css" %>

image

Note that you may need to update your classnames and stuff depending on how you name the file.  I wanted my file name to reflect the fact that it was a CSS file – but it’s still needed to end with .aspx to ensure the file would be properly parsed by the ASP.NET engine without having to mess with the extension mapping on the web server.  This resulted in Visual Studio making some illegal class names.

Also be sure that you add the ContentType attribute to the @Page definition, and set it to “text/css”, or you will get an error in some browsers stating that the Mime Type “text/html” is not “text/css”.  Nice of Firefox to do a little validation on the content.

At this point you can add your CSS to the file and use <%%> tags or codebehind to manipulate the values.  Now the CSS that was causing problems with the images looks like this:

   1: background:url('<%=ResolveUrl("~/img/header-bg.png")%>') no-repeat 0 0;

 

Now when the CSS is requested by the browser and rendered out, the URL to the image file will be properly displayed as /RootFoolder/img/header-bg.png.  This is a very simple modification, but one could go a little more crazy and do something like  detect browser make/model and send out browser specific css in pre-defined literals, or possibly add authentication checks. 

 

 

Technorati Tags: ,

September 3, 2008

System.Runtime.InteropServices.ComException Loading ASP.NET Web Application in Visual Studio 2008

Filed under: General — Tags: , — Darrin Maidlow @ 11:04 pm

Another day, another fun error message.  Thanks to all the fun I’ve been having with – I’ve given up and created a new virtual machine with XP Pro to run Visual Studio in.   So I grab the latest revision from source control and load the solution in Visual Studio.  Boom.  Sytem.Runtime.InteropServices.ComException.  That’s it. No more details.  This is one of those errors where it could be just about anything.  A gives way too many results.

So I’m going to add one more search result on this error message.  After much muckery – I’ve resolved my instance of the problem.  The background is simple.  I have an ASP.NET web application with a few DLL projects and a deployment project.  As stated, I’ve created a new install of Windows XP.  First ensure that you have the add-on installed.  That can also cause this error (in some cases).

The key thing in this case was the lack of IIS on the machine.  On my primary development machine (the one where Oracle is a massive pain) I do have IIS installed, and the last time I ran this project from that machine – Oracle was working OK with the data access hack.  But apparently something has changed on that box and now I’m getting the evil "Oracle client and networking components were not found." error.  So I gave up.

First obvious work around is to install IIS.  I’m sick of messing around today, and just want to work.  So the quicker solution is to enable the built in development web server.  This can be accomplished by right clicking the unloaded project in the Visual Studio solution explorer and choosing "Edit <projectname.whateverlanguateyouuseproj>".  This will bring up the XML view of the project.  Find the ProjectExtensions section of the config and change UseIIS to be False.  Setting this up could also prevent problems when you have a larger, or more dynamic team accessing the project.

   1: <ProjectExtensions>
   2:     <VisualStudio>
   3:       <FlavorProperties GUID="{349c5851-65df-11da-9384-00065b846f21}">
   4:         <WebProjectProperties>
   5:           <UseIIS>False</UseIIS>
   6:           <AutoAssignPort>False</AutoAssignPort>
   7:           <DevelopmentServerPort>4088</DevelopmentServerPort>
   8:           <DevelopmentServerVPath>/webrade</DevelopmentServerVPath>
   9:           <IISUrl>http://localhost/WebRADE32</IISUrl>
  10:           <NTLMAuthentication>False</NTLMAuthentication>
  11:           <UseCustomServer>False</UseCustomServer>
  12:           <CustomServerUrl>
  13:           </CustomServerUrl>
  14:           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
  15:         </WebProjectProperties>
  16:       </FlavorProperties>
  17:     </VisualStudio>
  18:   </ProjectExtensions>

 

Reload the project, and it should load now.

P.S. Oracle, please please please release something for Vista x64 and ODAC/ODP.  Even an alpha.  I promise I will test on an x86 machine before I release..

Technorati Tags: ,

Powered by WordPress

Switch to our mobile site