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

Hokuriku.NET ASP.NET MVC 入門 2

2012/11/24(土) 10:00-17:00

アジェンダ

１．１機能で基本の流れをつかむ！編集機能の実装

２．URLを自由自在に扱おう

３．お悩み解決！効率的なビュー開発

４．JavaScript 開発 jQuery プラグインと非同期

５．NuGet で何ができる？

６．Azure で発行！

今日のゴール

ASP.NET MVC の以下の機能を学びます。データの表示 Html コントロールの表示 URL ルーティングビュー機能

ASP.NET MVC 開発に伴う技術の一部を学びます。 JavaScript Nuget Azure

今日行うことイメージ

Controlller

View

Model

今日行うことイメージ

Controlller

View

Model

ビュー開発

URL ルーティング

編集機能

データの表示

Azure

NuGet

JavaScript

他

・時間について・参加確認・環境の確認・アンケートの実施・ソースコードの確認・ビルド・リポジトリ・実装済みの機能

今日の流れの確認

１．１機能で基本の流れをつかむ！編集機能の実装

２．URLを自由自在に扱おう

３．お悩み解決！効率的なビュー開発

４．JavaScript 開発 jQuery プラグインと非同期

５．NuGet で何ができる？

６．Azure で発行！

１．

１機能で流れを掴む！

編集機能の実装

編集機能実装

追加実装１・セレクトリストの使用

説明・データの表示・Html コントロール

追加実装２・TempData の使用

9

顧客の編集機能を実装します。

１．編集機能の実装

GET /Cutomer/Edit/1

編集画面のHtml

POST /Customer/Edit/1

302 リダイレクト /Customer/List

GET /Customer/List

一覧画面のHtml

入力

DB登録

アクセス

一覧画面確認

流れの確認


編集画面のHtml

修正して送信！

検証失敗

送信！


＋検証失敗の理由を表示するHtml


流れの確認検証失敗時


～ハンズオン～

１．



編集機能実装





説明 ActionLink 1

編集画面へ遷移するために、 @Html.ActionLink(..) を利用して、編集画面のリンクを設置しました。

ActionLink について

他の画面へ遷移したい時に利用します。 Html の a タグを出力します。


説明 ActionLink 2

第3引数に、パラメータである顧客IDを指定しました。このときの名前は、アクションメソッドの引数の名前と、同じものを指定してください。


説明 ActionLink 3

ActionLink メソッドでは、このように遷移したい先の Controller や ActionName 、パラメータを指定することができます。

ActionName とは、今はアクションメソッド名のようなものと思ってください。（このあたりは、後程の URL ルーティングに関係します。）


説明データの表示 1

編集画面に、既存の顧客データを表示するために、顧客データを DB から取得し、ビュー側へ渡しました。

ビューへデータを表示する方法は２つあります。

①Model として指定する

②ViewData、ViewBag に入れる

実装では、①を利用しました。



①Model として指定する

コントローラで

View メソッドの引数に、ビューへ渡したいデータを指定します。

ビューで

ビューある、Edit.cshtml ファイルに、Model の型を宣言します。このように宣言することで、型情報を利用してコードを記述することができます。



コントローラで

ビューで

②ViewData、ViewBag に入れる

ViewBag と ViewData どちらを使用しても構いません。


説明 Html コントロール 1

編集画面で、既存の顧客データを、テキストボックスで表示しました。テキストボックスやチェックボックス等、 Html コントロールに値を入れて表示したい時は、コントローラ側で、と、Model をわたし、ビュー側で、と書くことで表示できます。


説明 Html コントロール 2

顧客IDを、隠しコントロールに入れ、POST 送信時に送信されるようにしました。

隠しコントロールについて

画面には表示したくないけど、POST 時に値を送信したい時に使用します。（値はソースから確認できるので注意）

１．



編集機能実装




23

顧客の編集に機能を追加します。顧客の編集画面で、グループと性別を選択できるように実装します。


流れの確認

GET /Cutomer/Edit/1

編集画面のHtml


入力

アクセス

＋グループの選択項目と、性別の選択項目を表示する必要がある。

テキストボックスとや、チェックボックスと同じ、セレクトリストを使って表示する。


セレクトリストの実装で何が必要か

セレクトリストとは

複数の候補から、ユーザが選択した値を送信するための Html コントロール。（ドロップダウンリスト、セレクトボックスとも呼称される）

他の input 要素と同じく、キーと値のペアで送信されます。例：Gender = man




セレクトリストのソースを表す型

ASP.NET MVC には、セレクトリスト用のデータソースの型である、 SelectList , MultiSelectList , SelectListItem が用意されているので、この型に、項目の値を設定し、ビューで表示させます。

SelectList

Controlller View

男：man 女：female で、SelectList を作る。

ビューは、SelectList を参照して、 Htmlタグを出力する。


セレクトリストビューでの書き方

・第１引数は、選択した値をバインドさせたいプロパティを指定します。・第２引数は、セレクトリストを指定します。・第３引数は、先頭に追加されるテキストを指定します。（指定しなくてもＯＫ）


セレクトリストのソースを表す型使い分け

SelectList , MultiSelectList , SelectListItem は、継承関係にあります。よく使われるのは、SelectList と SelectListItem です。

DB からデータソースを用意するときは、SelectListを、

任意の値からデータソースを用意するときは、SelectListItem が良いと思います。


セレクトリスト注意

POST 送信後、検証失敗などで編集画面をまた表示させたいとき、セレクトリストをもう一度用意する必要があるので、注意です。

セレクトリストを設定

１．



編集機能実装




32

顧客の編集に機能を追加します。顧客の編集が終わった後、一覧画面へ遷移します。その時に、一覧画面に、 “編集しました”というメッセージを表示させます。


編集後に、一覧へメッセージを表示することについて

302 リダイレクト /Customer/List

GET /Customer/List

一覧画面のHtml

編集画面で入力

DB登録

一覧画面確認

“～～を編集しました。”

メッセージをサーバに保存

メッセージを参照


編集後に、一覧へメッセージを表示することについて

GET /Customer/List

一覧画面のHtml

メニューから一覧画面を表示

“～～を編集しました。”

メッセージの値は消去されている（ようにしたい）

TempData を利用します




TempData の利用

現在のリクエストと、次のリクエスト間でのみ使用できるデータのこと。サーバに値が保存され、ASP.NET MVC が管理しています。

TempData とは

クライアントサーバ

ここの話


TempData の利用

TempData とは

リダイレクト後の画面に、値を渡したい時に、利用します。

キーと値のペアで管理されます。

１．編集機能の実装まとめ

編集機能より、ASP.NET MVC の基本の流れをおさらいしました。データの表示方法を確認しました。

ViewData, ViewBag Return View(model);

Html コントロールを使ったデータの表示方法を確認しました。セレクトリストの使い方も確認しました。

TempData を使えば、リクエスト間でデータを参照できることを確認しました。

１．編集機能の実装まとめ

Controlller

View

Model

編集機能

ActionLink ViewData, ViewBag

Html.TextBoxFor(..)

TempData

Html.DropDownListFor(..)

Documents

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