Razor Syntax

Shows how to perform common logical tasks in Razor like if/else, foreach loops, switch statements and using the @ character to separate code and markup.

The @ symbol

The @ symbol is used in Razor to initiate code, and tell the compiler where to start interpreting code, instead of returning the content of the file as text. Using a single character for this separation, results in cleaner, compact code which is easier to read.

@* Writing a value inside a html element *@

<p>@Model.Name</p>

@* Inside an attribute *@
<a href="@Model.Url">@Model.Name</a>

@* Using it to start logical structures *@
@if (somethingIsTrue)
{
    <p>Write stuff</p>
}

@foreach (var item in Model.Children)
{
    <li>@item.Name</li>
}

Embedding comments in razor

Commenting your code is important, use comments to explain what the code does. @* *@ indicates a comment, which will not be visible in the rendered output.

@* Here we check if the name is equal to foobar *@
@if (Model.Name == "foobar")
{
    @foreach (var child in Model.Children)
    {
        @* here we write stuff for each child page *@
        <p>write stuff</p>
    }
}

If/else

If/else statements perform one task if a condition is true, and another if the condition is not true

@if (Model.Name == "home")
{
    <p>This is the homepage!</p>
}

@if (Model.NodeTypeAlias == "TextPage")
{
    <p>This is a textpage</p>
}
else
{
    <p>This is NOT a textpage</p>
}

Foreach loops

A foreach loop goes through a collection of items, typically a collection of pages and performs an action for each item

@foreach (var item in Model.Children)
{
    <p>The item name is: @Item.Name</p>
}

Switch block

A Switch block is used when testing a large number of conditions

@switch (Model.WeekDay)
{
    case "Monday":
        "<p>It is Monday</p>";
        break;
    case "Tuesday":
        "<p>It is Tuesday</p>";
        break;
    case "Wednesday":
        "<p>It is Wednesday</p>";
        break;
    default:
        "<p>It's some day of the week</p>";
        break;
}

More examples

Lots of examples of using various techniques to render data in a view

Rendering the raw value of a field from IPublishedContent

@Model.Value("bodyContent")

Rendering the converted value of a field from IPublishedContent

@Model.Value<double>("amount")
@Model.Value<IHtmlString>("bodyContent")

Rendering a macro

@Umbraco.RenderMacro("myMacroAlias")

Rendering a macro with parameters using an anonymous object

@Umbraco.RenderMacro("myMacroAlias", new { name = "Ned", age = 28 })

Rendering a macro with parameters using a dictionary

@Umbraco.RenderMacro("myMacroAlias", new Dictionary<string, object> {{ "name", "Ned"}, { "age", 27}})

Rendering some member data

@if(Members.IsLoggedIn()){
    var profile = Members.GetCurrentMemberProfileModel();
    var umbracomember = Members.GetByUsername(profile.UserName);

    <h1>@umbracomember.Name</h1>
    <p>@umbracomember.Value<string>("bio")</p>
}