ASP.NET MVCの利用方法のバックアップソース(No.16)

[[Open棟梁Project>http://opentouryo.osscons.jp/]] - [[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]

-[[戻る>ASP.NET MVC]]

* 目次 [#n8bb5f94]
#contents

*概要 [#qe050a8a]

*モジュール化の考え方 [#qfa205f4]
まず、Model と View と Controller の役割について整理する。
-Model: アプリケーションの基礎となるデータ構造、およびそのデータを取得・加工する業務ロジック
-View: Model が保持するデータを参照し、ユーザーに表示するもの
-Controller: ユーザーからの入力を受け取り、Model に対してデータの取得・加工を指示する。~
その結果を受けて、View に表示を指示する。

**ModelとViewの関係 [#u005fdca]
Model (0..1) <---> (1) View

***Model (0) <---> (1) View [#aca38037]
View が、Model が保持するデータを何も表示しない状態。(静的なページなど？)

***Model (1) <---> (1) View [#d22aa019]
View が、Model が保持するデータを参照し、ユーザーに表示している状態。~
ただし、View が参照できるのは「Model のプロパティ」のみであり、View から直接 Model のメソッドが呼ぶことはしない。

**ControllerとViewの関係 [#xc23cbb6]
View (1..*) <---> (1) Controller

***View (1) <---> (1) Controller [#va1ffd01]
1 つの View に対して、1 つの Controller を対応させる考え方。~
その View からは、対応する Controller へのみリクエストを送る。~
Controller の処理の結果は、対応する View にのみ指示を送る、というもの。~
Controller の処理の結果を、別の View に表示させたい場合は、~
Controller.RedirectToAction メソッドなどを使用して、その View に対応した Controller に処理をリダイレクトする。

乱暴な言い方をすれば、従来の ASP.NET の WebForm に近い考え方、と言えるかもしれない。
-画面 (*.aspx) が、View に相当する
-コードビハインド (*.aspx.cs, *.aspx.vb) が、Controller に相当する
-画面を遷移するときは、Response.Redirect メソッドを使用して処理をリダイレクトする

-メリット
--従来の ASP.NET の経験がある人には、とっつきやすい可能性がある。
-デメリット
--Controller クラスの数が膨大になる可能性がある。

***View (1..*) <---> (1) Controller [#n9abe57a]
複数の View に対して、1 つの Controller を対応させる考え方。

たとえば、受注処理を行うアプリケーションを考えると、「受注作成画面」・「受注内容更新画面」・「受注削除画面」など、~
複数の View に分かれていても、同じ「受注」業務＝受注エンティティに関するリクエストは 1 つの Controller が受け付ける、という考え方。~

-[[スキャフォールディング（scaffolding）>ASP.NET MVCの用語#e701b267]]
--[[スキャフォールディング（scaffolding）>ASP.NET MVCの用語#e701b267]]が、この考え方を採用している。~
(1 つの Model に対して、その Model に関するリクエストを受け付ける 1 つの Controller、および CRUD を行う 4 つの View が作成される)

--スキャフォールディングの場合、M/V/C それぞれの多重度は、以下のようになる。
---View (4) <---> (1) Model~
(1 つの Model に対して、CRUD を行う View がそれぞれ作成される)
---Controller (1) <---> (1) Model~
(1 つの Model に対して、その Model に関するリクエストを受け付ける Controller が 1 つ作成される)
---View (4) <---> (1) Controller~
(CRUD を行う 4 つの View は、1 つの Controller にのみリクエストを送る)

--しかし、1 つの View で、CRUD 全てを実現できる (CRUD ごとに View が分かれない) 場合は、以下のようになる。~
---View (1) <---> (1) Model
---Controller (1) <---> (1) Model
---View (1) <---> (1) Controller

--メリット
---まとまった業務ごとに Controller を作るので、Controller の数を抑えられる。
--デメリット
---複数の View からの処理をすべて 1 つの Controller で受け付けるため、その Controller のコード量が多くなる可能性がある。

**モジュール化の要約 [#j2c8410a]
CRUD を 1 つの View で行うか？View を分けるか？など、画面設計にも関係するので、メリット／デメリットを考慮の上、どちらを採用するかを決定する。~

***スキャフォールディング方式 [#td62a820]
-View (1..*) <---> (1) Model
-Controller (1) <---> (1..*) Model
-View (1..*) <---> (1) Controller

***View ごとに Controller を作成する方式 [#se3008cd]
-View (1..*) <---> (1) Model
-Controller (1) <---> (1..*) Model
-View (1) <---> (1) Controller

*Controller の作成 [#ra660e99]
**モジュール化 [#t796c394]
[[モジュール化の要約>#j2c8410a]]で紹介した、
-[[スキャフォールディング方式>#td62a820]]
-[[View ごとに Controller を作成する方式>#se3008cd]]

何れかの方針に合わせて、Controllerを作成する。

**利用可能な属性 [#pb75e024]
***HTTP メソッド属性 [#qa67aa3b]
Action Methodには、特定の HTTP メソッドのみを受け入れる属性を付与することができる。

AcceptVerbs 属性（[AcceptVerbs(HttpVerbs.Post)] 等）が用意されていたが、~
MVC 2 からはHttpGet, HttpPost, HttpPut, HttpDeleteという4つの属性が追加された。

-[HttpGet] メソッド属性
--概要
---Get メソッドのみ受け入れる。
---それ以外の HTTP メソッドは受け入れない（404 が返る）。
--ユースケース
---Get で別画面に画面遷移する場合
---入力項目が無い状態で、同一画面内で状態遷移する場合

-[HttpPost] メソッド属性
--概要
---Post メソッドのみ受け入れる。
---それ以外の HTTP メソッドは受け入れない（404 が返る）。
--ユースケース
---フォームの入力項目を Controller に Post する場合。
---Post で別画面に画面遷移する場合。

なお、メソッド属性を指定しなかった場合、~
そのAction Methodはすべての HTTP メソッドを受け入れる。

***ActionName属性 [#mbf9d5ab]
Action Method名と、外部に公開するAction Nameとを別にする。

例えば
|項番|Action Method名|ActionName|処理の内容|h
|１|Delete|Delete|削除画面の初期表示処理|
|２|DeleteConfirmed|Delete|削除処理の実行|

***ValidateAntiForgeryToken属性 [#y1268547]
CSRF対策に使用する。

-View
 @using (Html.BeginForm())
 {
     @* トークンを埋め込む *@
     @Html.AntiForgeryToken()
 }

-Controller
 // トークンを検証する
 [HttpPost, ActionName("Delete")]
 [ValidateAntiForgeryToken]
 public ActionResult DeleteConfirmed()
 {
     ・・・
 }

-参考
--連載：ASP.NET MVC入門：第4回~
フィルタ属性による認証／キャッシュ／セキュリティ対策の実装 (5/5) - ＠IT~
http://www.atmarkit.co.jp/ait/articles/0908/14/news041_5.html
--ASP.NET のセキュリティ対策について考える - しばやん雑記~
http://blog.shibayan.jp/entry/20120526/1338001863
--ASP.NET の組み込み機能を活用し、Web 攻撃を回避する~
https://msdn.microsoft.com/ja-jp/library/ms972969.aspx

*Model の作成 [#r127e540]
**モジュール化 [#eba3e05a]

[[モジュール化の考え方>#qfa205f4]]のように、Model には 2 つの意味がある。

-アプリケーションの基礎となるデータ構造
--POCO として作成する。
--XXXXViewModelという名称を付与する。

-そのデータを取得・加工する業務ロジック
--通常の業務ロジック・クラスとして作成する。

**利用可能な属性 [#yb8830b1]
テンプレート・ヘルパーと呼ばれる（System.ComponentModel.DataAnnotations）。~
ViewやControllerのスキャフォールディング生成の動作を制御する属性。

-第6回　テンプレート機能でビュー開発を効率化 － ＠IT~
http://www.atmarkit.co.jp/fdotnet/aspnetmvc3/aspnetmvc3_07/aspnetmvc3_07_01.html
-ASP.NET MVC の ModelMetadata は奥が深い - しばやん雑記~
http://blog.shibayan.jp/entry/20120108/1326030354

***DataType属性 [#w26b6337]
型情報
 [DataType(DataType.XXXX)]

-DataType 列挙体 (System.ComponentModel.DataAnnotations)~
https://msdn.microsoft.com/ja-jp/library/system.componentmodel.dataannotations.datatype.aspx

***Display属性 [#af7225e4]
表示名（Label表示用のViewヘルパーに使用される）

-Name
--[DisplayName("xxxx")]
--[Display(Name = "xxxx")]

-ResourcesType（国際化対応用）
--[Display(Name = "xxxx", ResourceType = typeof(yyyy))]

***DisplayFormat属性 [#u40f1f5d]
フォーマットの指定。
 [DisplayFormat(DataFormatXXXX="YYYY")]

-DisplayFormatAttribute クラス (System.ComponentModel.DataAnnotations)~
https://msdn.microsoft.com/ja-jp/library/system.componentmodel.dataannotations.displayformatattribute.aspx
--ApplyFormatInEditMode
--ConvertEmptyStringToNull
--DataFormatString
--NullDisplayText
--, etc.

***UIHint属性 [#kbd81af8]
-独自の表示／編集テンプレートを準備する。
-例えばDateTime型を指定したEditorForで~
使用するjQuery UIのDatepickerを適用する。

***DisplayColumn属性 [#dda2f14b]
-Model間のRelationを設定した際、Modelの表示名に使用しているColumn。
-Model間のRelationは、オブジェクト参照で設定する。
*View の作成 [#m019c385]
**モジュール化 [#c1b7f428]


**Razer、ASPX の使い分け[#m195fa6e]
View には、Model のプロパティ参照用、if 文や for 文などの制御用にサーバー処理を埋め込むことができる。~
サーバー処理の記法に、Razer 構文、ASPX 構文がある。

||ASPX|Razor|h
|インライン式 (プロパティの値を表示する場合など)|<%: Model.Property1 %>|@Model.Property1|
|インライン式 (エスケープ処理をスキップし、プロパティの値をそのまま表示する場合)|<%= Model.Property1 %>|@Html.Raw(Model.Property1)|
|コードブロック (ロジックを直接 View に記述する場合) (C#)|<% string str = "あいうえお"; %>|@{ string str = "あいうえお"; }|
|コードブロック (ロジックを直接 View に記述する場合) (VB)|<% Dim str As String = "あいうえお" %>|@Code&br;&nbsp;&nbsp;&nbsp;&nbsp;Dim str As String = "あいうえお"&br;End Code|

**BeginForm の使い分け [#sf5c2980]
ASP.NET MVC には、&lt;form&gt; タグを生成する Viewヘルパーが 2 種類ある。~
BeginForm ヘルパーは引数にコントローラー名、アクション名が付与でき、指定したアクションメソッドにリクエストを送ることができる。

***HTML.BeginForm [#y7008c56]
通常の &lt;form&gt; タグを生成する場合に使用する。

-全体更新が多数を占める場合 (アクションメソッドの結果として、View 全体を更新する場合)。

-画面リフレッシュにより、リクエスト・レスポンスのステータスを明確にしたい場合。

***Ajax.BeginForm [#b0eaca55]
&lt;form&gt; タグに Ajax リクエスト用の属性が付与され、リクエストが非同期で処理される。

-部分更新が多数を占める場合 (アクションメソッドの結果として、View の一部分のみを更新する場合)。

-サーバー側処理が非常に重い業務の場合 (Ajax は非同期処理のため)。

-画面入力状態を保持したまま POST 送信したい場合
--ViewState がサポートされない MVC で、情報復元処理を割愛したい場合。

-リクエスト・レスポンスのサイズを削減して、性能向上を図りたい場合。

-画面リフレッシュによる、画面のちらつきなどをなくしたい場合。

***参考 [#q5e2db0d]
-ajaxの使いどころ~
http://okwave.jp/qa/q8112782.html

-Html.BeginForm() vs Ajax.BeginForm() in MVC3 - CodeProject~
http://www.codeproject.com/Articles/429164/Html-BeginForm-vs-Ajax-BeginForm-in-MVC3

**From タグの切り方 [#j1aac0c9]
画面設計によるが、以下を考慮する。
-1 View に対して 1 Form？
-1 View に対して複数 Form？

複数 Form の場合は Form をネストさせないこと。~
＃HTML の仕様で Form のネストは禁止されている。

**Viewヘルパーの使い分け [#f9430132]
***HTMLヘルパー（Html.xxxx と Html.xxxxFor [#c3297525]
-Html.xxxxFor~
--ポスト時にModelデータを復元する場合。
--例えばエラー発生時に、自画面の再表示（≒ポストバック）をする場合。

-Html.xxxx~
上記以外は、Html.xxxxで良い。

***GridView的な一覧（グリッド）生成用のViewヘルパー [#j629d667]
ASP.NET MVC で一覧（グリッド）のある View を作成する場合、以下の 3 種類が考えられる。

-[[WebGrid>https://msdn.microsoft.com/ja-jp/library/system.web.helpers.webgrid.aspx]] クラスを使用する~
ソートやページングが容易に実装できる反面、レンダリング部分は多少ブラックボックスになる

-&lt;table&gt; タグを自前で生成し、&lt;tr&gt; タグをループで実装する~
ASP.NET の Repeater コントロールのような処理の実装方法（Razorなぶん楽）。

-jqGrid など、OSS の JavaScript ライブラリを使用する。

***テンプレートに対応したViewヘルパー [#s2b28732]

-Viewヘルパー
--EditFor
---HTMLヘルパーの第二引数でテンプレートを指定できる。
---UIHint属性で指定したテンプレートが使用される。~
属性の優先度は、UIHint属性 -> DataType属性 -> 実際のデータ型

--DisplayForModel、EditForModel
---Model単位にテンプレートを決定する。

-テンプレート名とテンプレート配置場所
--DisplayTemplates
---~/View/Shared/DisplayTemplates/DataType名 or Model名.cshtml
---~/View/Controller名/DisplayTemplates/DataType名 or Model名.cshtml
--EditorTemplates
---~/View/Shared/EditorTemplates/DataType名 or Model名.cshtml
---~/View/Controller名/EditorTemplates/DataType名 or Model名.cshtml

***カスタムViewヘルパー（カスタム・コントロールみたいな） [#uf401f54]

**画面遷移 [#ycae9af6]
[[モジュール化の要約>#j2c8410a]]で紹介した、
-[[スキャフォールディング方式>#td62a820]]、
-[[View ごとに Controller を作成する方式>#se3008cd]]

共に、画面遷移の処理フローは以下のようになる。

***処理フロー [#t080759a]
+View から、対応する Controller にリクエストを送る
+Controller はリクエストを受け付け、Model に処理を指示する
+Model は業務ロジックを実行し、データを更新する
+Controller は View に表示を指示する

***実装方法 [#v4250bf7]
なお、1つの View が、任意の Controller にPOSTリクエストを送る~
[[ASP.NET Web Forms]]の「ページ間ポスティング」的な実装も書けるが、~
View と Controller の関係が複雑になるのでオススメしない。

従って、上記の「4.」で、''どの View に表示の指示をするか''によって、~
使用する ActionResult クラスを下記のように変える様に実装する。

-その Controller に対応する View に、表示を指示する場合
--ViewResult を使用する
-別の Controller に対応する View に、表示を指示する場合
--RedirectToActionResult または RedirectToRouteResult を使用する

*フォルダ構成 [#c0d7785c]
**既定のフォルダ構成 [#zdede462]
ASP.NET MVC のテンプレートには、グルーピングを目的に、既定で以下のフォルダ構成となっている。~
それぞれのフォルダには、以下のようにファイルを配置することが推奨されている。

|フォルダ名|配置されるファイル|備考|h
|App_Start|起動時に、初期設定を行うモジュール|-|
|Contents|CSS|BundleConfig が使用しているため、既定の CSS ファイルは変更しない|
|Controllers|Controller|-|
|Models|Model|-|
|Scripts|JavaScript|BundleConfig が使用しているため、既定の JavaScript ファイルは変更しない|
|Views|View|対応する Controller 名のフォルダ以下に、View のファイルを配置する&br;例&br;Views\(コントローラー名)\Index.cshtml|

**Area (区分)による分割 [#re760150]
Area (区分) とは、ASP.NET MVC アプリケーションを論理的に分割する仕組みのことである。~
(ASP.NET MVC プロジェクトをシステム全体とすると、Area ごとにサブシステム (のようなもの) に分割できる。~
App_Start のマップルートが追加されるような感じ、と理解すると分かりやすいかもしれない)

*情報の持ち回り・状態管理方式 [#i6db0cb0]

***ViewState [#l314ae9e]
利用不可能

必要であれば、

ViewState相当の状態保存処理を独自実装する必要がある~
（For付きのViewヘルパー（Html.xxxxFor）を使用する）。

***Hidden [#a026afb5]
使用可能

***Session [#je17aeb2]
使用可能

*チェック処理方式 [#hc015ceb]
**クライアント [#i39f251f]
JavaScript でのチェック。~
[[jQuery Validation プラグイン>https://jqueryvalidation.org/]]なども使用可能。

**サーバ [#k1290bb8]
[こちら>ASP.NET MVCの用語#za7f960c]を参照。

*スキャフォールディング [#e701b267]
**概要 [#g794a3ae]
スキャフォールディング（Scaffolding）。~
日本語で「足場」、「骨組み」の意味。

-M（Model）を元に、
--C（Controller）
---CRUDを行うAction Method
--V（View）

>を自動で生成する機能。

-通常、
--CRUDのAction Methodだけが自動生成される。
--ADO.NET [[Entity Framework]] によるデータ操作を行う場合、~
Action Methodに加えて View も自動生成できる。

-その他
--[[WebFormでもサポートされている>http://blog.shibayan.jp/entry/20130219/1361281202]]。

**M（Model） [#d93a335a]
-使用するModelを選択する。
-Modelの新規作成も可能

**C（Controller） [#jf4991ce]
-M（Model）の複数形 + Controllerという名称になる。

-Action Method
--Index
--Details
--Create
--Edit
--Delete

**V（View） [#te3ce747]
-[[Entity Framework]] を使用すると、以下のようにViewまで自動生成される。
-また、[[Entity Framework]] を使用しない場合も、個別に、~
Model Meta Dataを定義したModelを指定しView追加（スキャフォールディング）ができる。

|項番|View名|対応するAction Method名|使用されるTemplate名|h
|1|Index.cshtml|Index|List|
|2|Details.cshtml|Details|Details|
|3|Create.cshtml|Create|Create|
|4|Edit.cshtml|Edit|Edit|
|5|Delete.cshtml|Delete|Delete|

*Model Meta Dataを使用した開発 [#d39da4a0]
**[[チェック処理方式 - サーバ>#k1290bb8]] [#ya808897]
**[[スキャフォールディング>#e701b267]] [#ya2bec28]

*脆弱性 [#jd31de6d]
**サニタイジング [#m59baf7f]
-HTML ヘルパーを使用すると、自動的にサニタイジングが行われる。
-Model のプロパティを直接 View に表示する場合は、自前でのサニタイジングが必要。

**リクエスト検証 [#ra245005]
-requestValidationMode を MVC でも利用可能。~
http://stackoverflow.com/questions/6206540/what-does-requestvalidationmode-2-0-actually-do

*その他 [#e6da77d2]
**[[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 のAction Methodを呼び出す際の URL は以下のようになる。

 http://server/application/Controller/id

ASP.NET MVC と違い、Web API のルート定義にはAction Methodの指定がない。

Web API を使用した場合、リクエストの HTTP メソッドに応じて、~
以下のようにControllerのAction Methodが自動的に呼び出される。

|項番|HTTP メソッド|呼び出されるメソッド|h
|１|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 Identityの外部ログイン]]」を参照。

***シングルページ アプリケーション [#i6c5037c]
単一ページで構成される Ajax アプリケーション。~
HTML5 / CSS や、各種 JavaScript ライブラリを使用することで、UX の向上、マルチデバイス対応が可能となる。~
シングルページ アプリケーションでは、クライアントサイドは各種 JavaScript ライブラリを使用してデータ操作を行い、サーバサイドは Web API を使用して RESTful にAction Methodを実行する。~
「シングル ページ アプリケーション」テンプレートを使用すると、既定で以下の JavaScript ライブラリが使用できる。

|項番|JavaScript ライブラリ|説明|h
|１|jQuery|JavaScript のコーディングを支援するライブラリ|
|２|jQuery UI|jQuery をベースとした UI ライブラリ|
|３|jQuery Validate|HTML フォームの入力検証を行う jQuery プラグイン|
|４|knockout.js|JavaScript による MVVM (Model-View-ViewModel) フレームワーク|
|５|modernizr.js|HTML5/CSS のブラウザ対応状況を調査するためのライブラリ|

----
Tags: [[:ASP.NET MVC]]
ASP.NET MVCの利用方法 のバックアップソース(No.16)
