【T1c】ASP.NET Core MVC(5/6)
プロジェクトタイプ | ASP.NET Core (空) |
---|---|
プロジェクト名 | T1c |
ソリューション名 | PIT1 |
ターゲットフレームワーク | .NET 8.0(長期的なサポート) |
最上位レベルのステートメントを使用しない | 使用する(チェックオフ) |
注意
- 本ページの作業内容は 前のページまでの続き になっていることに注意せよ.
- 先に前のページまでをすべて読み,指示されている作業を済ませてから本ページを読むこと.
- プロジェクトの作成作業についてはプロジェクトの作成を参照せよ.
1c-5. MVCを用いたフォームの処理
では,このチュートリアルの当初の目的である「フォームで体重と身長を入力させてBMIを計算して表示する」アプリケーションを作成しよう.
このために先ほどのFoo
コントローラーにCalcBMI()
というメソッドを追加し,それに対応するビューを作成しよう(_).
CalcBMI.cshtml には_のように追記しよう.
|
|
17~21行目のform要素では,数値の入力のための二つの入力欄を用意している.
form要素のaction属性を省略しているが,この場合は表示されているページそのものにフォームデータが送信される.
ここでは二つの入力値「体重」と「身長」に,それぞれweight
,height
という識別子を与えている
(input要素のname="weight"
およびname="height"
の部分).
ついでに先ほどの Index.cshtml に,_のようにCalcBMI
アクションへのリンクを追記しておこう.
|
|
ここまで追記したら実行してみよう.「BMI計算機」のリンクをたどり,体重と身長の入力欄がある CalcBMI.cshtml の内容が表示されることを確認しよう(_~_). またこのページで入力欄に適当に入力して送信してみよう.
_のようにページがリロードされるだけで何も起きないはずである.
これは送信された内容を受ける処理をまだ書いていないためである.
このためにFooController
クラスに_のようなメソッドを追加しよう.
間違って,先ほど作成したCalcBMI()
メソッドを書き換えてしまわないように注意!
ここで指示しているのは「メソッドの追加」である.
|
|
FooController
クラスは引数なしのCalcBMI()
メソッドをすでに持っているが,
_で追加しているメソッドは既存のCalcBMI()
メソッドと同名ではあるが,引数を持つオーバーロードである.
ここでは double 型のweight
とheight
という二つの引数をメソッドに持たせている.
フォームからの入力を受け付けるアクションメソッドの引数の名前は,フォーム内の各 input 要素の name 属性と一致している必要がある(順序は問わない).
_のフォームでは,二つの input 要素にweight
とheight
という識別子を指定した.このため,フォームの入力内容が送信されてこのCalcBMI()
メソッドの処理が起動すると,その引数weight
とheight
に対応する入力欄の入力内容がそれぞれセットされる.
なおこの引数の型は厳格には問われない.その input 要素によって作られる入力欄で入力可能なデータの種類から変換可能な型であれば何でも使用することができる.例えば,_のフォームでは, type 属性にnumber
という値を指定して数値用の
入力欄を作成している.これを受けるために_ではメソッドの引数を double 型にしているが,この代わりに float 型や decimal 型を使用することもできる.