Razor Syntax

Razor is a syntax that you can use to create webpages in ASP.NET. The syntax makes it possible to create templates that generate well structured and clean HTML output.

Razor is easy to learn and there is a great reference here if you are planning on Using WebMatrix .

For those developing in ASP.NET MVC then this  Scott Hanselmanns blog is a good introduction to razor, you might also want to check out this video

Over on Phil Haacks blog he produced this handy razor reference chart, which I have duplicated below:

  <td valign="top" width="313">
    <pre class="csharpcode"><span class="asp"><%</span>

int x = 123; string y = "because."; %>

<tr>
  <td valign="top" width="305">Expression (Html Encoded)</td>

  <td valign="top" width="10">
    <pre class="csharpcode"><span class="kwrd"><</span><span class="html">span</span><span class="kwrd">></span><span class="asp">@</span><span class="rzr">model.Message</span><span class="kwrd"></</span><span class="html">span</span><span class="kwrd">></span></pre>
  </td>

  <td valign="top" width="313">
    <pre class="csharpcode"><span class="kwrd"><</span><span class="html">span</span><span class="kwrd">></span><span class="asp"><%</span>: model.Message <span class="asp">%></span><span class="kwrd"></</span><span class="html">span</span><span class="kwrd">></span></pre>
  </td>
</tr>

<tr>
  <td valign="top" width="305">Expression (Unencoded)</td>

  <td valign="top" width="10">
    <pre class="csharpcode"><span class="kwrd"><</span><span class="html">span</span><span class="kwrd">>  

@Html.Raw(model.Message)
</span>

  <td valign="top" width="313">
    <pre class="csharpcode"><span class="kwrd"><</span><span class="html">span</span><span class="kwrd">></span><span class="asp"><%</span>= model.Message <span class="asp">%></span><span class="kwrd"></</span><span class="html">span</span><span class="kwrd">></span></pre>
  </td>
</tr>

<tr>
  <td valign="top" width="305">Combining Text and markup</td>

  <td valign="top" width="10">
    <pre class="csharpcode"><span class="asp">@</span><span class="rzr"><span class="kwrd">foreach</span>(var item <span class="kwrd">in</span> items) {</span>

<span>@item.Prop</span> }

  <td valign="top" width="313">
    <pre class="csharpcode"><span class="asp"><%</span> <span class="kwrd">foreach</span>(var item <span class="kwrd">in</span> items) { <span class="asp">%></span>

<span><%: item.Prop %></span> <% } %>

<tr>
  <td valign="top" width="305">Mixing code and Plain text</td>

  <td valign="top" width="10">
    <pre class="csharpcode"><span class="asp">@</span><span class="rzr"><span class="kwrd">if</span> (foo) {</span>

<text>Plain Text</text> }

  <td valign="top" width="313">
    <pre class="csharpcode"><span class="asp"><%</span> <span class="kwrd">if</span> (foo) { <span class="asp">%></span> 

Plain Text <% } %>

<tr>
  <td valign="top" width="305">Mixing code and plain text (alternate)</td>

  <td valign="top" width="10">
    <pre class="csharpcode"><span class="asp">@</span><span class="rzr"><span class="kwrd">if</span> (foo) {</span>

@:Plain Text is @bar }

  <td valign="top" width="313">Same as above</td>
</tr>

<tr>
  <td valign="top" width="305">Email Addresses</td>

  <td valign="top" width="10">
    <pre class="csharpcode">Hi philha@example.com</pre>
  </td>

  <td valign="top" width="313">Razor recognizes basic email format and is smart enough not to treat the @ as a code delimiter</td>
</tr>

<tr>
  <td valign="top" width="305">Explicit Expression</td>

  <td valign="top" width="10">
    <pre class="csharpcode"><span class="kwrd"><</span><span class="html">span</span><span class="kwrd">></span>ISBN<span class="asp">@(</span><span class="rzr">isbnNumber</span><span class="asp">)</span><span class="kwrd"></</span><span class="html">span</span><span class="kwrd">></span></pre>
  </td>

  <td valign="top" width="313">In this case, we need to be explicit about the expression by using parentheses.</td>
</tr>

<tr>
  <td valign="top" width="305">Escaping the @ sign</td>

  <td valign="top" width="10">
    <pre class="csharpcode"><span class="kwrd"><</span><span class="html">span</span><span class="kwrd">></span>In Razor, you use the 

@@foo to display the value of foo</span>

  <td valign="top" width="313">@@ renders a single @ in the response.</td>
</tr>

<tr>
  <td valign="top" width="305">Server side Comment</td>

  <td valign="top" width="10">
    <pre class="csharpcode"><span class="asp">@*</span>

This is a server side multiline comment *@

  <td valign="top" width="313">
    <pre class="csharpcode"><span class="asp"><%</span><span class="rem">--

This is a server side multiline comment --%>

<tr>
  <td valign="top" width="305">Mixing expressions and text</td>

  <td valign="top" width="10">
    <pre class="csharpcode">Hello <span class="asp">@</span>title. <span class="asp">@</span>name.</pre>
  </td>

  <td valign="top" width="313">
    <pre class="csharpcode">Hello <span class="asp"><%</span>: title <span class="asp">%></span>. <span class="asp"><%</span>: name <span class="asp">%></span>.</pre>
  </td>
</tr>
Syntax/Sample Razor Web Forms Equivalent (or remarks)
Code Block
@{ 
  int x = 123; 
  string y = "because.";
}

Published by thebeebs

Martin works for Microsoft as a Software Developer. He’s been a developer since the late 90s and loves figuring out problems and experimenting with code.