Basic 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;
}