hokuriku.net asp.net mvc入門 「概要」 20120825
DESCRIPTION
2012/08/25 に開催したASP.NET MVC入門。 MVCとWEBについての説明です。TRANSCRIPT
![Page 1: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/1.jpg)
Hokuriku.NET ASP.NET MVC 入門
1
2012/8/25(土) 13:00-17:00
![Page 2: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/2.jpg)
今日のゴール
2
ASP.NET MVC の概要・基礎を幅広く知る
WEBの基礎を知る
簡単なアプリケーションを作成できるようになる
この先でてくるであろう、ASP.NET MVCに関連するセッションやニュースが、身近なものとしてみられる
![Page 3: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/3.jpg)
対象者
3
ASP.NET MVC を初めて触る方
基礎からASP.NET MVCを知りたい方
とりあえずアプリを作成してみたい!という方
![Page 4: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/4.jpg)
タイムスケジュール
4
13:00~
14:00~
15:00~
16:00~ 17:00
アプリケーションを作成する
まとめ、資料について
プレゼントじゃんけん!
ASP.NET MVCについて知る WEBについて
3分で作成! ASP.NET MVC
![Page 5: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/5.jpg)
5
3分で作成!
ASP.NET MVC
![Page 6: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/6.jpg)
6
ASP.NET MVC
とは
![Page 7: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/7.jpg)
ASP.NET MVC とは
7
MVCパターン を採用した、 ASP.NET の WEBアプリケーション のための フレームワーク
ゴール ASP.NET MVC がどんなものであるかを知る。 WEB知識の必要性について知る。
目次
おさえておきたいWEBアプリケーションの特徴 フレームワーク
バージョン MVCパターン 違う視点からみるASP.NET MVC ASP.NET MVC でよく使うWEB要素
![Page 8: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/8.jpg)
ASP.NET MVC とは
8
おさえておきたいWEBアプリケーションの特徴
HTTP 通信(WEB)
WEBを利用した、アプリケーションである。 HTTP通信で、データのやりとりを行う。 ユーザのリクエストがあって、はじめてサーバからレスポンスがくる。 ユーザはレスポンスがくるまで待つ。これの繰り返しで、目的を達成する。
サーバ側は、ユーザが前回にどんなリクエストを行ったかはわからない。 (=ステートレス 状態を持たない) → 1つのリクエストに対して、どう返すか? が重要
リクエスト
レスポンス
クライアント サーバ
アプリケーション ASP.NET
MVC
![Page 9: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/9.jpg)
ASP.NET MVC とは
9
フレームワーク
http://www.microsoft.com/japan/seminar/msdn/300sec2010 /dotnet_framework/dotNETStructure/default.html
.NET Framework の 構造より
ASP.NET とは WEB開発用の実行基盤のこと
WEB開発用のフレームワークは、ASP.NET WEBフォームと、
ASP.NET MVC の2つがある
ASP.NET
WEB フォーム MVC
![Page 10: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/10.jpg)
ASP.NET MVC とは
10
バージョン
1 2 3 4
2009/4 ニーズに応え MVCが登場
2010/4 業務アプリでも 使用される。 現在でも、2で 保守を続ける所は 多いと思われる?
2011/1 ・フレームワークとしての機能 がほぼ完成。 ・Razor ・Html5対応
2012/8 ・モバイルなど、 マルチディバイスに対応 ・WEB API の追加 ・フレームワークとしての 機能には大きな変更は ない
今日はココ
![Page 11: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/11.jpg)
ASP.NET MVC とは
11
MVCパターン(ASP.NET MVCにおける)
HTTPリクエスト
HTTPレスポンス
Controlller
1
2 Controllerが Viewを呼ぶ
ユーザがブラウザを通して HTTPリクエストを送信する
3 HTTPレスポンス を返す。
=クラス
青:WEB 赤:ASP.NET MVC
View =Html, Json, Atom
![Page 12: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/12.jpg)
ASP.NET MVC とは
12
MVCパターン(ASP.NET MVCにおける)
HTTPリクエスト
HTTPレスポンス
Controlller
1
2 Controllerが Viewを呼ぶ
ユーザがブラウザを通して HTTPリクエストを送信する
3 HTTPレスポンス を返す。
=クラス
Model
1.5
リクエストに対応する処理を実行。 ユーザに返すための画面の内容 (データモデル)を準備する。
2.5
Viewは、Model(たとえば、1.5で 準備されたデータモデル)を 参照して、Htmlやjsonを作成 する。
WEBアプリなので 動的に対応しなくてはいけない
青:WEB 赤:ASP.NET MVC内
=Html, Json, Atom
View
![Page 13: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/13.jpg)
ASP.NET MVC とは 違う視点からASP.NET MVC を見る
ASP.NET WEBフォーム ASP.NET MVC
画面はGUIでコントロールを配置。 画面はWEBのHtmlで作成。
View
Model Model
Windowsフォームを作る様な感覚で作成。 ある程度のWEBの知識はなくても可能。
WEBの技術に沿って作成。 Html5やjavascriptなど、開発者が 自由に制御可能。
Controller
View
各要素が疎結合。テストの容易性UP。
/Person/List, /Person/3
どのボタンが押されたか? どのページが指定されたか?
HTTPリクエストに応じて処理 イベント駆動型
![Page 14: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/14.jpg)
ASP.NET MVC とは ASP.NET MVCでよく使うWEB要素
HTTPリクエスト
HTTPレスポンス
Controlller
View HTML Json Atomなど
クライアント
URIなど
JavaScript
![Page 15: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/15.jpg)
ASP.NET MVC とは まとめ
MVCパターンを採用したASP.NET WEBアプリケーション フレームワーク。
バージョンは現在4まで。 4では、マルチディバイス対応やWEB APIがある。
MVCは、WEBについてある程度知っておく必要がある。
![Page 16: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/16.jpg)
16
WEB
(for ASP.NET MVC)
![Page 17: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/17.jpg)
WEB
17
ゴール
ASP.NET MVC を開発する上で、最低限必要な WEBの基礎を知る。
目次
WEBとは
取得
送信
リダイレクト
JavaScript
![Page 18: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/18.jpg)
WEB WEB とは
HTTP
HTML URI
情報提供システム
通信の約束
リソースのフォーマットの1つ リソースの一意である名前
URL : 場所 URN : 名前
リソースとは、WEB上に存在する 名前をもった情報
![Page 19: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/19.jpg)
WEB HTTPでやりとりされるメッセージ
リクエストメッセージ レスポンスメッセージ
・メソッド (GET, POST) ★ ・リクエストURI★ ・プロトコルバージョン ・ヘッダ ・ボディ★
例: GET /person/list HTTP1.1 Host : sample.com UserAgent: Mozilla…
例: HTTP/1.1 200 OK Content-Type : application/xhtml… <html xmls=“…”> … </html>
・プロトコルバージョン ・ステータスコード★ ・テキストフレーズ ・ヘッダ ・ボディ★
文字列
![Page 20: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/20.jpg)
WEB 取得する
HTTP リクエスト
HTTP レスポンス
メソッド : GET URI : http://sample.com/details - クエリパラメータ ?who=taro & number =1
ステータスコード : 200 ボディ : <html> … </html>
名前と値のペア
![Page 21: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/21.jpg)
WEB 送信する
HTTP リクエスト
HTTP レスポンス
メソッド : POST URI : http://sample.com/list Body : Who=Tanaka & Text = Hello!
ステータスコード : 200 ボディ : <html> … </html>
Htmlの テキストボックスや チェックボックスを 使う
名前と値のペア
![Page 22: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/22.jpg)
WEB 送信するときの HTMLの中身
<form action=“home/create” method=“post”> <input type=“text” name=“Who” value=“Taro” /> <input type=“submit” /> </form>
POSTかGET
送信する名前 と値のペア
Submitボタンを押すと、 Formで囲まれたコントロールの NameとValueの値をペアとして 送信する。 送信するときの、HTTPメソッド は、GETかPOSTの2つのどれか。 GETの場合は、URIのクエリ文字列として、 POSTの場合は、Bodyの値として送信される。
![Page 23: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/23.jpg)
WEB リダイレクト
HTTP リクエスト
HTTP レスポンス
ステータスコード : 3xx Location : http://sample.com/new
HTTP リクエスト
メソッド : GET URI : http://sample.com/new
他のリソースを参照してほしいことを表す、 HTTPレスポンスのステータスコード。
リダイレクトを受け取ると、 ブラウザはすぐに HTTPリクエストを 行う。
![Page 24: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/24.jpg)
WEB GET と POST どちらを使うのか?
一定の結果を返すもの、変化をあたえないものが → 例:googleの検索、データの表示 ・GETは”何かを取得する”のが目的 ・また、URLはそのままブックマークにも利用されるので、 何度も実行される可能性がある。
変化をあたえるものが → 例:掲示板の投稿、facebookの投稿 ・データの新規登録や編集時など、送信することで 内容が変更される場合に使う。
GET
POST
![Page 25: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/25.jpg)
WEB リダイレクトはどんな時に使用するか?
POST(変更)
レスポンス
同じリクエストを安易に行ってほしくないとき。(F5)
POST(変更)
レスポンス
POST(変更)
リダイレクト
GET(取得) F5押す
F5押す
GET(取得)
POSTが再び行われてしまう。 安全なGETリクエストを行う。
![Page 26: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/26.jpg)
WEB ところでJavaScriptとは?
ブラウザ上などで動くスクリプト言語。 検証、リッチな画面を作成するためには必須のもの。 MVC3からは、jQueryが組み込まれるようになった。WEB開発では必須。
非同期 サーバーからのレスポンスの結果より、 画面の一部だけを更新すること。
![Page 27: Hokuriku.NET ASP.NET MVC入門 「概要」 20120825](https://reader033.vdocuments.net/reader033/viewer/2022052906/558a18c8d8b42a91448b45c6/html5/thumbnails/27.jpg)
WEB まとめ
WEBの基本 HTTP、URI、HTML HTTP リクエスト ・メソッド (GET, POST, …) ・URI
HTTPレスポンス ・ステータスコード ・Body
取得はGET、送信はPOST。 ・WEBアプリではこの2つを主に利用する。
データを送信するときは、HTMLのコントロールを使う。 ・名前と値のペアで送信。(nameとvalue)
他のリソースを参照してほしいときは、リダイレクト。 JavaScriptはクライアントサイドで動く言語。 ・リッチUI、検証や、非同期処理でよく使われる。