Page History: Site-Root-Relative References - ASP.NET

Compare Page Revisions

1 0 Current 1 0

« Older Revision - Back to Page History - Current Revision

Page Revision: Mon, Jan 15, 2018, 10:47 AM

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¶

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>