Tilde Slash Paths Not Working in MVC 4

Question

As I understand it, a plain ol\' \"~/foo\" path is supposed to work like @Url.Content(\"~/\") in MVC 4. However, I\'m trying to do this and getting many broken paths -- the

Answer 1

I had this problem when I cut and paste some example code into a view. Turned out I had the wrong type of tilde!

@{
Layout = "∼/Views/_BasicLayout.cshtml";
}

vs

@{
Layout = "~/Views/_BasicLayout.cshtml";
}

Subtly different - sod to find

Answer 2

For me the problem was only related to SVG image types. Solved it by adding the following to the project's web.config file (not the web.config used by the views, MVC4).

<configuration>
   <system.webServer>
      <staticContent>
         <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      </staticContent>
   </system.webServer>
</configuration>

Answer 3

For MVC 5 and Razor 3, the problem for me turned out to be an extra quote character in an html element that came before (long before!) the img tag:

<div class="foo""> <!-- note the extra quote character here ugh -->
...
</div>
...
<img src="~/images/an-image.png" />

The above problem caused razor to ignore the tilde (~), giving it to the browser as-is / not transformed. Took me forever to find the problem, which I eventually found by moving the img tag to the top of the file and discovering it worked fine there, and then doing a divide-and-conquer approach to narrow down the spot in the *.cshtml file where it stopped working.

I hope this post saves someone some time!

Answer 4

Reinstalling MVC 4 (RC) using the standalone installer here solved this problem for me. I still don't understand what caused the problem, but I can live with that.

Answer 5

The issue is about href= and not which < tag >
Examples:

< img src="@Url.Content("Images/someImage.jpg")"/>
< a href="@Url.Content("Home/About")" >click here< /a>

Its ok to nest @ inside other @section {}

Answer 6

This could be as a result of a bug in Razor V2, where an apostrophe / single quote in an HTML comment breaks resolution of ~ paths.

The workaround is to use Razor comments instead of HTML comments. I.e., replace <!-- Here's your comment--> with @* Here's your comment *@.

Sorry this is a long shot, as I've no idea if you have HTML comments, let alone ones containing single quotes.