Simple Tip for Accessing Relative Path Items in Javascript in your ASP.NET Website

Dave Arlin — Mon, 03 May 2010 14:54:25 GMT

One common problem I’ve faced when developing applications is when I need to access an Image file or some other artifact that is relative to my website.

I’ve often gotten “lucky” where my virtual directory path locally matches my QA, Staging, Production, etc. So I’m able to have javascript code like this:

$('.ok-button').attr('src', '/Content/Images/btn_ok.jpg');

$('.ok-button').hover(

function() { $(this).attr('src', '/Content/Images/btn_okOver.jpg');
}

, function() { $(this).attr('src', '/Content/Images/btn_ok.jpg');
}

);

Here, I’m assuming that my images will always be stored somehow like this:

http://localhost/Content/Images

http://[test-dns]/Content/Images

http://[prod-dns]/Content/Images

etc…

That above javascript will fail if I am forced to be put into a Virtual Directory such as this:

http://[prod-dns]/[some-virtual-directory]/Content/Images

The most effective way I’ve found to get around this is by creating a hidden field on my main master page that contains the value derived by the web server of the root URL to my website. This root URL might contain no virtual directory or 10 virtual directories depending on the IIS Web Server set up.

I’m using ASP.NET MVC, but this example can easily be ported into a Page_Load event with standard ASP.NET web forms.

<% string virtualPath = HttpRuntime.AppDomainAppVirtualPath;
       virtualPath = virtualPath.EndsWith("/") ? virtualPath : virtualPath + "/";
    %>

<input id = "website-image-path" type = "hidden" value = '<%=virtualPath + "Content/Images/" %>' />

Just place that code somewhere in the body of your master page.

Then access it via JQuery, or standard javascript using something like this:

$('#website-image-path').val();

Then finally you’re javascript might look something like this to get at your actual Image source.

var websiteImagePath = $('#website-image-path').val();

$('.ok-button').attr('src',
websiteImagePath + 'btn_ok.jpg');

$('.ok-button').hover(

function() { $(this).attr('src',
websiteImagePath + 'btn_okOver.jpg'); }

, function() { $(this).attr('src',
websiteImagePath + 'btn_ok.jpg'); }

);

Dave Arlin - Bloggin' - Deployment

Simple Tip for Accessing Relative Path Items in Javascript in your ASP.NET Website