- 追加された行はこの色です。
- 削除された行はこの色です。
[[Open棟梁Project>http://opentouryo.osscons.jp/]] - [[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]
-[[戻る>ASP.NET MVC]]
* 目次 [#xe5726ff]
#contents
*概要 [#h6dc5730]
*MVC [#o92da354]
MVCの基本的な考え方
**M(Model)に実装される処理 [#a1340f52]
Modelには、
-B層クラスと、
-B層クラスが返すViewに渡されるEntity, Bean的なクラス
-B層クラスが返すViewに渡されるEntity, Bean, POCO的なクラス
がある。
**V(View)に実装される処理 [#ad9a7d3d]
View = 画面表示のための処理。
-マスタページ的なViewと、
-全体View
-部分Viewがある。
**C(Controller)に実装される処理 [#h99848ae]
-ASP.NET MVC アプリケーションのコントローラーとアクション メソッド~
https://msdn.microsoft.com/ja-jp/library/dd410269.aspx
***Action Method [#w8313d08]
「M(Model)」を呼び出して「(Bean≒M)」を取得して「V(View)」呼び出す。
***非同期コントローラ [#lc319892]
非同期コントローラを使用すると、[[async/await]]を使用し、Webサーバのスレッド枯渇を防ぐことができる。
-実行に時間のかかる CPU バインド以外の要求に非同期コントローラを使用すると、~
Webサーバの待機スレッドを他に転用可能になるので、Webサーバのスレッド数を節約し、~
スレッド枯渇による「HTTP 503 (サーバーがビジー状態です。)」を防止できる。
-ASP.NET MVC での非同期コントローラーの使用~
https://msdn.microsoft.com/ja-jp/library/ee728598.aspx
図から、リクエスト処理開始時とレスポンス処理終了時のスレッドが変わることが解る。~
後者のスレッドはWebサーバから独立したスレッドプールから取得する。~
複雑なのでオーバーヘッドがある。
-非同期コントローラを使ってみた - しばやん雑記~
http://blog.shibayan.jp/entry/20100715/1279204349
-ASP.NET MVC 4 の新機能、タスク対応の非同期コントローラを使う - しばやん雑記~
http://blog.shibayan.jp/entry/20111105/1320495813
*ルーティング [#abe121d3]
**モジュールの作成順 [#g4c4867d]
+C(Controller)を作成
+V(View)を作成
+M(Model)を作成
+C(Controller)にAction Methodを追加し、C→M→Vと繋げる。
*C(Controller)関連 [#g454069b]
**ルーティング [#abe121d3]
-あらかじめ定義されたルート定義 (URLのパターン) にしたがい、URLからコントローラやアクションに処理を振り分けること。
-例えば、ASP.NET MVCでは、デフォルトで以下のようにルーティングが定義されている。(このルート定義は、自由にカスタマイズ可能)
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = "" } // Parameter defaults
);
この時、ブラウザから
http://server/applicationname/Products/Index/1
というURLでリクエストを送信した場合、ルート定義にしたがい、ページハンドラは
-コントローラ名:Products
-アクション名:Index
-id (アクションに渡す値):1
と判断し、Products コントローラの Index アクションを呼び出し、アクションの引数として "1" を渡す。
*ビューエンジン [#z40de977]
*V(View)関連 [#h3fb6308]
**ビューエンジン [#z40de977]
Webページのビューエンジンには以下の2つのものがある。
**ASPX [#u5044497]
従来の ASP.NET と同様、式やコードブロックを <% ~ %> で囲む記述形式。~
-参考
--C# Razor構文 基礎文法 総まとめ - @IT~
http://www.atmarkit.co.jp/fdotnet/rapidmaster/rapidmaster_03/rapidmaster_03.html
--第5回 新しいビュー・エンジン「Razor」の基本を理解しよう - @IT~
http://www.atmarkit.co.jp/fdotnet/aspnetmvc3/aspnetmvc3_06/aspnetmvc3_06_01.html
--ASP.NET MVC 3 開発入門 (12) - Razor の文法 - しばやん雑記~
http://blog.shibayan.jp/entry/20110317/1300294985
--ASP.NET MVC のビューは ASPX ではなく Razor を~
http://miso-soup3.hateblo.jp/entry/2013/12/02/030906
***ASPX [#u5044497]
従来の ASP.NET と同様、~
式やコードブロックを コード・ナゲット(<% ~ %>)で囲む記述形式。~
View の拡張子も、従来の ASP.NET と同様、「*.aspx」で表される。
**Razor [#id4ef38b]
***Razor(主流) [#id4ef38b]
ASP.NET MVC 3 で登場したビューエンジン。~
式やコードブロックの先頭に「@」を付与する記述形式。~
式やコードブロックの先頭に「@」を付与する記述形式で、~
冗長なコード・ナゲット(<% ~ %>)が不要になる。~
View の拡張子は、C# の場合は「*.cshtml」、VB の場合は「*.vbhtml」で表される。
*HTMLヘルパー [#r27d7319]
**ViewBag, ViewData, TempData [#m41f8886]
ControllerからViewにデータを渡すときに使用する入れ物的なモノ。
-参考
--ViewData vs ViewBag vs TempData - 夜になったら寝る~
http://kyabatalian.hatenablog.com/entry/2015/12/05/232504
***ViewBag [#z43ab48b]
-ViewBag は dynamic object。
***ViewData [#qe522f71]
-ViewData は Dictionary。
***TempData [#i059f7bd]
-TempData は Dictionary。
-TempData は保持されるため、リダイレクト先に値を渡したいときなどに使う。
**HTMLヘルパー [#r27d7319]
従来の ASP.NET では、ASP.NET Web コントロールを使用して、ラベルやテキストボックスなどのコントロールを表示していたが、ASP.NET MVC では HTML ヘルパーを使用する。
ASP.NET MVC では、主に以下のような HTML ヘルパーが使用できる。
||HTML ヘルパー|
|フォーム <form>|Html.BeginForm または Ajax.BeginForm|
|リンク <a>|Html.ActionLink|
|テキストボックス <input type="text">|Html.TextBox または Html.TextBoxFor|
|テキストエリア <textarea>|Html.TextArea または Html.TextAreaFor|
|パスワード <input type="password">|Html.Password または Html.PasswordFor|
|チェックボックス <input type="checkbox">|Html.CheckBox または Html.CheckBoxFor|
|ドロップダウンリスト <select>|Html.DropDownList または Html.DropDownListFor|
|リストボックス <select>|Html.ListBox または Html.ListBoxFor|
|ラジオボタン <input type="radio">|Html.RadioButton または Html.RadioButtonFor|
|隠しフィールド <input type="hidden">|Html.Hidden または Html.HiddenFor|
-...Forという名称のHTML ヘルパーは、ViewとModelの間での双方向バインディングを行う。詳しくは、「[[ASP.NET MVCの利用方法 - HTML ヘルパーの使い分け>ASP.NET MVCの利用方法#c3297525]]」を参照のこと。
-...Forという名称のHTML ヘルパーは、ViewとModelの間での双方向バインディングを行う。~
詳しくは、「[[ASP.NET MVCの利用方法 - HTML ヘルパーの使い分け>ASP.NET MVCの利用方法#c3297525]]」を参照のこと。
-なお、ボタンを生成する HTML ヘルパーはないため、直接 <input type="button"> または <input type="submit"> を記述する。
*マスターページ [#ycd23a70]
**マスターページ [#ycd23a70]
ヘッダーやフッター、サイドメニューなどをアプリケーションで共通的に表示させたい場合、マスターページを使用してレイアウトを共通化させることができる。マスターページには、画面ごとに個別実装が必要な箇所を定義する。
-ビューエンジンが ASPX の場合は、従来の ASP.NET と同様 ContentPlaceHolder を使用する。
-ビューエンジンが Razor の場合は、RenderBody を使用してメインのコンテンツ領域を定義する。
メインのコンテンツ領域以外に、画面ごとに個別実装が必要な箇所を定義する場合、RenderSection を使用して「セクション」と呼ばれるサブのコンテンツ領域を定義する。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!-- メインのコンテンツ領域を描画する場所を定義 -->
@RenderBody()
@Scripts.Render("~/bundles/jquery")
<!-- セクション (サブのコンテンツ領域) を描画する場所を定義 -->
@RenderSection("scripts", required: false)
</body>
</html>
例えば、上記のようにマスターページを定義した場合、各画面では以下のように実装する。
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml"; // 使用するマスターページを指定
}
@* メインのコンテンツ領域 *@
<h2>Index</h2>
@* セクション (サブのコンテンツ領域) *@
@section scripts{
<script type="text/javascript">
...
</script>
}
上記のように、セクションを実装する場合、
-C# の場合は「@section <セクション名> { ~ }」、
-VB の場合は「@Section <セクション名> ~ End Section」
で囲む必要がある。
*BeginForm [#se7ba00c]
**BeginForm [#se7ba00c]
BeginFormには以下の2つのものがある。
**Html.BeginFormの特徴 [#w59fdfea]
***Html.BeginFormの特徴 [#w59fdfea]
-従来のASPなどでも採用されていたMVC方式を同じ仕組み。
-リクエスト・レスポンスの度に、画面全体を再描画する。
-ViewState相当の状態保存処理を独自実装する必要がある。
**Ajax.BeginFormの特徴 [#mb6e9e4d]
***Ajax.BeginFormの特徴 [#mb6e9e4d]
-クライアント・サイドのJavaScriptフレームワークとシームレスに連動して部分更新を実現する仕組み。
-Html.BeginFormとモジュール構造は大きく変わらない。ただし、以下のようにHtml.BeginFormと動作は大きく異なる。
--jQueryを使用してリクエストし、
--更新部位のレスポンスを受けてJavaScriptで描画。
-部分更新のターゲットを意識する必要がある。
--送信時に設定したターゲット以外を更新する場合、画面遷移をする場合、~
JavaScriptを返して更新や画面遷移をする必要がある。
-参考
--連載:ASP.NET MVC入門:第3回~
ActionResultオブジェクトでアクション操作も自由自在 (4-5) - @IT~
http://www.atmarkit.co.jp/ait/articles/0907/10/news109_4.html
>その性質上、Ajax通信の結果をページの一部に反映させるようなケースで利用することになるだろう。
*スキャフォールディング [#e701b267]
スキャフォールディング(Scaffolding)
-データモデルとなる型を元に、
ASP.NET MVC のコントローラクラスに対して、~
データベースの CRUD(Create/Read/Upadate/Delete)と呼ばれる追加、読込、変更、削除を操作を行う~
画面とそのコード(アクション・メソッド)を自動で生成する機能。のひな形を自動生成する機能。
--通常、アクション・メソッドだけが自動生成される。
--ADO.NET [[Entity Framework]] によるデータ操作を行う場合、アクション・メソッドに加えて View も自動生成できる。
-[[WebFormでもサポートされている>http://blog.shibayan.jp/entry/20130219/1361281202]]。
*[[ADO.NET Entity Framework のコードファースト機能>Entity Framework]] [#zb82cea5]
*ASP.NET MVC 4 の新機能 [#b06c540b]
**プロジェクトテンプレートの追加 [#k159317d]
テンプレートが追加された。
-Facebook キャンバスアプリを簡単に作成するための「Facebookアプリケーション」テンプレート
-シングルページ アプリケーションを作成するための「シングル ページ アプリケーション」
-,etc.
**モバイルデバイス対応 [#gae80c09]
ASP.NET MVC 4 で追加された「モバイル アプリケーション」テンプレートを使用して、モバイルデバイス向けアプリケーションを作成できる。このテンプレートでは、jQuery Mobile をベースとしており、タッチ操作に最適化した UI を構築できる。
-複数ブラウザに対応させるためのディスプレイモード
--xxx.cshtml (PC 向け)
--xxx.Mobile.cshtml (一般的なモバイル向け)
--xxx.iPhone.cshtml (iPhone 向け)
--その他
**複数ブラウザに対応させるためのディスプレイモード [#i6400115]
ASP.NET MVC のディスプレイモードを利用すると、PC 向けサイト、モバイル向けサイトのように、ブラウザに応じてレイアウトを変えることができる。ディスプレイモードは、Global.asax の Application_Start メソッドに定義することで使用できる。~
例えば、iPhone 向けのディスプレイモードを定義したい場合は、以下のように実装する。
protected void Application_Start()
{
(中略)
DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});
}
この時、通常の「Index.cshtml」と同じフォルダに「Index.''iPhone''.cshtml」を作成し、iPhone 向けのレイアウトを定義すると、
http://server/application/Controller/Index/id
という同じ URL に対し、PC のブラウザからアクセスした場合は「Index.cshtml」が使用され、iPhone からアクセスした場合は「Index.''iPhone''.cshtml」が使用されるようになる。
**Web API [#s5b3bcda]
RESTful な HTTP サービスを構築するためのフレームワーク。~
既定では、以下のようにルーティングが定義されている。
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
したがって、Web API のアクションを呼び出す際の URL は以下のようになる。
http://server/application/Controller/id
ASP.NET MVC と違い、Web API のルート定義にはアクションの指定がない。Web API を使用した場合、リクエストの HTTP メソッドに応じて、以下のようにコントローラのアクションが自動的に呼び出される。
|HTTP メソッド|呼び出されるメソッド|
|GET|"Get" で始まる名前のメソッド|
|POST|"Post" で始まる名前のメソッド|
|PUT|"Put" で始まる名前のメソッド|
|DELETE|"Delete" で始まる名前のメソッド|
Web API を利用した場合のコントローラの例を以下に示す。同じコントローラの中で GET に対応したメソッドを複数定義したい場合などは、以下のようにオーバーロードで対応できる。
public class ValuesController : ApiController
{
// GET api/values
public IEnumerable<string> Get()
{
return new string[] { "value1", "value2" };
}
// GET api/values/5
public string Get(int id)
{
return "value";
}
// POST api/values
public void Post([FromBody]string value)
{
}
// PUT api/values/5
public void Put(int id, [FromBody]string value)
{
}
// DELETE api/values/5
public void Delete(int id)
{
}
}
**OAuth / OpenID 対応 [#z14b0107]
ASP.NET MVC 4 の「インターネット アプリケーション」テンプレートを使用すると、OAuth/OpenId を使用した Facebook / Twitter / Google / Microsoft などのアカウントによる認証が可能となる。~
これらのアカウントによる認証を行う場合は、App_Start フォルダの AuthConfig クラスで設定を記述する。
public static void RegisterAuth()
{
OAuthWebSecurity.RegisterFacebookClient(
appId: "",
appSecret: "");
}
Microsoft.Web.WebPages.OAuth.OAuthWebSecurity クラスには、各サービスに応じて、アカウント認証を行うためのメソッドが用意されている。
|RegisterFacebookClient|Facebook アカウントによる認証|
|RegisterGoogleClient|Google アカウントによる認証|
|RegisterLinkedInClient|LinkedIn アカウントによる認証|
|RegisterMicrosoftClient|Microsoft アカウントによる認証|
|RegisterTwitterClient|Twitter アカウントによる認証|
|RegisterYahooClient|Yahoo アカウントによる認証|
**シングルページ アプリケーション [#i6c5037c]
単一ページで構成される Ajax アプリケーション。~
HTML5 / CSS や、各種 JavaScript ライブラリを使用することで、UX の向上、マルチデバイス対応が可能となる。~
シングルページ アプリケーションでは、クライアントサイドは各種 JavaScript ライブラリを使用してデータ操作を行い、サーバサイドは Web API を使用して RESTful にアクションメソッドを実行する。~
「シングル ページ アプリケーション」テンプレートを使用すると、既定で以下の JavaScript ライブラリが使用できる。
|JavaScript ライブラリ|説明|
|jQuery|JavaScript のコーディングを支援するライブラリ|
|jQuery UI|jQuery をベースとした UI ライブラリ|
|jQuery Validate|HTML フォームの入力検証を行う jQuery プラグイン|
|knockout.js|JavaScript による MVVM (Model-View-ViewModel) フレームワーク|
|modernizr.js|HTML5/CSS のブラウザ対応状況を調査するためのライブラリ|