Jasinski Technical Wiki

Navigation

Home Page
Index
All Pages

Quick Search
»
Advanced Search »

Contributor Links

Create a new Page
Administration
File Management
Login/Logout
Your Profile

Other Wiki Sections

Software

PoweredBy

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

Compare Page Revisions



« 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

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>

ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2024, Patrick Jasinski.