投稿

6月, 2023の投稿を表示しています

6月27日(火)1、2コマ目

今日、やったこと [確認テスト]Razorページ課題8(前回のつづき) [確認テスト]おまけ1(〇×ゲーム) 今日の課題 [確認テスト]Razorページ課題8 ポイントはコーヒーとたべものの2つあるカートへボタン。 正解例をあげておきます。 Program.cs Sessionを使えるように。 SessionExtentions.cs いままでどおり。 Item.cs 商品(コーヒー、食べ物)情報受け渡し用クラス。  SelectedItem.cs 選択済み商品情報受け渡し用クラス。 Cartクラスの選択済み商品リストに追加される際に、注文番号プロパティOrderNumberプロパティ)に値がセットされる。このOrderNumberプロパティは同じCartクラスのインスタンスではオンリーワンになる。この値で選択済み商品リストから商品を特定する。 Cart.cs ショッピングカートのようなクラス。 選択済み商品を保存するItemListプロパティ(List<SelectedItem>クラス)、注文番号候補を保存するOrderNumberプロパティがある。 Index.cshtml.cs OnPost()メソッドでどのボタンがクリックされたかを判断するところがポイント。 Index.cshtml [確認テスト]おまけ1 3x3のマスの情報やどっちの順番(〇の順番、×の順番)など、○×ゲームの流れを管理するGameクラスがポイント。 あと、授業ではやってないEnum(列挙型)も使っている。Enumは定数のセット集みたいなもの。 MaruBatsuEnum.cs 列挙型。定数のセット集。 各マスに表示される、〇、×、空白にそれぞれ定数を設定。この列挙型にまとめている。 Game.cs ○×ゲームの各情報(各マスの情報、順番)を扱う。 Index.cshtml.cs 起動すると、GETコマンドでリクエストするため、OnGet()が動く。 3x3の各マス(実態はボタン)をクリックするとOnPost()が動く。 Index.cshtml 3x3の各マスの実態はボタン。 クリックすると、各マスの位置情報(...

6月20日(火)1、2コマ目

イメージ
今日、やったこと Cartクラスを使う [確認テスト]Razorページ 課題8 今日のホワイトボード [アプリケーション作成]Cartクラスを使う 前回紹介した、選択済み商品を扱うためのショッピングカートのようなCartクラスを使ったアプリケーションを作成。 図 作成したアプリケーション Program.cs いままでとおり。Sessionオブジェクトを使えるように。 SessionExtentions.cs いままでとおり。 Udon.cs うどん情報を受け渡すためのクラス。 SelectedItem.cs 選択済み商品情報受け渡し用クラス。 このクラスに選択済み商品リストから商品を識別するための注文番号プロパティ(OrderIDプロパティ)を追加。 Cart.cs ショッピングカートのようなクラス。 OrderIdプロパティは注文番号候補を保存するプロパティ。 選択済み商品リスト(ItemListプロパティ)に商品を追加する際、OrderIdプロパティから注文番号を生成し、選択商品のOrderIDプロパティにセット。 Index.cshtml submitボタンが、カートへボタンと削除ボタンの複数ある。 どのボタンがクリックされたかがわかるように  カートへボタンのname属性は"cart"、value属性は"cart" を設定している。カートへボタンをクリックした際はOnPost()の引数cartには”cart"がセットされ、削除ボタンクリック時には引数cartはnullになる。 図 どのボタンがクリックされたか判断する 引数cartでカートへボタンがクリックされたか、削除ボタンがクリックされたかがわかる。 Index.cshtml.cs カートへボタン、削除ボタンのどちらがクリックされてもOnPost()メソッドが動く。 引数cartでどちらがクリックされたかがわかるようにしている。 削除ボタンのvalue属性はリストの添え字でいいのでは 削除ボタンのvalue属性にわざわざ注文番号などは使わずに、リストの添え字を使ってもリスト中から1つの商品を識別できるような気がす...

6月13日(火)1、2コマ目

イメージ
今日、やったこと カートクラスを追加 今日のホワイトボード Razorページ 課題5 問題は削除ボタンがクリックされたとき。 どの行がクリックされたかを判別する必要がある。 コーヒーのID等では判別できない(サイズ等が違う同じコーヒーがあるため)。 そこで、各行の商品に行番号(注文番号)を付与する。 Cartクラスを新たに用意してこの辺の処理を担当してもらう。 図 Razorページ課題5のヒント Program.cs いままでどおり。 SessionExtentions.cs いままでどおり。 Coffee.cs Razorページ課題4と同じ。 Size.cs Razorページ課題4と同じ。 Option.cs Razorページ課題4と同じ。   SelectedItem.cs ほぼRazorページ課題4と同じだが、Idプロパティが追加されている。 このIdプロパティが各商品に付与される行番号(注文番号)。 Cart.cs 選択済み商品を扱うショッピングカートのようなクラス。 選択済み商品を格納するリストや、このリストに商品を追加するメソッド、削除するメソッドが用意されている。 選択済み商品リストに商品を追加するさい、行番号(注文番号)を付与して追加する。 Index.cshtml.cs 商品の追加、削除はCartクラスにて行うため、すっきりした。 Index.cshtml 削除ボタンのvalue属性には各商品の行番号(注文番号)をセットする。 次回は テストをします。

6月6日(火)1、2コマ目

イメージ
今日、やったこと 1画面に複数ボタン 今日のホワイトボード パターン1 同じ機能のボタンが複数ある 各商品の選択ボタンをクリックすると、選択商品の詳細情報が表示される。 選択ボタンは複数あるが、同じ機能のボタン。 図 各商品を選択するためのボタンあり Program.cs 前と同じ。Sessionオブジェクトが使えるように。 SessionExtentions.cs 前と同じ。  Item.cs 商品情報受け渡し用クラス。 Index.cshtml.cs どの選択ボタンをクリックしても、OnPost()が実行される。 よって、OnPost()ではどのボタンが押されたかを判別する必要がある。 <button>タグにもname属性とvalue属性がある。value属性でどの商品がクリックされたかがわかる。 Index.cshtml 全選択ボタンは同じ<form>タグ内に。 その2 異なる機能のボタンが複数ある 機能が異なるため、クリックされるタイミングも異なる。 どのボタンをクリックしてもOnPost()が実行される。 OnPost()ではどのボタンがクリックされたかで処理が異なるため、クリックされたボタンを判別する必要がある。 図 カートへボタンと削除ボタンの2種類のボタンがある Program.cs 前と同じ。Sessionオブジェクトが使えるように。 SessionExtentions.cs 前と同じ。  Item.cs 商品情報受け渡し用クラス。 Index.cshtml.cs OnPost()の引数itemidは選択リストにて選択された商品のIDがセットされる。 選択リストは未選択でも一番上の要素が選択されたことになる点に注意。 Index.cshtml 次回は 練習問題(Razorページ 課題5)の解説をします。 多分、テストをします。