[Razor Pages 入門] その4 式のエンコードとコードブロック

.NET Core

2020.07.09

今回は、Razor 構文による式のエンコードと、前回の記事でも紹介したコードブロックについて説明をします。

式のエンコード
1. エンコードとは？
2. ASP.NET Core におけるエンコード
コードブロックを使用する
1. コードブロックで変数を定義し、HTML に出力する
コードブロックでメソッドを定義して利用する

式のエンコード

エンコードとは？

文字列中に < や > のような記号が含まれていると、その文字がHTML タグを表す「<」や「>」と区別ができずに、誤変換される可能性があります。

< は「<」、> は「>」のように書くことで、HTML として表示されるときには正しく「<」や「>」のように表示されるようになります。このような変換をエンコード(正確には HTML エンコード）と呼びます。

ASP.NET Core におけるエンコード

Razor では < や > は「<」や「>」のようにする必要はありません。その代わりに @() の中に書きます。

例えば、以下のように記述します。

Razor 構文によるエンコードの例

@("<p>Sample</p>")

このコードは、ブラウザ上では以下のように表示されます。

ブラウザに表示される文字列

<p>Sample</p>

エンコードして表示された文字列

コードブロックを使用する

前回の記事でも少し触れましたが、複数行の Razor 式は「@{ }」の中に記述します。

「@{ }」のことをコードブロックと呼びます。

コードブロックで変数を定義し、HTML に出力する

以下は、コードブロック内に変数 name を定義して「HIRO」を代入し、HTMLに出力をする例です。

コードブロックで変数を定義し、HTMLに出力する例

@{ 
    var name = "HIRO";
}
<p>@name</p>

コードブロックの使用例

コードブロックでメソッドを定義して利用する

コードブロック内にはメソッドを定義して利用することもできます。

以下の例では、ShowHyperlink というメソッドを定義しています。このメソッドは、url と name という2つの引数を取り、メソッド内部ではハイパーリンクを生成します。

メソッドを定義して利用する例

<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>

    @{
        void ShowHyperlink(string url, string name)
        {
            <p><a href="@url">@name</a></p>
        }

        ShowHyperlink("http://hiros-dot.net","HIRO's.NET");
        ShowHyperlink("http://swift.hiros-dot.net","Swift Life!!");
    }
</div>

実行例を以下に示します。