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

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

注意

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

1b-5. Razorページを用いたフォームの処理

Razorページを使ってHTMLのフォームから送信されたデータを受け取って処理することもできる．早速試してみよう．

【T1a】ASP.NET Core の基本でやったように，静的ファイルの構成を行おう．以下の三つの作業が必要である(_)．

Program.csの編集
- app.UseDefaultFiles(); と app.UseStaticFiles(); の追記．
- タイミングはapp.Run()の前ならどこでもよいが，.UseDefaultFiles()メソッド→.UseStaticFiles()メソッドの順で呼び出す必要がある点に注意せよ．
wwwrootフォルダの作成
index.htmlの追加

index.htmlには_のように追記しよう．

index.htmlの追記内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
</head>
<body>
    <h1>今見ているのは index.html</h1>

    <form action="Hoge" method="POST">
        回数: <input type="number" name="count" min="0" required /><br />
        <input type="submit" value="送信" />
    </form>
</body>

</html>

10～13行目の form 要素では，数値を入力するための入力欄(＝input要素)を用意してHoge.cshtmlに対してフォームデータを送信している．ここでは入力値にcountという識別子を与えている( input 要素の name="count" の部分)．

この入力値を繰り返し回数として使用するために，_のように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
26
27
28
@page
@attribute [IgnoreAntiforgeryToken]
@{
    Layout = null;
    int count = int.Parse(Request.Form["count"].ToString()); // フォームデータの受け取り
                                                             // (注：通常この方法は用いない)．
}

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

コード中に注記している通り，ここでは簡潔さのために_のような記述しているが，通常はこの方法は通常は用いないことに注意せよ．追記できたら実行してみよう．実行するとまずindex.htmlのフォームが表示されるので，入力欄に適当な数値を入力して実行してみよう．すると_のように入力した数値の回数と同じだけリスト項目が表示されることがわかるだろう．

戻って数値を書き換えて実行しても，正しく動作することを確認しておこう．

ここまでの動作を確認したら二つ目のチュートリアルは完了である．以降の作業における混乱を防ぐため，次に進む前に Visual Studio のエディタをすべて閉じておこう．Visual Studio のいずれかのエディタのタブを右クリックして「すべてのドキュメントを閉じる」をクリックすれば，エディタをすべて閉じることができる．

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