Hokuriku.NET ASP.NET MVC 入門 2 回目 1.編集機能を実装
- 1. Hokuriku.NET ASP.NET MVC 入門 2 2012/11/24(土) 10:00-17:00
- 2. アジェンダ １． １機能で基本の流れをつかむ！ 編集機能の実装 ２． URLを自由自在に扱おう ３． お悩み解決！ 効率的なビュー開発 ４． JavaScript 開発 jQuery プラグインと非同期 ５． NuGet で何ができる？ ６． Azure で発行！
- 3. 今日のゴール ASP.NET MVC の以下の機能を学びます。 データの表示 Html コントロールの表示 URL ルーティング ビュー機能 ASP.NET MVC 開発に伴う技術の一部を学びます。 JavaScript Nuget Azure
- 4. 今日行うこと イメージ Controlller Model View
- 5. 今日行うこと イメージ Azure 編集機能 Controlller NuGet URL ルーティング Model JavaScript View データの表示 ビュー開発
- 6. 他 ・時間について ・参加確認 ・環境の確認 ・アンケートの実施 ・ソースコードの確認 ・ビルド ・リポジトリ ・実装済みの機能
- 7. 今日の流れの確認 １． １機能で基本の流れをつかむ！ 編集機能の実装 ２． URLを自由自在に扱おう ３． お悩み解決！ 効率的なビュー開発 ４． JavaScript 開発 jQuery プラグインと非同期 ５． NuGet で何ができる？ ６． Azure で発行！
- 8. １． １機能で流れを掴む！ 編集機能の実装 編集機能 説明 追加実装１ 実装 ・データの表示 ・セレクトリストの ・Html コントロール 使用 追加実装２ ・TempData の 使用
- 9. 顧客の編集機能を実装します。 9
- 10. １．編集機能の実装 流れの確認 アクセス GET /Cutomer/Edit/1 編集画面のHtml 入力 POST /Customer/Edit/1 DB登録 302 リダイレクト /Customer/List GET /Customer/List 一覧画面のHtml 一覧画面確認
- 11. １．編集機能の実装 流れの確認 検証失敗時 送信！ POST /Customer/Edit/1 検証失敗 編集画面のHtml ＋検証失敗の理由を 表示するHtml 修正して送信！ POST /Customer/Edit/1
- 12. １．編集機能の実装 ～ハンズオン～
- 13. １． １機能で流れを掴む！ 編集機能の実装 編集機能 説明 追加実装１ 実装 ・データの表示 ・セレクトリストの ・Html コントロール 使用 追加実装２ ・TempData の 使用
- 14. １．編集機能の実装 説明 ActionLink 1 編集画面へ遷移するために、 @Html.ActionLink(..) を 利用して、編集画面のリンクを設置しました。 ActionLink について 他の画面へ遷移したい時に利用します。 Html の a タグを出力します。
- 16. １．編集機能の実装 説明 ActionLink 3 ActionLink メソッドでは、このように遷移したい先の Controller や ActionName 、パラメータを指定することができます。 ActionName とは、今はアクションメソッド名のようなものと 思ってください。 （このあたりは、後程の URL ルーティングに関係します。）
- 17. １．編集機能の実装 説明 データの表示 1 編集画面に、既存の顧客データを表示するために、 顧客データを DB から取得し、ビュー側へ渡しました。 ビューへデータを表示する方法は２つあります。 ①Model として指定する ②ViewData、ViewBag に入れる 実装では、①を利用しました。
- 18. １．編集機能の実装 説明 データの表示 2 ①Model として指定する コントローラで View メソッドの引数に、ビューへ渡したいデータを指定します。 ビューで ビューある、Edit.cshtml ファイルに、Model の型を宣言します。 このように宣言することで、型情報を利用して コードを記述することができます。
- 19. １．編集機能の実装 説明 データの表示 3 ②ViewData、ViewBag に入れる コントローラで ビューで ViewBag と ViewData どちらを使用しても構いません。
- 20. １．編集機能の実装 説明 Html コントロール 1 編集画面で、既存の顧客データを、テキストボックス で表示しました。 テキストボックスやチェックボックス等、 Html コントロールに値を入れて表示したい時は、 コントローラ側で、 と、Model をわたし、 ビュー側で、 と書くことで表示できます。
- 21. １．編集機能の実装 説明 Html コントロール 2 顧客IDを、隠しコントロールに入れ、POST 送信時に送信される ようにしました。 隠しコントロールについて 画面には表示したくないけど、POST 時に値を送信したい時に 使用します。（値はソースから確認できるので注意）
- 22. １． １機能で流れを掴む！ 編集機能の実装 編集機能 説明 追加実装１ 実装 ・データの表示 ・セレクトリストの ・Html コントロール 使用 追加実装２ ・TempData の 使用
- 24. １．編集機能の実装 流れの確認 アクセス GET /Cutomer/Edit/1 編集画面のHtml 入力 ＋ POST /Customer/Edit/1 グループの選択項目と、 性別の選択項目 を表示する必要がある。 テキストボックスとや、チェックボックスと同じ、 セレクトリストを使って表示する。
- 25. １．編集機能の実装 セレクトリストの実装で何が必要か セレクトリストとは 複数の候補から、ユーザが選択した値を送信するための Html コントロール。 （ドロップダウンリスト、セレクトボックスとも呼称される） 他の input 要素と同じく、キーと値のペアで送信されます。 例：Gender = man
- 26. １．編集機能の実装 ～ハンズオン～
- 27. １．編集機能の実装 セレクトリストのソースを表す型 ASP.NET MVC には、セレクトリスト用のデータソースの型である、 SelectList , MultiSelectList , SelectListItem が用意されているので、 この型に、項目の値を設定し、ビューで表示させます。 Controlller View 男：man SelectList ビューは、SelectList 女：female を参照して、 で、SelectList を作る。 Htmlタグ を出力する。
- 28. １．編集機能の実装 セレクトリスト ビューでの書き方 ・第１引数は、選択した値をバインドさせたいプロパティを指定します。 ・第２引数は、セレクトリストを指定します。 ・第３引数は、先頭に追加されるテキストを指定します。 （指定しなくてもＯＫ）
- 29. １．編集機能の実装 セレクトリストのソースを表す型 使い分け SelectList , MultiSelectList , SelectListItem は、継承関係にあります。 よく使われるのは、SelectList と SelectListItem です。 DB からデータソースを用意するときは、SelectListを、 任意の値からデータソースを用意するときは、SelectListItem が良いと思います。
- 31. １． １機能で流れを掴む！ 編集機能の実装 編集機能 説明 追加実装１ 実装 ・データの表示 ・セレクトリストの ・Html コントロール 使用 追加実装２ ・TempData の 使用
- 33. １．編集機能の実装 編集後に、一覧へメッセージを表示することについて 編集画面で入力 DB登録 メッセージを サーバに 302 リダイレクト /Customer/List 保存 GET /Customer/List 一覧画面のHtml メッセージ 一覧画面確認 を参照 “～～を編集しました。”
- 34. １．編集機能の実装 編集後に、一覧へメッセージを表示することについて メニューから一覧画面を表示 GET /Customer/List 一覧画面のHtml メッセージの値は 消去されている “～～を編集しました。” （ようにしたい） TempData を利用します
- 35. １．編集機能の実装 ～ハンズオン～
- 36. １．編集機能の実装 TempData の利用 TempData とは 現在のリクエストと、次のリクエスト間でのみ使用できるデータのこと。 サーバに値が保存され、ASP.NET MVC が管理しています。 ここの話 クライアント サーバ
- 38. １．編集機能の実装 まとめ 編集機能より、ASP.NET MVC の基本の流れをおさらいしました。 データの表示方法を確認しました。 ViewData, ViewBag Return View(model); Html コントロールを使ったデータの表示方法を確認しました。 セレクトリストの使い方も確認しました。 TempData を使えば、リクエスト間でデータを参照できることを 確認しました。
- 39. １．編集機能の実装 まとめ 編集機能 TempData Controlller Model ActionLink ViewData, ViewBag View Html.TextBoxFor(..) Html.DropDownListFor(..)