Enviar búsqueda
Cargar
Hokuriku.NET ASP.NET MVC 入門 2 回目 1.編集機能を実装
•
1 recomendación
•
2,801 vistas
M
miso- soup3
Seguir
2012/11/24 に、開催させて頂いたASP.NET MVC 入門 2 回目の資料の一部です。
Leer menos
Leer más
Denunciar
Compartir
Denunciar
Compartir
1 de 39
Descargar ahora
Descargar para leer sin conexión
Recomendados
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
miso- soup3
Asp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソ
Yoshitaka Seo
はじめての ASP.NET MVC
はじめての ASP.NET MVC
jz5 MATSUE
Spring bootでweb バリデート編
Spring bootでweb バリデート編
なべ
ASP.NET WEB API 開発体験
ASP.NET WEB API 開発体験
miso- soup3
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
Akira Inoue
Spring bootでweb 基本編
Spring bootでweb 基本編
なべ
AngularJS入門
AngularJS入門
Kenji Shirane
Recomendados
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
miso- soup3
Asp Net Mvc 基礎のキソ
Asp Net Mvc 基礎のキソ
Yoshitaka Seo
はじめての ASP.NET MVC
はじめての ASP.NET MVC
jz5 MATSUE
Spring bootでweb バリデート編
Spring bootでweb バリデート編
なべ
ASP.NET WEB API 開発体験
ASP.NET WEB API 開発体験
miso- soup3
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
Akira Inoue
Spring bootでweb 基本編
Spring bootでweb 基本編
なべ
AngularJS入門
AngularJS入門
Kenji Shirane
[JavaDo] JAX-RS ハンズオン 第2部
[JavaDo] JAX-RS ハンズオン 第2部
haruki ueno
jQuery Validation x ASP.NET MVC で遭遇した不具合 & 対抗ハック
jQuery Validation x ASP.NET MVC で遭遇した不具合 & 対抗ハック
Jun-ichi Sakamoto
Aspnet mvc 6の今を紹介
Aspnet mvc 6の今を紹介
Makoto Nishimura
Eclipse と Liberty プロファイルで始める Java EE 開発ハンズオン #jjug_ccc #ccc_r51
Eclipse と Liberty プロファイルで始める Java EE 開発ハンズオン #jjug_ccc #ccc_r51
Takakiyo Tanaka
20141129-dotNet2015
20141129-dotNet2015
Takayoshi Tanaka
Spring integration概要
Spring integration概要
kuroiwa
Spring Framework ふりかえりと4.3新機能
Spring Framework ふりかえりと4.3新機能
kimulla
Build insider testingwithvs
Build insider testingwithvs
Tomoyuki Iwade
Spring Fest 2018 Spring Bootで作るRESTful Web Service
Spring Fest 2018 Spring Bootで作るRESTful Web Service
WataruOhno
REACT & WEB API
REACT & WEB API
Shigeru Kondoh
20090328
20090328
小野 修司
20081003
20081003
小野 修司
20080524
20080524
小野 修司
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
Laravelの認証について
Laravelの認証について
Takeo Noda
ES Harmony Proxy on Firefox 4
ES Harmony Proxy on Firefox 4
Masafumi Oyamada
Spring Integration 超入門
Spring Integration 超入門
Yasutaka Sugamura
Clrh 110716 wcfwf
Clrh 110716 wcfwf
Tomoyuki Obi
SpringOne 2GX 2014 参加報告 & Spring 4.1について #jsug
SpringOne 2GX 2014 参加報告 & Spring 4.1について #jsug
Toshiaki Maki
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Satoshi Anai
22 tm1 websheet
22 tm1 websheet
Shinsuke Yamamoto
やってみよう!ASP.NET MVC #2
やってみよう!ASP.NET MVC #2
Tadahiro Higuchi
Más contenido relacionado
La actualidad más candente
[JavaDo] JAX-RS ハンズオン 第2部
[JavaDo] JAX-RS ハンズオン 第2部
haruki ueno
jQuery Validation x ASP.NET MVC で遭遇した不具合 & 対抗ハック
jQuery Validation x ASP.NET MVC で遭遇した不具合 & 対抗ハック
Jun-ichi Sakamoto
Aspnet mvc 6の今を紹介
Aspnet mvc 6の今を紹介
Makoto Nishimura
Eclipse と Liberty プロファイルで始める Java EE 開発ハンズオン #jjug_ccc #ccc_r51
Eclipse と Liberty プロファイルで始める Java EE 開発ハンズオン #jjug_ccc #ccc_r51
Takakiyo Tanaka
20141129-dotNet2015
20141129-dotNet2015
Takayoshi Tanaka
Spring integration概要
Spring integration概要
kuroiwa
Spring Framework ふりかえりと4.3新機能
Spring Framework ふりかえりと4.3新機能
kimulla
Build insider testingwithvs
Build insider testingwithvs
Tomoyuki Iwade
Spring Fest 2018 Spring Bootで作るRESTful Web Service
Spring Fest 2018 Spring Bootで作るRESTful Web Service
WataruOhno
REACT & WEB API
REACT & WEB API
Shigeru Kondoh
20090328
20090328
小野 修司
20081003
20081003
小野 修司
20080524
20080524
小野 修司
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
Laravelの認証について
Laravelの認証について
Takeo Noda
ES Harmony Proxy on Firefox 4
ES Harmony Proxy on Firefox 4
Masafumi Oyamada
Spring Integration 超入門
Spring Integration 超入門
Yasutaka Sugamura
Clrh 110716 wcfwf
Clrh 110716 wcfwf
Tomoyuki Obi
SpringOne 2GX 2014 参加報告 & Spring 4.1について #jsug
SpringOne 2GX 2014 参加報告 & Spring 4.1について #jsug
Toshiaki Maki
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Satoshi Anai
La actualidad más candente
(20)
[JavaDo] JAX-RS ハンズオン 第2部
[JavaDo] JAX-RS ハンズオン 第2部
jQuery Validation x ASP.NET MVC で遭遇した不具合 & 対抗ハック
jQuery Validation x ASP.NET MVC で遭遇した不具合 & 対抗ハック
Aspnet mvc 6の今を紹介
Aspnet mvc 6の今を紹介
Eclipse と Liberty プロファイルで始める Java EE 開発ハンズオン #jjug_ccc #ccc_r51
Eclipse と Liberty プロファイルで始める Java EE 開発ハンズオン #jjug_ccc #ccc_r51
20141129-dotNet2015
20141129-dotNet2015
Spring integration概要
Spring integration概要
Spring Framework ふりかえりと4.3新機能
Spring Framework ふりかえりと4.3新機能
Build insider testingwithvs
Build insider testingwithvs
Spring Fest 2018 Spring Bootで作るRESTful Web Service
Spring Fest 2018 Spring Bootで作るRESTful Web Service
REACT & WEB API
REACT & WEB API
20090328
20090328
20081003
20081003
20080524
20080524
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
Laravelの認証について
Laravelの認証について
ES Harmony Proxy on Firefox 4
ES Harmony Proxy on Firefox 4
Spring Integration 超入門
Spring Integration 超入門
Clrh 110716 wcfwf
Clrh 110716 wcfwf
SpringOne 2GX 2014 参加報告 & Spring 4.1について #jsug
SpringOne 2GX 2014 参加報告 & Spring 4.1について #jsug
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Similar a Hokuriku.NET ASP.NET MVC 入門 2 回目 1.編集機能を実装
22 tm1 websheet
22 tm1 websheet
Shinsuke Yamamoto
やってみよう!ASP.NET MVC #2
やってみよう!ASP.NET MVC #2
Tadahiro Higuchi
ネットワーク第6回
ネットワーク第6回
Yukiko Kato
23 tm1 performancemodeler
23 tm1 performancemodeler
Shinsuke Yamamoto
20091030cakephphandson 01
20091030cakephphandson 01
Yusuke Ando
[PS11]ネットワーク第5回
[PS11]ネットワーク第5回
Yukiko Kato
【18-C-4】Google App Engine - 無限の彼方へ
【18-C-4】Google App Engine - 無限の彼方へ
Developers Summit
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
Akira Inoue
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
Yoshitaka Seo
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
Shohei Okada
構築手順 Ssis イベントログ取込み 第2版
構築手順 Ssis イベントログ取込み 第2版
junichi anno
G0042 h
G0042 h
silicone69
DjangoでさくっとWeb アプリケーション開発をする話
DjangoでさくっとWeb アプリケーション開発をする話
Nakazawa Yuichi
Windows azuremobileservice入門
Windows azuremobileservice入門
Makoto Nishimura
Windows azuremobileservice入門
Windows azuremobileservice入門
Makoto Nishimura
チェックポイント(1)(2)(3) デモンストレーション
チェックポイント(1)(2)(3) デモンストレーション
FatWireKK
rails 管理画面作成gem Typus解説
rails 管理画面作成gem Typus解説
baban ba-n
Test Manager + Team Foundation Server /Visual Studio Team Services 手順書(共有パラメー...
Test Manager + Team Foundation Server /Visual Studio Team Services 手順書(共有パラメー...
Masaki Takeda
20120118 titanium
20120118 titanium
Hiroshi Oyamada
Cognos reportauthoring b7_comment
Cognos reportauthoring b7_comment
Shinsuke Yamamoto
Similar a Hokuriku.NET ASP.NET MVC 入門 2 回目 1.編集機能を実装
(20)
22 tm1 websheet
22 tm1 websheet
やってみよう!ASP.NET MVC #2
やってみよう!ASP.NET MVC #2
ネットワーク第6回
ネットワーク第6回
23 tm1 performancemodeler
23 tm1 performancemodeler
20091030cakephphandson 01
20091030cakephphandson 01
[PS11]ネットワーク第5回
[PS11]ネットワーク第5回
【18-C-4】Google App Engine - 無限の彼方へ
【18-C-4】Google App Engine - 無限の彼方へ
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
構築手順 Ssis イベントログ取込み 第2版
構築手順 Ssis イベントログ取込み 第2版
G0042 h
G0042 h
DjangoでさくっとWeb アプリケーション開発をする話
DjangoでさくっとWeb アプリケーション開発をする話
Windows azuremobileservice入門
Windows azuremobileservice入門
Windows azuremobileservice入門
Windows azuremobileservice入門
チェックポイント(1)(2)(3) デモンストレーション
チェックポイント(1)(2)(3) デモンストレーション
rails 管理画面作成gem Typus解説
rails 管理画面作成gem Typus解説
Test Manager + Team Foundation Server /Visual Studio Team Services 手順書(共有パラメー...
Test Manager + Team Foundation Server /Visual Studio Team Services 手順書(共有パラメー...
20120118 titanium
20120118 titanium
Cognos reportauthoring b7_comment
Cognos reportauthoring b7_comment
Más de miso- soup3
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
miso- soup3
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
Visual Studio 2017 RC C# まわり
Visual Studio 2017 RC C# まわり
miso- soup3
OWIN って何?
OWIN って何?
miso- soup3
One ASP.NET, OWIN & Katana
One ASP.NET, OWIN & Katana
miso- soup3
Web開発の最新トレンド ~1から知るASP.NET~
Web開発の最新トレンド ~1から知るASP.NET~
miso- soup3
50分で掴み取る ASP.NET Web API パターン&テクニック
50分で掴み取る ASP.NET Web API パターン&テクニック
miso- soup3
Más de miso- soup3
(7)
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
Visual Studio 2017 RC C# まわり
Visual Studio 2017 RC C# まわり
OWIN って何?
OWIN って何?
One ASP.NET, OWIN & Katana
One ASP.NET, OWIN & Katana
Web開発の最新トレンド ~1から知るASP.NET~
Web開発の最新トレンド ~1から知るASP.NET~
50分で掴み取る ASP.NET Web API パターン&テクニック
50分で掴み取る ASP.NET Web API パターン&テクニック
Hokuriku.NET ASP.NET MVC 入門 2 回目 1.編集機能を実装
1.
Hokuriku.NET ASP.NET MVC 入門
2 2012/11/24(土) 10:00-17:00
2.
アジェンダ 1. 1機能で基本の流れをつかむ! 編集機能の実装 2.
URLを自由自在に扱おう 3. お悩み解決! 効率的なビュー開発 4. JavaScript 開発 jQuery プラグインと非同期 5. NuGet で何ができる? 6. 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.
今日の流れの確認 1. 1機能で基本の流れをつかむ! 編集機能の実装 2.
URLを自由自在に扱おう 3. お悩み解決! 効率的なビュー開発 4. JavaScript 開発 jQuery プラグインと非同期 5. NuGet で何ができる? 6. Azure で発行!
8.
1. 1機能で流れを掴む! 編集機能の実装 編集機能
説明 追加実装1 実装 ・データの表示 ・セレクトリストの ・Html コントロール 使用 追加実装2 ・TempData の 使用
9.
顧客の編集機能を実装します。
9
10.
1.編集機能の実装 流れの確認 アクセス
GET /Cutomer/Edit/1 編集画面のHtml 入力 POST /Customer/Edit/1 DB登録 302 リダイレクト /Customer/List GET /Customer/List 一覧画面のHtml 一覧画面確認
11.
1.編集機能の実装 流れの確認 検証失敗時 送信!
POST /Customer/Edit/1 検証失敗 編集画面のHtml +検証失敗の理由を 表示するHtml 修正して送信! POST /Customer/Edit/1
12.
1.編集機能の実装
~ハンズオン~
13.
1. 1機能で流れを掴む! 編集機能の実装 編集機能
説明 追加実装1 実装 ・データの表示 ・セレクトリストの ・Html コントロール 使用 追加実装2 ・TempData の 使用
14.
1.編集機能の実装 説明 ActionLink 1 編集画面へ遷移するために、
@Html.ActionLink(..) を 利用して、編集画面のリンクを設置しました。 ActionLink について 他の画面へ遷移したい時に利用します。 Html の a タグを出力します。
15.
1.編集機能の実装 説明 ActionLink 2 第3引数に、パラメータである顧客IDを指定しました。 このときの名前は、アクションメソッドの引数の名前と、 同じものを指定してください。
16.
1.編集機能の実装 説明 ActionLink 3 ActionLink
メソッドでは、このように遷移したい先の Controller や ActionName 、パラメータを指定することができます。 ActionName とは、今はアクションメソッド名のようなものと 思ってください。 (このあたりは、後程の URL ルーティングに関係します。)
17.
1.編集機能の実装 説明 データの表示 1 編集画面に、既存の顧客データを表示するために、 顧客データを
DB から取得し、ビュー側へ渡しました。 ビューへデータを表示する方法は2つあります。 ①Model として指定する ②ViewData、ViewBag に入れる 実装では、①を利用しました。
18.
1.編集機能の実装 説明 データの表示 2 ①Model
として指定する コントローラで View メソッドの引数に、ビューへ渡したいデータを指定します。 ビューで ビューある、Edit.cshtml ファイルに、Model の型を宣言します。 このように宣言することで、型情報を利用して コードを記述することができます。
19.
1.編集機能の実装 説明 データの表示 3 ②ViewData、ViewBag
に入れる コントローラで ビューで ViewBag と ViewData どちらを使用しても構いません。
20.
1.編集機能の実装 説明 Html コントロール
1 編集画面で、既存の顧客データを、テキストボックス で表示しました。 テキストボックスやチェックボックス等、 Html コントロールに値を入れて表示したい時は、 コントローラ側で、 と、Model をわたし、 ビュー側で、 と書くことで表示できます。
21.
1.編集機能の実装 説明 Html コントロール
2 顧客IDを、隠しコントロールに入れ、POST 送信時に送信される ようにしました。 隠しコントロールについて 画面には表示したくないけど、POST 時に値を送信したい時に 使用します。(値はソースから確認できるので注意)
22.
1. 1機能で流れを掴む! 編集機能の実装 編集機能
説明 追加実装1 実装 ・データの表示 ・セレクトリストの ・Html コントロール 使用 追加実装2 ・TempData の 使用
23.
顧客の編集に機能を追加します。 顧客の編集画面で、 グループと性別を選択できるように 実装します。
23
24.
1.編集機能の実装 流れの確認 アクセス
GET /Cutomer/Edit/1 編集画面のHtml 入力 + POST /Customer/Edit/1 グループの選択項目と、 性別の選択項目 を表示する必要がある。 テキストボックスとや、チェックボックスと同じ、 セレクトリストを使って表示する。
25.
1.編集機能の実装 セレクトリストの実装で何が必要か セレクトリストとは 複数の候補から、ユーザが選択した値を送信するための
Html コントロール。 (ドロップダウンリスト、セレクトボックスとも呼称される) 他の input 要素と同じく、キーと値のペアで送信されます。 例:Gender = man
26.
1.編集機能の実装
~ハンズオン~
27.
1.編集機能の実装 セレクトリストのソースを表す型 ASP.NET MVC には、セレクトリスト用のデータソースの型である、 SelectList
, MultiSelectList , SelectListItem が用意されているので、 この型に、項目の値を設定し、ビューで表示させます。 Controlller View 男:man SelectList ビューは、SelectList 女:female を参照して、 で、SelectList を作る。 Htmlタグ を出力する。
28.
1.編集機能の実装 セレクトリスト ビューでの書き方 ・第1引数は、選択した値をバインドさせたいプロパティを指定します。 ・第2引数は、セレクトリストを指定します。 ・第3引数は、先頭に追加されるテキストを指定します。
(指定しなくてもOK)
29.
1.編集機能の実装 セレクトリストのソースを表す型 使い分け SelectList ,
MultiSelectList , SelectListItem は、継承関係にあります。 よく使われるのは、SelectList と SelectListItem です。 DB からデータソースを用意するときは、SelectListを、 任意の値からデータソースを用意するときは、SelectListItem が良いと思います。
30.
1.編集機能の実装 セレクトリスト 注意 POST 送信後、検証失敗などで編集画面をまた表示させたいとき、 セレクトリストをもう一度用意する必要があるので、注意です。
セレクトリストを設定
31.
1. 1機能で流れを掴む! 編集機能の実装 編集機能
説明 追加実装1 実装 ・データの表示 ・セレクトリストの ・Html コントロール 使用 追加実装2 ・TempData の 使用
32.
顧客の編集に機能を追加します。 顧客の編集が終わった後、 一覧画面へ遷移します。 その時に、一覧画面に、 “編集しました”というメッセージを 表示させます。
32
33.
1.編集機能の実装 編集後に、一覧へメッセージを表示することについて 編集画面で入力
DB登録 メッセージを サーバに 302 リダイレクト /Customer/List 保存 GET /Customer/List 一覧画面のHtml メッセージ 一覧画面確認 を参照 “~~を編集しました。”
34.
1.編集機能の実装 編集後に、一覧へメッセージを表示することについて メニューから一覧画面を表示 GET /Customer/List
一覧画面のHtml メッセージの値は 消去されている “~~を編集しました。” (ようにしたい) TempData を利用します
35.
1.編集機能の実装
~ハンズオン~
36.
1.編集機能の実装 TempData の利用 TempData とは 現在のリクエストと、次のリクエスト間でのみ使用できるデータのこと。 サーバに値が保存され、ASP.NET
MVC が管理しています。 ここの話 クライアント サーバ
37.
1.編集機能の実装 TempData の利用 TempData とは キーと値のペアで管理されます。 リダイレクト後の画面に、値を渡したい時に、利用します。
38.
1.編集機能の実装 まとめ 編集機能より、ASP.NET
MVC の基本の流れをおさらいしました。 データの表示方法を確認しました。 ViewData, ViewBag Return View(model); Html コントロールを使ったデータの表示方法を確認しました。 セレクトリストの使い方も確認しました。 TempData を使えば、リクエスト間でデータを参照できることを 確認しました。
39.
1.編集機能の実装 まとめ 編集機能
TempData Controlller Model ActionLink ViewData, ViewBag View Html.TextBoxFor(..) Html.DropDownListFor(..)
Descargar ahora