[Razor Pages 入門] その3 Razor 構文の基本

ASP.NET Core

2020.07.05

今回からは、簡単なサンプルとともに Razor 構文について説明をしていきます。

@ 記号の使い方
1. @ のエスケープ
2. メールアドレス内の @
暗黙的な Razor 式を使ってみる
明示的な Razor 式を使ってみる

@ 記号の使い方

HTML ページ内（拡張子が *.cshtml のファイル）では「@」記号を使用することで、C# のコードをHTML へとレンダリングをします。

「@変数名」のように記述すると、変数の値を HTML に出力することができます。

@ のエスケープ

「@」記号を出力したい場合には、もう１つ「@」を付けてエスケープします。

以下の例では「@data」という文字列を出力するために、「@@data」としています。

@をエスケープする例

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

    <p>@@data</p>
</div>

エスケープ出力の例

メールアドレス内の @

メールアドレスの「@」は特別な記述をする必要はありません。

以下に例を示します。

メールアドレスの取り扱い

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

    <a href="mailto:hiro@example.com">hiro@example.com</a>
</div>

メールアドレスの取り扱い

暗黙的な Razor 式を使ってみる

@ を使用することで C# ステートメントの結果を出力することができます。

たとえば、以下のコードを実行すると、現在時刻を出力することができます。

C# ステートメントの実行

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4"&lgt;Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a></p>

    <p>@DateTime.Now</p>
</div>

C# ステートメントの実行

明示的な Razor 式を使ってみる

先ほどの暗黙的な Razor 式は、シンプルに @ の後ろにステートメントを書くだけで良かったのですが、計算式のような場合は「@(式)」のように書く必要があります。

以下の例では、「現在時刻より１日前」を計算して出力します。

式の実行

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

    <p>@(DateTime.Now - TimeSpan.FromDays(1))</p>
</div>

計算結果を表示

複数行に渡って式を使用したい場合には、「@{ }」を使用することもできます。

以下の例では、税込み金額の計算をした結果を出力します。

複数行に跨がる式の例

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

    @{ 
        var TAX = 1.1;
        var kakaku = 100 * TAX;
    }
    <p>@kakaku</p>
</div>