5月21日（金）1、2コマ目
今日、やったこと
- ～.cshtml.csのOnGet()
- Listクラス
- ～.cshtml.csのOnPost()
- ～.cshtml、～.cshtml.csのライフサイクル
今日のホワイトボード
～.cshtml.csのOnGet()
選択リストに表示する選択肢をプログラム的に作成するには、～.cshtml.csのOnGet()メソッド内で実行する。
OnGet()メソッドはHttpのGETコマンドリクエスト時に実行されるメソッド。
HTTPのGETコマンドはブラウザでページへのリンクをクリックしたときやURLを入力してアクセスする場合に送信される。
|
| 図 GETコマンド送信時は～.cshtml.csのOnGet()メソッドが動く |
Listクラス
複数のデータをひとまとめにするには配列がある。
C#には(Javaも）配列以外にコレクションクラスと呼ばれる、複数のインスタンスをひとまとめにできるクラスがある。Listクラスはそのなかの１つ。
Listクラスは配列と違って要素数を意識する必要がない。
|
| 図 Listクラス |
～.cshtml.csのOnPost()メソッド
ブラウザ上のボタンをクリックすると、HTTPのPOSTコマンドが送信される。POSTコマンド送信時は～.cshtml.csのOnPost()メソッドが実行される。
|
| 図 ボタンクリック時は～.cshtml.csのOnPost()が実行 |
ボタンクリックでPOSTコマンドが送信される場合、一緒にブラウザで入力・選択したデータが送信される。
OnPost()メソッドでは、引数で送信データを受け取ることができる。
ただし、HTMLのname属性設定値と同じ名前の引数にする必要がある。
OnPost()メソッドのポイント
①送信データを取得するには
クライアント側のname属性と同名の引数をOnPost()メソッドに用意する。引数にはブラウザで選択・入力した値が代入されている。
[～.cshtml]
<select name="item">
<option value="めん類">めん類</option>
<option value="どんぶり">どんぶり</option> <= これを選択すると
<option value="飲み物">飲み物</option>
</select>
[～.cshtml.cs]
public void OnPost(string item)
{
引数itemには選択項目のvalue属性の値「どんぶり」が代入される。
②＠AddTagHelperが必要
～.cshtml.csに
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
を追加すること。
追加しないと実行時にエラー発生。
～.csthml、～.cshtml.csのライフサイクル
リクエストごとに～.cshtml、～.csthml.csのインスタンスを生成している点に注意。
|
| 図 ～.cshtml、～.cshtml.csのライフサイクル |
実行時にまずGETコマンドが送信される。サーバー側では、インスタンスが生成され、OnGet()メソッドが実行される。
OnGet()でプロパティに選択リストの選択項目のリストをプロパティに代入して～.cshtmlに渡している。
次に、ボタンクリックすると、サーバー側では、インスタンスが生成され、OnPost()メソッドが実行される。ただし、OnGet()メソッドを実行していないため選択項目のリストはプロパティにセットされていないため、エラーが発生する。
リクエストごとにインスタンスが生成される点にご注意を！！
選択項目のリストはOnGet()、OnPost()の両方で利用するため、コンストラクタでプロパティにセットすればいい。
練習5
一応、解答例を。
Index.cshtml
Index.cshtml.cs
コメント