【T1b】ASP.NET Core Razor Pages(4/5)

プロジェクトタイプ	ASP.NET Core (空)
プロジェクト名	`T1b`
ソリューション名	`PIT1`
ターゲットフレームワーク	.NET 8.0(長期的なサポート)
最上位レベルのステートメントを使用しない	使用する(チェックオフ)

注意

本ページの作業内容は 前のページまでの続き になっていることに注意せよ．
- 先に前のページまでをすべて読み，指示されている作業を済ませてから本ページを読むこと．
- プロジェクトの作成作業についてはプロジェクトの作成を参照せよ．

1b-4. Razorページの基本

それではまずリスト1b-3-2のHoge.cshtmlを表示させてみよう． _に示すようにスタートアッププロジェクトをこのプロジェクトに変更して実行しよう．

実行すると最初は何も表示されないはずである．手動でアドレスバーのURLの末尾にHogeを追記してアクセスしてみよう．すると_のように表示されるはずである．

また，_のようにウェブブラウザ上のページのソースと， Visual Studio 上の Hoge.cshtml の内容を見比べてみよう．@から始まるRazorディレクティブ部分は ウェブブラウザ側には送られていないことがわかる．これらRazorディレクティブはサーバ側で処理されるものであるためである．

Razorページの最大の特徴はHTML内にプログラム的な処理を混ぜ書きすることができることである． .cshtml 内には通常のC#プログラムと同じように，繰り返しや条件分岐といった処理を埋め込むことができ，こういった処理はサーバ側で処理されて，_で見たようなプレーンなHTMLとして整形されてからクライアント(≒ウェブブラウザ)に送られる．試しにHoge.cshtmlに_のように追記しよう．

Hoge.cshtmlの内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@page
@attribute [IgnoreAntiforgeryToken]
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>Hoge</title>
    </head>
    <body>
        <h1>今見ているのは Hoge.cshtml </h1>

        <ul>
            @for(int i = 0;i < 10; ++i)
            {
                <li>項目@(i)</li>
            }
        </ul>
    </body>

</html>

@for()のようになっているが，これはC#のfor文と同じものである．また項目@(i)のように @(変数名など)のように記述することで，C#の文脈の変数や式，定数などを参照してHTML内に埋め込むことができる．

_はul要素(番号なしリスト)内にfor文を置いて，繰り返し文を用いて li 要素(リスト項目)を動的に10個生成している．この内容を書き込んだら実行して /Hoge にアクセスしてみよう．このコードの実行結果は_のようになる．

先ほどと同様に，ウェブブラウザ上のソースとHoge.cshtmlの内容を見比べてみよう． _に示すように，繰り返し文があらかじめ処理されていることがわかるだろう．

また，一つの .cshtml ファイル内に記述されている， Razorディレクティブ部分はスコープを共有している．わかりやすく言えば上の @{～}で宣言した変数は，それ以降のRazorディレクティブ内で参照できる ．試しにHoge.cshtmlに_のように追記してみよう．

Hoge.cshtmlの内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@page
@attribute [IgnoreAntiforgeryToken]
@{
    Layout = null;
    int count = 20;
}

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>Hoge</title>
    </head>
    <body>
        <h1>今見ているのは Hoge.cshtml </h1>

        <ul>
            @for(int i = 0;i < count; ++i)
            {
                <li>項目@(i)</li>
            }
        </ul>
    </body>

</html>

5行目でint型の変数countを宣言しているので，5行目以降でこの変数に対して読み書きすることが可能である．ここでは18行目でこの変数を繰り返し回数として使用している．このコードの実行結果は_のようになる．

Razorページはファイルの先頭から末尾まで一続きのメソッドであると考えてよいだろう．実際，内部的にはそのように処理されている． _のように変数countの内容を書き換えて実行し，箇条書き(番号なしリスト)の項目数が変化することを確認しおこう．

Last updated on 2024-04-12
Published on 2024-04-12