Top ASP 101 Stories VBScript Classes: Part 1 of N Migrating to ASP.NET Getting Scripts to Run on a Schedule QUICK TIP: What's the difference between objRS("name") and objRS.Fields("name")? Show All Tips >>  ASP 101 Updates

Quick Tips

I've always been an advocate for the use of relative paths when building web applications. The web is such a fluid environment that, at any time, you might need to move or rename a branch of your application or maybe even the entire application. It's times like these that you'll be kicking yourself for hard coding all those links to your application's supporting files and images.

Over the years, I've been involved with a number of application moves and site renames and every time I'm amazed at the number of links that get broken. While broken links aren't usually very hard to find and repair, the thing that always gets to me is how much time it actually takes and how much better that time could have been spent. So here are a few tips to help you keep applications from breaking when you move them.

Let's look at an example. Compare the two lines below:

<a href="http://www.sitename.com/"><img src="http://www.sitename.com/images/sitelogo.gif" /></a>

<a href="/"><img src="images/sitelogo.gif" /></a>

Assuming our site is hosted at http://www.sitename.com/, both of the above lines result in the same thing being displayed. The main difference is that the first way, we are stuck at that domain and in the current folder. The second method not only allows us to change the name of our site easily, it also allows us to move this page into a subfolder or new application easily without breaking anything (assuming we take the images subfolder with us). The kicker of it all is that it's actually less text to type to begin with!

It's also helpful to keep files grouped together. As I mentioned above, if we move a page to a new location, we'll also need to move the files it depends on. Doing this is much easier if they're grouped together. So for those logos and images that are used throughout your site, go ahead and put them in /images right off the root. On the other hand, for images that are only used in the /products folder, you might consider placing them in /products/images so that they are easily associated with the web pages that use them.

To encourage relative path use, ASP.NET 2.0 even includes a new feature called application-relative URLs for use with server controls which take paths as attributes. This lets you start the path with the ~ character and the server will resolve it back to the root of the application. This can make development simpler in situations where you build a web site as an application and then deploy it to the root of a site. Here's a quick example to show you what it looks like. Assuming we have an <asp:Image> control on our page named imgSiteLogo, we can set it's ImageUrl property to an application-relative URL like this:

imgSiteLogo.ImageUrl = "~/images/sitelogo.gif"

For more information about paths and how they relate to building web applications, you might want to read Where Do All These Paths Lead?. It's relatively old, but is still a good introduction to paths and explains those pesky . and .. things you've probably seen in some of our sample code.

If you have a tip you would like to submit, please send it to: webmaster@asp101.com.