razor-syntax.md

Razor Syntax

Finally the university exams are over and there is time to delve deep into Umbraco CMS which I have been wanting to explore for quite some time now. Umbraco relies on Razor templating engine for rendering so today let's explore Razor syntax.

Code block

@{ 
  int x = 123; 
  string y = "because.";
}

Expression

// HTML encoded
<span>@model.Message</span>

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

Combining text and markup

@foreach(var item in items) {
  <span>@item.Prop</span> 
}

Mixing code and plain text

@if (foo) {
  <text>Plain Text</text> 
}

// alternative Syntax
@if (foo) {
  @:Plain Text is @bar
}

Using block

@ using (Html.BeginForm()) {
  <input type="text" value="input here">
}

Server-side comment

@*
This is a server side 
multiline comment 
*@

Full page example

@* Variables declaration *@
@{
    var theMonth = DateTime.Now.Month;
    var theYear = DateTime.Now.Year;
    <p>1. We are in the year theYear - theMonth</p>
}
<p>2. We are in the year @theYear - @theMonth</p>


@* If/else statements *@
@if (theYear == 2015)
{
    <p>Yay</p>
}
else if (theYear == 2016)
{
    <p>Lalala</p>
}
else
{
    <p>Hooray</p>
}
    
@* For/while/foreach loops *@
@for(var i = 0; i < 21; i++)
{
    <p>Line #: @i</p>
}
       
<ul>
    @foreach (var i in Request.ServerVariables)
    {
        <li>@i</li>
    }
</ul>

@{
    @: Plaintext example
    var count = 0;
    while(count < 50)
    {
        <p>Count #@count</p>
        count++;
    }
}

@* Raw HTML *@
@{ var someHtml = "<br><p>This is a <strong>html</strong> snippet</p>"; }
@someHtml
@Html.Raw(someHtml)

Resources

• Umbraco.tv Razor syntax course
• C# Razor Syntax Quick Reference by Phil Haack