Using site root relative links in Razor

I have a website that is working fine with Razor (C#) all the coding is working properly when I use my local testing (WebMatrix IIS).

When I put it “online” on my server the website is not at the root of the site it self

For example:

http:// intranet.mycompany.com/inform

That’s basically the “root” of my folder structure so all my folders starts from there (css file default.cshtml… and so on)

My “_PageStart.cshtml” sees it properly cause 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 show 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 shows that the link is broken… when I Right-Click the img holder and do 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 relative root…

How can i fix that ?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

EDIT

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" rel="nofollow noreferrer noopener">Linktext</a>

EDIT 2

Ok, no MVC – so 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" rel="nofollow noreferrer noopener">Link</a>
<a href="../linkOnParentLevel.cshtml" rel="nofollow noreferrer noopener">Link</a>
<a href="subFolder/linkOnOneLevelDown.cshtml" rel="nofollow noreferrer noopener">Link</a>

EDIT 3

When using Layout pages you can use the Hrefextension method to generate a relative url:

<link href="@Href(" rel="nofollow noreferrer noopener"~/style.css")" ...

Method 2

Use Url.Content as shown bellow:

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

Method 3

I know that ‘~‘ is added by default, but I tend to change it so that all paths are relative to my code file rather than application root, using “..” eg. "../images/logos" etc

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0