8月4日1、2コマ目
今日、やったこと
演習（標準体重計算アプリ作成）
今日の演習
入力された身長から標準体重を計算、表示する。
その１ 計算のみ（正常系のみ）
内容
|
|
図 演習 その１ 計算のみ |
入力値を～.cshtml.csで処理する
サーバーに送信されるデータ
<form>～</form>で囲まれた中にあるボタン(type="submit")をクリックすると、同じ<form>～</form>内の<input>や<select>の入力値や選択値が送信される。
GETコマンド？POSTコマンド?
送信時に使われるHTTPのコマンドは<form>のmethod属性で指定する。
GETまたはPOSTを指定する。
サーバー側の処理①どこに処理を書く？
～.cshtml.csに書くことができる。
GETコマンドなら、OnGet()メソッド、POSTコマンドならOnPost()メソッドが実行される。
サーバー側の処理②送信データをどうやって取得する？
送信される入力値や選択値はOnGet()、OnPost()の引数で受け取ることができる。
なお、引数名は<input>や<select>のname属性設定値と同じにすること。
 |
| 図 サーバー側で入力値、選択値を取得し処理する |
解答例
～.cshtml
～.cshtml.cs
その２ 入力値チェック（155cm未満はエラー）
内容
|
|
図 演習 その２ 入力値チェック |
解答例
～.cshtml
～.cshtml.cs
その３ 体重入力、標準体重との差を出力
内容
|
|
図 演習 その３ 体重入力・標準体重との差出力 |
サーバー処理結果を画面に表示する
～.cshtml.csのプロパティは～.cshtmlからアクセス可能
～.cshtml.csにプロパティを用意する。
画面に表示したいデータはプロパティにセット。
～.cshtmlでは、 @プロパティ名 でプロパティにアクセス可能。
初回アクセス時はNullかも
プロパティ初期化処理がなければ、初回アクセス時にはプロパティはnull。
そんなときに画面にエラーを出力させないために、 @ifコードブロック などを使って対応する。
 |
| 図 プロパティ経由で結果を画面に表示(nullには注意！！) |
解答例
Resultクラス
標準体重の計算および表示内容を受け渡すためのクラス
～.cshtml
～.cshtml.cs
その４ エラーチェック
内容
|
|
図 演習 その４① |
|
| 図 演習 その４② |
解答例
Resultクラス
標準体重の計算および表示内容を受け渡すためのクラス
その３と同じ
コメント