Site-Root-Relative References - ASP.NET

Overview

Site-root-relative links are supposed to be code with an initial backslash. For example, the following line is supposed to reference the Default.css file in the root of the web application.

<link href="/Default.css rel="stylesheet" type="text/css" />

However, I have found this doesn't work (1) when running a website in development mode within Visual Studio, (2) when your web application isn't the root of the server, and (3) I assume there are other scenarios where this syntax breaks. This article presents a more consistent way to reference the root folder of your website.

Sample Implementation

The Helper.ApplicationRootUrl procedure can be found here.

With SCRIPT References

<script language="javascript" 
    src="<%=Helper.ApplicationRootUrl %>Scripts/jquery.js"></script>

Within External JavaScript Files

Step 1 - Define a Global Variable

Within the Master Page, include the following code.

<script language="javascript">
var appRootUrl = "<%=Helper.ApplicationRootUrl %>"
. . .
</script>

Step 2 - Reference the Global Variable

In your external JavaScript file, you can now reference the global variable you created, as in the following example. Obviously, for this to work, all ASPX pages that reference this external JavaScript file have to reference the above Master Page.

var html = "<img src='" + appRootUrl + "Images/Loading.gif' />"

With Stylesheet (CSS) References

The following code can be be used in place of the <link href="MyCss.css" rel="stylesheet" type="text/css" /> line.

<script language="javascript">
var appRootUrl = "<%=Helper.ApplicationRootUrl %>";
var fileref = document.createElement("link");
fileref.setAttribute("rel","stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", appRootUrl + "Default.css");
document.getElementsByTagName("head")[0].appendChild(fileref);

$(document).ready(
    function()
    {
        . . .
    }    
);
</script>

Within XSL Stylesheets

The following XSL code, when used with this technique, demonstrates how to implement site-root-relative references in an XSL stylesheet.

<xsl:element name="a">
    <xsl:attribute name="href">
        {appRootUrl}OrderMaint.aspx?id=<xsl:value-of select="@OrderId" />
    </xsl:attribute>
    Edit Order# <xsl:value-of select="@OrderId" />
</xsl:element>