【T3b】POSTを処理する(2/5)

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

3b-2. 準備作業

ウェブページ上でフォームからの送信は，GETリクエストではなくPOSTリクエストによって行われる．実際にこのことを確認してみよう．

このためには，まずはフォームからデータの送信するためのページと，そのデータを受け取って処理するプログラムを用意する必要があるが，これに関しても私たちは【T1c】ASP.NET Core MVCで一通りのことを試している．今回はこれを応用することにしよう．

「ASP.NET Core (空)」タイプのプロジェクトを作成し，上表に示すように，プロジェクト名はT3bとする．ターゲットフレームワークとして「.NET 8.0(長期的なサポート)」を選択し，「HTTPS用の構成」のチェックを外すこと，また「最上位レベルのステートメントを使用しない」にチェックが入っていない ことを確認しよう．

プロジェクトを ASP.NET Core MVC アプリとして構成するように Program.cs を編集し(リスト1c-3-1)， Controllers フォルダ，Views フォルダを作成することころまでは【T1c】ASP.NET Core MVCと同じである．

最初に新たなコントローラーを作成しよう．今回はHogeという名前のコントローラーを作成することにする( Homeではない ので注意せよ)． Controllersフォルダを右クリックして，「追加」→「コントローラー」をクリックする．「MVCコントローラー - 空」を選択して，名前にHogeController(末尾の .cs は省略可)と指定する．すると Controllers/HogeController.cs が作られるので， _に示す通りに記述しよう．強調部分は自分で記述しなければならない部分である．

Controllers/HogeController.csの内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
using Microsoft.AspNetCore.Mvc;

namespace T3b.Controllers
{
    public class HogeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult DumpPost()
        {
            // (表示用)Formデータの「キーと値」の組をViewDataに入れる
            foreach (var ent in Request.Form)
            {
                ViewData[ent.Key] = ent.Value;
            }

            return View();
        }
    }
}

HogeControllerクラスには，Index()とDumpPost()の二つのアクションメソッドを定義している．今回は各々にビューを用意しよう．Index()アクションでは単純にフォームを表示し， DumpPost()アクションではそのフォームからの送信を受け取ることにする．

まずはIndex()アクションのためのビューを作成しよう．Views フォルダにコントローラー名と同じ名前のフォルダを作成し，これを右クリックして，「追加」→「ビュー」をクリックして「Razorビュー」を選択する(「Razorビュー - 空」ではないことに注意)．表示されたダイアログで「ビュー名」にIndexと入力して「レイアウトページを使用する」のチェックは外して「追加」をクリックする．これによって Views/Hoge/Index.cshtml が追加されるので，_の通りに記述する．強調部分は自分で記述しなければならない部分である．

Views/Hoge/Index.cshtmlの内容

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

<!DOCTYPE html>

<html lang="ja">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <h1>今見ているのは /Hoge/Index </h1>
    
    <form action="/Hoge/DumpPost" method="POST"> @* ① *@
        入力値1: <input type="text" name="foo" /><br /> @* ② *@
        入力値2: <input type="text" name="bar" /><br /> @* ③ *@
        <input type="submit" value="送信" /> @* ④ *@
    </form>    
</body>

</html>

_の②と③の部分ではそれぞれfoo，barと名前を付けたデータのための入力欄を作成している．ちなみに@*から*@までの部分はRazor文法(.cshtml)におけるソースコードのコメントである． C#でいえば/*～*/のスタイルのコメントに相当する．

フォームの送信先は_の①の行のように， form 要素の action 属性によって指定する． method 属性はHTTPのリクエストのメソッドを指定する．何も指定しなかった場合はPOSTメソッドが使用されるので，通常は書く必要はないが，ここでは分かりやすさのために記述している．これによって，このフォームの送信ボタン(_の④)を押したときに， http://localhost:ポート番号/Hoge/DumpPostに対してPOSTリクエストが発生することになる．

次に先ほどと同じ手順でDumpPost()アクションのためのビューも作成しよう．作成されたビュー Views/Hoge/DumpPost.cshtml に，_に示す内容を記述する．強調部分は自分で記述しなければならない部分である．

Views/Hoge/DumpPost.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
@{
    Layout = null;
}

<!DOCTYPE html>

<html lang="ja">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>DumpPost</title>
    @* ① スタイルの指定 *@
    <style>
        table {
            border-collapse : collapse;
        }
        th, td {
            border : 1px solid black;
        }
        th {
            background: #404040;
            color: white;
        }
    </style>
</head>
<body>
    <h1>POSTデータ</h1>

    @* ② フォームの「キーと値」の組を表組み(table要素)で表示する *@
    <h2>フォームデータ(「キーと値」の組)</h2> 
    <table>
        <tr>
            <th>キー</th><th>値</th>
        </tr>
        @foreach (var ent in ViewData)
        {
            @* キー(key)と値(value)を表組みの行(tr要素)内で表示 *@
            <tr>
                <td><code>@ent.Key</code></td>
                <td><code>@ent.Value</code></td>
            </tr>
        }
    </table>
</body>

</html>

_の①は単に表示結果のページを見やすくするためのスタイルの指定である．ここでは表の境界線や見出し行の表示方法を指定している．

_の②では，フォームから送信されたデータに含まれていた「キーと値」の組を表組みとして表示している．ここでいう「キー」とは入力欄につけられた名前―つまり input要素のname属性 のことであり，「値」とはそのinput要素に入力された入力値のことである．ここでは_の15行目付近で，フォームに含まれていたデータをViewDataに移し替えたのでこれを読み出している．

ここまで書けたら，スタートアッププロジェクトをこのプロジェクト( T3b )に変更し，アプリケーションの実行環境として http が選択されていることと，表示に使用するウェブブラウザとして Firefox が選択されていることを確認して実行する．ウェブブラウザが起動したらアドレスバーのURLの末尾を /Hoge/Index に変更して，Hogeコントローラーの Indexアクションにアクセスしてみよう．_のように表示されるはずである．

「入力値1」「入力値2」にそれぞれ適当な文字列を入力して「送信」ボタンを押してみよう． _のように表示されるはずである． Visual Studio のデバッグ実行は停止せずに，かつ/Hoge/Indexをウェブブラウザに表示させたままの状態で次に進むこと．

Last updated on 2024-05-10
Published on 2024-05-10