Razorで繰り返しや条件分岐、CSSクラス名の設定など

ASP.NETのRazorで繰り返し処理（for/foreach）や条件分岐（if/else）、CSSクラス名の設定、「@」のエスケープ処理などを行う方法です。

for

@for (var i = 0; i < 3; i++)
{
    <p>@i</p>
}

foreach

@{ 
    string[] arr = { "a", "b", "c" };
}

@foreach (var s in arr)
    {
    <p>@s</p>
}

if/else

@{
    var flag = (new System.Random().Next(2) < 1);
}

@if (flag)
{
    <p>true</p>
}
else
{
    <p>false</p>
}

@{
    var activeClass = "active";
}

<p class="@activeClass"></div>

Razorは先頭が「@」で始まるので、HTML中にRazor処理しないただの「@」を埋め込む場合は「@@」とします。

以下はCSSのメディアクエリ（@media）を使用した際のエスケープ。

通常通りに「@」1つだとエラーになるので

<style>
@media screen and (min-width: 500px) {
    .foo {
        display: inline-block;
    }
}
</style>

<p class="foo"></p>

「@@」とします。

<style>
@@media screen and (min-width: 500px) {
    .foo {
        display: inline-block;
    }
}
</style>

<p class="foo"></p>