ASP.NET MVC 4 - The New Tilde Slash Feature in Razor 2

ASP.NET MVC 4 - The New Tilde Slash Feature in Razor 2

Razor 2 in ASP.NET MVC 4 has a very subtle enhancement that allows you to dump the old Url.Content("~/...") or @Href("~/...") when specifying relative paths in your Razor Pages and just use "~/". This doesn't seem like much, but it really eliminates a lot of noise in your Razor Views. It also probably cuts down on errors for those in the habit of typing "~/" in their paths anyway forgetting to use Url.Content or something similar.

Razor 2 and "~/" in ASP.NET MVC 4

To check out this new Razor 2 Feature just create a new ASP.NET MVC 4 Internet Application in Visual Studio and take a peek at the _Layout.cshtml file. Inside the head of the layout view you will find a reference to the favicon file using the Tilde Slash Feature.

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

Notice the lack of @Url.Content or @Href that helps convert the virtual path of the favicon file to the application's absolute path. Now you can just type in the "~/..." in the reference and Razor will convert it for you. Looking at the source of the view in your browser shows that indeed this relative path was converted to an absolute path by Razor 2:

<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />

Simple and clean without all the noise!


If you are interested in other features of ASP.NET MVC 4, please check out my ASP.NET MVC 4 Tutorials.