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