【T1c】ASP.NET Core MVC(5/6)

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

注意

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

1c-5. MVCを用いたフォームの処理

では，このチュートリアルの当初の目的である「フォームで体重と身長を入力させてBMIを計算して表示する」アプリケーションを作成しよう．このために先ほどのFooコントローラーにCalcBMI()というメソッドを追加し，それに対応するビューを作成しよう(_)．

CalcBMI.cshtml には_のように追記しよう．

Foo/CalcBMI.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
@{
    Layout = null;
}

<!DOCTYPE html>

<html lang="ja">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CalcBMI</title>
</head>
<body>
    <h1>今見てるのは Fooコントローラーの CalcBMI アクション</h1>

    <h2>BMI計算機</h2>

    <form method="post">
        体重(kg): <input type="number" name="weight" min="1" step="0.1" required /><br />
        身長(cm): <input type="number" name="height" min="1" step="0.1" required /><br />
        <input type="submit" value="送信" />
    </form>
</body>

</html>

17～21行目のform要素では，数値の入力のための二つの入力欄を用意している． form要素のaction属性を省略しているが，この場合は表示されているページそのものにフォームデータが送信される．ここでは二つの入力値「体重」と「身長」に，それぞれweight，heightという識別子を与えている (input要素のname="weight"およびname="height"の部分)．

ついでに先ほどの Index.cshtml に，_のようにCalcBMIアクションへのリンクを追記しておこう．

Fooフォルダ内のIndex.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
@{
    Layout = null;
}

<!DOCTYPE html>

<html lang="ja">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <h1>今見てるのは FooコントローラのIndexアクション</h1>

    <a href="/Foo/CalcBMI">BMI計算機へ</a>

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

</html>

ここまで追記したら実行してみよう．「BMI計算機」のリンクをたどり，体重と身長の入力欄がある CalcBMI.cshtml の内容が表示されることを確認しよう(_～_)．またこのページで入力欄に適当に入力して送信してみよう．

_のようにページがリロードされるだけで何も起きないはずである．これは送信された内容を受ける処理をまだ書いていないためである．このためにFooControllerクラスに_のようなメソッドを追加しよう． 間違って，先ほど作成したCalcBMI()メソッドを書き換えてしまわないように注意！ここで指示しているのは「メソッドの追加」である．

FooControllerクラスへの追記内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
[HttpPost]
public IActionResult CalcBMI(double weight, double height)
{
    // BMIの計算
    double h_cm = height / 100;
    double bmi = weight / (h_cm * h_cm);

    // ViewDataに↑で計算したBMIの値を登録
    ViewData["bar"] = bmi;

    return View();
}

FooControllerクラスは引数なしのCalcBMI()メソッドをすでに持っているが， _で追加しているメソッドは既存のCalcBMI()メソッドと同名ではあるが，引数を持つオーバーロードである．ここでは double 型のweightとheightという二つの引数をメソッドに持たせている．

フォームからの入力を受け付けるアクションメソッドの引数の名前は，フォーム内の各 input 要素の name 属性と一致している必要がある(順序は問わない)． _のフォームでは，二つの input 要素にweightとheightという識別子を指定した．このため，フォームの入力内容が送信されてこのCalcBMI()メソッドの処理が起動すると，その引数weightとheightに対応する入力欄の入力内容がそれぞれセットされる．

なおこの引数の型は厳格には問われない．その input 要素によって作られる入力欄で入力可能なデータの種類から変換可能な型であれば何でも使用することができる．例えば，_のフォームでは， type 属性にnumberという値を指定して数値用の入力欄を作成している．これを受けるために_ではメソッドの引数を double 型にしているが，この代わりに float 型や decimal 型を使用することもできる．

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