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

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.

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.

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>