I gave a presentation to another team at Microsoft yesterday on ASP.NET MVC and the Razor view engine and someone asked if there was a reference for the Razor syntax.
It turns out, there is a pretty good guide about Razor available, but it’s focused on covering the basics of web programming using Razor and inline pages and not just the Razor syntax.
So I thought it might be handy to write up a a really concise quick reference about the Razor syntax.
Syntax/Sample | Razor | Web Forms Equivalent (or remarks) |
---|---|---|
Code Block |
@{ int x = 123; string y = "because."; } |
<% int x = 123; string y = "because."; %> |
Expression (Html Encoded) |
<span>@model.Message</span> |
<span><%: model.Message %></span> |
Expression (Unencoded) |
<span> @Html.Raw(model.Message) </span> |
<span><%= model.Message %></span> |
Combining Text and markup |
@foreach(var item in items) { <span>@item.Prop</span> } |
<% foreach(var item in items) { %> <span><%: item.Prop %></span> <% } %> |
Mixing code and Plain text |
@if (foo) { <text>Plain Text</text> } |
<% if (foo) { %> Plain Text <% } %> |
Mixing code and plain text (alternate) |
@if (foo) { @:Plain Text is @bar } |
Same as above |
Email Addresses |
Hi philha@example.com |
Razor recognizes basic email format and is smart enough not to treat the @ as a code delimiter |
Explicit Expression |
<span>ISBN@(isbnNumber)</span> |
In this case, we need to be explicit about the expression by using parentheses. |
Escaping the @ sign |
<span>In Razor, you use the @@foo to display the value of foo</span> |
@@ renders a single @ in the response. |
Server side Comment |
@* This is a server side multiline comment *@ |
<%-- This is a server side multiline comment --%> |
Calling generic method |
@(MyClass.MyMethod<AType>()) |
Use parentheses to be explicit about what the expression is. |
Creating a Razor Delegate |
@{ Func<dynamic, object> b = @<strong>@item</strong>; } @b("Bold this") |
Generates a Func<T, HelperResult> that you can call from within Razor. See this blog post for more details. |
Mixing expressions and text |
Hello @title. @name. |
Hello <%: title %>. <%: name %>. |
NEW IN RAZOR v2.0/ASP.NET MVC 4 | ||
Conditional attributes |
<div class="@className"></div> |
When
<div></div>When className = ""
<div class=""></div>When className = "my-class"
<div class="my-class"></div> |
Conditional attributes with other literal values |
<div class="@className foo bar"> </div> |
When
<div class="foo bar"></div>Notice the leading space in front of foo is removed. When className = "my-class"
<div class="my-class foo bar"> </div> |
Conditional data-* attributes. data-* attributes are always rendered. |
<div data-x="@xpos"></div> |
When
<div data-x=""></div>When xpos = "42"
<div data-x="42"></div> |
Boolean attributes |
<input type="checkbox" checked="@isChecked" /> |
When isChecked = true
<input type="checkbox" checked="checked" /> When isChecked = false
<input type="checkbox" /> |
URL Resolution with tilde |
<script src="~/myscript.js"> |
When the app is at /
<script src="/myscript.js">When running in a virtual application named MyApp
<script src="/MyApp/myscript.js"> |
Notice in the “mixing expressions and text” example that Razor is smart enough to know that the ending period is a literal text punctuation and not meant to indicate that it’s trying to call a method or property of the expression.
Let me know if there are other examples you think should be placed in this guide. I hope you find this helpful.