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 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 
<% } %>
Using block 
@using (Html.BeginForm()) {
  <input type="text" value="input here">
}
 
<% using (Html.BeginForm()) { %>
  <input type="text" value="input here">
<% } %>
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 className = null 
<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 className = null 
<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 xpos = null or "" 
<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">
</script>
 When the app is at / 
<script src="/myscript.js">
</script>
When running in a virtual application named MyApp 
<script src="/MyApp/myscript.js">
</script>

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.

UPDATE 12/30/2012: I’ve added a few new examples to the table of new additions to Razor v2/ASP.NET MVC 4 syntax. Razor got a lot better in that release!

Also, if you want to know more, consider buying the Programming ASP.NET MVC 4 book. Full disclosure, I’m one of the authors, but the other three authors are way better.