Hokuriku.NETASP.NET MVC 入門 2  2012/11/24(土) 10:00-17:00
アジェンダ1. 1機能で基本の流れをつかむ! 編集機能の実装2. URLを自由自在に扱おう3. お悩み解決! 効率的なビュー開発4. JavaScript 開発 jQuery プラグインと非同期5. NuGet で何ができる?6. Azure ...
今日のゴールASP.NET MVC の以下の機能を学びます。     データの表示     Html コントロールの表示     URL ルーティング     ビュー機能ASP.NET MVC 開発に伴う技術の一部を学びます。     Java...
今日行うこと   イメージ         Controlller                       Model           View
今日行うこと             イメージ                                     Azure 編集機能                     Controlller     NuGet          ...
他・時間について・参加確認・環境の確認・アンケートの実施・ソースコードの確認    ・ビルド    ・リポジトリ    ・実装済みの機能
今日の流れの確認1. 1機能で基本の流れをつかむ! 編集機能の実装2. URLを自由自在に扱おう3. お悩み解決! 効率的なビュー開発4. JavaScript 開発 jQuery プラグインと非同期5. NuGet で何ができる?6. Azu...
1. 1機能で流れを掴む! 編集機能の実装編集機能   説明             追加実装1実装     ・データの表示        ・セレクトリストの       ・Html コントロール    使用                  ...
顧客の編集機能を実装します。                 9
1.編集機能の実装流れの確認アクセス   GET /Cutomer/Edit/1                                   編集画面のHtml入力 POST /Customer/Edit/1              ...
1.編集機能の実装流れの確認 検証失敗時送信!      POST /Customer/Edit/1                                              検証失敗                      ...
1.編集機能の実装    ~ハンズオン~
1. 1機能で流れを掴む! 編集機能の実装編集機能   説明             追加実装1実装     ・データの表示        ・セレクトリストの       ・Html コントロール    使用                  ...
1.編集機能の実装説明 ActionLink 1編集画面へ遷移するために、 @Html.ActionLink(..) を利用して、編集画面のリンクを設置しました。ActionLink について     他の画面へ遷移したい時に利用します。   ...
1.編集機能の実装説明 ActionLink 2第3引数に、パラメータである顧客IDを指定しました。このときの名前は、アクションメソッドの引数の名前と、同じものを指定してください。
1.編集機能の実装説明 ActionLink 3ActionLink メソッドでは、このように遷移したい先のController や ActionName 、パラメータを指定することができます。ActionName とは、今はアクションメソッド...
1.編集機能の実装説明 データの表示 1編集画面に、既存の顧客データを表示するために、顧客データを DB から取得し、ビュー側へ渡しました。ビューへデータを表示する方法は2つあります。    ①Model として指定する    ②ViewDat...
1.編集機能の実装説明 データの表示 2①Model として指定するコントローラで    View メソッドの引数に、ビューへ渡したいデータを指定します。ビューで    ビューある、Edit.cshtml ファイルに、Model の型を宣言しま...
1.編集機能の実装説明 データの表示 3②ViewData、ViewBag に入れるコントローラでビューで   ViewBag と ViewData どちらを使用しても構いません。
1.編集機能の実装説明 Html コントロール 1編集画面で、既存の顧客データを、テキストボックスで表示しました。テキストボックスやチェックボックス等、Html コントロールに値を入れて表示したい時は、コントローラ側で、と、Model をわたし...
1.編集機能の実装説明 Html コントロール 2顧客IDを、隠しコントロールに入れ、POST 送信時に送信されるようにしました。隠しコントロールについて   画面には表示したくないけど、POST 時に値を送信したい時に   使用します。(値は...
1. 1機能で流れを掴む! 編集機能の実装編集機能   説明             追加実装1実装     ・データの表示        ・セレクトリストの       ・Html コントロール    使用                  ...
顧客の編集に機能を追加します。顧客の編集画面で、グループと性別を選択できるように実装します。                   23
1.編集機能の実装流れの確認アクセス   GET /Cutomer/Edit/1                                 編集画面のHtml入力                               + POST ...
1.編集機能の実装セレクトリストの実装で何が必要かセレクトリストとは  複数の候補から、ユーザが選択した値を送信するための  Html コントロール。        (ドロップダウンリスト、セレクトボックスとも呼称される)  他の input ...
1.編集機能の実装    ~ハンズオン~
1.編集機能の実装セレクトリストのソースを表す型ASP.NET MVC には、セレクトリスト用のデータソースの型である、SelectList , MultiSelectList , SelectListItem が用意されているので、この型に、...
1.編集機能の実装セレクトリスト ビューでの書き方・第1引数は、選択した値をバインドさせたいプロパティを指定します。・第2引数は、セレクトリストを指定します。・第3引数は、先頭に追加されるテキストを指定します。    (指定しなくてもOK)
1.編集機能の実装セレクトリストのソースを表す型 使い分けSelectList , MultiSelectList , SelectListItem は、継承関係にあります。よく使われるのは、SelectList と SelectListIte...
1.編集機能の実装セレクトリスト 注意POST 送信後、検証失敗などで編集画面をまた表示させたいとき、セレクトリストをもう一度用意する必要があるので、注意です。                       セレクトリストを設定
1. 1機能で流れを掴む! 編集機能の実装編集機能   説明             追加実装1実装     ・データの表示        ・セレクトリストの       ・Html コントロール    使用                  ...
顧客の編集に機能を追加します。顧客の編集が終わった後、一覧画面へ遷移します。その時に、一覧画面に、“編集しました”というメッセージを表示させます。                    32
1.編集機能の実装編集後に、一覧へメッセージを表示することについて編集画面で入力                                       DB登録      メッセージを                           ...
1.編集機能の実装編集後に、一覧へメッセージを表示することについてメニューから一覧画面を表示GET /Customer/List                            一覧画面のHtml   メッセージの値は          ...
1.編集機能の実装    ~ハンズオン~
1.編集機能の実装TempData の利用TempData とは現在のリクエストと、次のリクエスト間でのみ使用できるデータのこと。サーバに値が保存され、ASP.NET MVC が管理しています。                         ...
1.編集機能の実装TempData の利用TempData とはキーと値のペアで管理されます。リダイレクト後の画面に、値を渡したい時に、利用します。
1.編集機能の実装 まとめ 編集機能より、ASP.NET MVC の基本の流れをおさらいしました。 データの表示方法を確認しました。    ViewData, ViewBag    Return View(model); Html コ...
1.編集機能の実装 まとめ編集機能                                  TempData                      Controlller                              ...
Upcoming SlideShare
Loading in …5
×

Hokuriku.NET ASP.NET MVC 入門 2 回目 1.編集機能を実装

2,220 views

Published on

2012/11/24 に、開催させて頂いたASP.NET MVC 入門 2 回目の資料の一部です。

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,220
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Hokuriku.NET ASP.NET MVC 入門 2 回目 1.編集機能を実装

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

×