Base URL in ASP.net Master Pages with virtual Directories

Question

I have an ASP.net master page. In this master, I have all my css and javascript files defined. I also have a few images and a few buttons and hyperlinks.

All the urls are all declared as relative ie "/scripts/ian.js"

Everything works fine if this site is the root website, but I need it to work in a virtual directory.

My problem is when I place this website in a virtual directory under a root site, all my links are pointing to the root site. so my links point to www.root.com/scripts/ian.js but it should be pointing to www.root.com/virtualDir/scripts/ian.js

I thought the Base Href tag in the header would help, but so far it does not seem to be helping in anyway. All the links are still pointing to the root website when i hover over them.

What I would like is a single setting either in IIS or the config file that I can set a root url and any image, script or link either on the master page or content page, would point to the right place.

Any suggestions or ideas are welcome.

Thanks

Castorina

Answer 1

All the urls are all declared as relative ie "/scripts/ian.js"

Those seem to be absolute URL's that you're using, rather than relative URL's, which is probably why the <base /> tag isn't having the desired effect:

This attribute specifies an absolute URI that acts as the base URI for resolving relative URIs.

-- from http://www.w3.org/TR/html401/struct/links.html#h-12.4

You could try removing the leading '/' from your URL's to see if that works?

Failing that, I tend to use ResolveClientUrl to get around issues like this, which you'd use in the same way as others have suggested using ResolveUrl:

<script type="text/javascript" src="<%= ResolveClientUrl("~/path/to/js") %>"></script>
...
<img src="<%= ResolveClientUrl("~/path/to/img") %>" alt="..." />

Hope this helps.

Officiant

Answer 2

Most tags, including regular HTML tags like <link>, <img>, etc can use the ~/ as the application root path if the *'runat="server"' attribute is set.

eg.

<img src="~/images/test.png" runat="server" />

This makes tag a server tag and the tilde is replaced with the application root before the output is returned to the browser.

This doesn't work as expected for the <script> though. When 'runat="server' is set for the script tag, then the script is considered to be server-side javascript and execution is attempted.

To work around this you can either inject the javascript using one of the register client script methods. your you can use the <%= ResolveUrl('~')%> tag in your script tag.

Apotheosis

Is there no global setting i can set so I don't have to go and update all the links, images, scripts etc? PS. Thx – Castorina

Not that I know of. I try to always use "~" relative paths or folder relative paths eg. "../something". This allows moving the application around in the future. A good find/replace regex should be able to catch most if not all your offending links. – Apotheosis

While you can use "~" with runat=server for CSS file references, doing so for JavaScript files will most likely cause errors, because it will force JavaScript execution code on the server side. – Dew

Answer 3

This static method returns you full http path to root folder of your application (web site or virtual directory)

public static string GetAppRootUrl(bool endSlash)
{
    string host = HttpContext.Current.Request.Url.GetLeftPart(UriPartial.Authority);

    string appRootUrl = HttpContext.Current.Request.ApplicationPath;
    if (!appRootUrl.EndsWith("/")) //a virtual
    {
        appRootUrl += "/";
    }
    if (!endSlash)
    {
        appRootUrl = appRootUrl.Substring(0, appRootUrl.Length - 1);
    }
    return host + appRootUrl;
}

So, you can write in master page:

<script src="<%= Server.HtmlEncode(GetAppRootUrl(false)) %>/scripts/ian.js" language="javascript" type="text/javascript"></script>

Amaral

Answer 4

Use tilde(~) in yout reference (i.e ~/scrips/ian.js)...see if it works For links try Page.ResolveUrl in the .aspx page.

Pickaback

No, tilde does not work for scripts. You will get an error when server tries to execute the script. – Dew

Answer 5

So I found this IIS weirdness last night:

<script src="/js/file.js"></script>

Will not work properly in a virtual application that's in a subdirectory of the main IIS site.

Instead, you MUST do it like this:

<script src="/js/file.js" type="text/javascript"></script>

Which is the standard way to do it, but if you're not looking for it, it can surprise you that that additional tag makes the relative path issues go away.

Polynesia