Question

I have an ASP.NET Razor website that is working properly when I test locally (via WebMatrix IIS).

When I put it "online" on my server, the website is not at the root of the site itself. For example:

http://intranet.mycompany.com/inform

That’s basically the "root" of my folder structure, so all my folders starts from there (CSS files, default.cshtml… and so on)

My "_PageStart.cshtml" sees it properly, because when I access my site from the link http://intranet.mycompany.com/inform, it gives me the Layout I have configured in _PageStart.cshtml (and it really shows the layout + the rendered default.cshtml).

BUT nothing else is getting the proper path, for example:

<img src="~/images/logos/hdr.png" />

The img holder is there I can see it, but it shows that the link is broken. When I right-click the img holder and select properties to see where the files should be, it shows me:

http://intranet.mycompany.com/images/logos/hdr.png

So it’s going to the "full" root, not the site relative root, which would be:

http://intranet.mycompany.com/inform/images/logos/hdr.png

How can I fix that?

Answer 1

You have to use relative paths all over your app:

~ won’t work within static HTML code.

You can write

<img src="@Url.Content("~/images/logos/hdr.png")" />

or

<img src="../images/logos/hdr.png" />

The first approach is good for layout files where your relative path might be changing when you have different length routing URLs.

Regarding to your question about normal links, when linking to another page in your app you don’t specify the view file as the target but the action which renders a view as the result. For that you use the HtmlHelper ActionLink:

@Html.ActionLink("Linktext", "YourController", "YourAction")

That generates the right URL for you automatically:

<a href="YourController/YourAction">Linktext</a>

If you are not using MVC, you have to generate your links yourself. You have to use relative paths, too. Don’t start any link with the / character!

<a href="linkOnSameLevel.cshtml">Link</a>
<a href="../linkOnParentLevel.cshtml">Link</a>
<a href="subFolder/linkOnOneLevelDown.cshtml">Link</a>

When using Layout pages you can use the Href extension method to generate a relative URL:

<link href="@Href("~/style.css")" ...