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 tilde is still there when the HTML is output.

So, for example, I have this path in /Views/Shared/_Layout.cshtml:

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

And the HTML delivered looks like this:

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

I'm pretty sure I have this running as an MVC 4 project, too. The following stuff's in the web.config:

<compilation debug="true" targetFramework="4.0">
  <assemblies>
    <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <add assembly="System.Web.Helpers, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <add assembly="System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <add assembly="System.Web.WebPages, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
  </assemblies>
</compilation>

...and at this point, I'm not sure what to look for next. Any suggestions?

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 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 3

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 4

My guess is that you are still running Razor 1 (MvcWebRazorHostFactory is < 4.0).

Verify the web.config in your Views folder looks like this...

 <configSections>
    <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
      <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    </sectionGroup>
  </configSections>

  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>

Answer 5

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 6

What solved this for me was turning off Meleze.web HTML Minification.