Post on 24-Jun-2015
description
Hokuriku.NET ASP.NET MVC 入門
1
2012/8/25(土) 13:00-17:00
今日のゴール
2
ASP.NET MVC の概要・基礎を幅広く知る
WEBの基礎を知る
簡単なアプリケーションを作成できるようになる
この先でてくるであろう、ASP.NET MVCに関連するセッションやニュースが、身近なものとしてみられる
対象者
3
ASP.NET MVC を初めて触る方
基礎からASP.NET MVCを知りたい方
とりあえずアプリを作成してみたい！という方
タイムスケジュール
4
１３：００～
１４：００～
１５：００～
１６：００～ １７：００
アプリケーションを作成する
まとめ、資料について
プレゼントじゃんけん！
ASP.NET MVCについて知る WEBについて
３分で作成！ ASP.NET MVC
5
3分で作成！
ASP.NET MVC
6
ASP.NET MVC
とは
ASP.NET MVC とは
7
MVCパターン を採用した、 ASP.NET の WEBアプリケーション のための フレームワーク
ゴール ASP.NET MVC がどんなものであるかを知る。 WEB知識の必要性について知る。
目次
おさえておきたいWEBアプリケーションの特徴 フレームワーク
バージョン MVCパターン 違う視点からみるASP.NET MVC ASP.NET MVC でよく使うWEB要素
ASP.NET MVC とは
8
おさえておきたいWEBアプリケーションの特徴
HTTP 通信（ＷＥＢ）
WEBを利用した、アプリケーションである。 HTTP通信で、データのやりとりを行う。 ユーザのリクエストがあって、はじめてサーバからレスポンスがくる。 ユーザはレスポンスがくるまで待つ。これの繰り返しで、目的を達成する。
サーバ側は、ユーザが前回にどんなリクエストを行ったかはわからない。 （＝ステートレス 状態を持たない） → １つのリクエストに対して、どう返すか？ が重要
リクエスト
レスポンス
クライアント サーバ
アプリケーション ASP.NET
MVC
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 の２つがある
ASP.NET
WEB フォーム MVC
ASP.NET MVC とは
10
バージョン
１ ２ ３ ４
2009/4 ニーズに応え MVCが登場
2010/4 業務アプリでも 使用される。 現在でも、２で 保守を続ける所は 多いと思われる？
2011/1 ・フレームワークとしての機能 がほぼ完成。 ・Razor ・Html5対応
2012/8 ・モバイルなど、 マルチディバイスに対応 ・WEB API の追加 ・フレームワークとしての 機能には大きな変更は ない
今日はココ
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
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
ASP.NET MVC とは 違う視点からASP.NET MVC を見る
ASP.NET WEBフォーム ASP.NET MVC
画面はＧＵＩでコントロールを配置。 画面はWEBのHtmlで作成。
View
Model Model
Windowsフォームを作る様な感覚で作成。 ある程度のWEBの知識はなくても可能。
WEBの技術に沿って作成。 Html5やjavascriptなど、開発者が 自由に制御可能。
Controller
Ｖｉｅｗ
各要素が疎結合。テストの容易性ＵＰ。
/Person/List, /Person/3
どのボタンが押されたか？ どのページが指定されたか？
HTTPリクエストに応じて処理 イベント駆動型
ASP.NET MVC とは ASP.NET MVCでよく使うWEB要素
HTTPリクエスト
HTTPレスポンス
Controlller
View HTML Json Atomなど
クライアント
URＩなど
JavaScript
ASP.NET MVC とは まとめ
MVCパターンを採用したASP.NET WEBアプリケーション フレームワーク。
バージョンは現在４まで。 ４では、マルチディバイス対応やWEB APIがある。
MVCは、WEBについてある程度知っておく必要がある。
16
WEB
(for ASP.NET MVC)
WEB
17
ゴール
ASP.NET MVC を開発する上で、最低限必要な WEBの基礎を知る。
目次
WEBとは
取得
送信
リダイレクト
JavaScript
WEB WEB とは
HTTP
HTML URI
情報提供システム
通信の約束
リソースのフォーマットの１つ リソースの一意である名前
URL : 場所 URN : 名前
リソースとは、WEB上に存在する 名前をもった情報
WEB HTTPでやりとりされるメッセージ
リクエストメッセージ レスポンスメッセージ
・メソッド (GET, POST) ★ ・リクエストＵＲＩ★ ・プロトコルバージョン ・ヘッダ ・ボディ★
例： GET /person/list HTTP1.1 Host : sample.com UserAgent: Mozilla…
例： HTTP/1.1 200 OK Content-Type : application/xhtml… <html xmls=“…”> … </html>
・プロトコルバージョン ・ステータスコード★ ・テキストフレーズ ・ヘッダ ・ボディ★
文字列
WEB 取得する
HTTP リクエスト
HTTP レスポンス
メソッド : ＧＥＴ ＵＲＩ : http://sample.com/details - クエリパラメータ ?who=taro & number =1
ステータスコード : 200 ボディ : <html> … </html>
名前と値のペア
WEB 送信する
HTTP リクエスト
HTTP レスポンス
メソッド : POST ＵＲＩ : http://sample.com/list Body : Who=Tanaka & Text = Hello!
ステータスコード : 200 ボディ : <html> … </html>
Htmlの テキストボックスや チェックボックスを 使う
名前と値のペア
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の２つのどれか。 ＧＥＴの場合は、URＩのクエリ文字列として、 ＰＯＳＴの場合は、Bodyの値として送信される。
WEB リダイレクト
HTTP リクエスト
HTTP レスポンス
ステータスコード : 3xx Location : http://sample.com/new
HTTP リクエスト
メソッド : ＧＥＴ ＵＲＩ : http://sample.com/new
他のリソースを参照してほしいことを表す、 HTTPレスポンスのステータスコード。
リダイレクトを受け取ると、 ブラウザはすぐに HTTPリクエストを 行う。
WEB GET と POST どちらを使うのか？
一定の結果を返すもの、変化をあたえないものが → 例：googleの検索、データの表示 ・GETは”何かを取得する”のが目的 ・また、URLはそのままブックマークにも利用されるので、 何度も実行される可能性がある。
変化をあたえるものが → 例：掲示板の投稿、facebookの投稿 ・データの新規登録や編集時など、送信することで 内容が変更される場合に使う。
GET
POST
WEB リダイレクトはどんな時に使用するか？
POST(変更)
レスポンス
同じリクエストを安易に行ってほしくないとき。（F5）
POST(変更)
レスポンス
POST(変更)
リダイレクト
GET(取得) F5押す
F5押す
GET(取得)
POSTが再び行われてしまう。 安全なGETリクエストを行う。
WEB ところでJavaScriptとは？
ブラウザ上などで動くスクリプト言語。 検証、リッチな画面を作成するためには必須のもの。 MVC3からは、jQueryが組み込まれるようになった。WEB開発では必須。
非同期 サーバーからのレスポンスの結果より、 画面の一部だけを更新すること。
WEB まとめ
WEBの基本 HTTP、URI、HTML HTTP リクエスト ・メソッド （GET, POST, …) ・URI
HTTPレスポンス ・ステータスコード ・Body
取得はGET、送信はPOST。 ・ＷＥＢアプリではこの２つを主に利用する。
データを送信するときは、HTMLのコントロールを使う。 ・名前と値のペアで送信。（nameとvalue）
他のリソースを参照してほしいときは、リダイレクト。 JavaScriptはクライアントサイドで動く言語。 ・リッチUI、検証や、非同期処理でよく使われる。