Open棟梁Project - マイクロソフト系技術情報 Wiki
「ASP.NET MVCの利用方法」は
「ASP.NET MVCの用語」と比べて、
少々高度な応用的トピックをまとめています。
まず、Model と View と Controller の役割について整理する。
Model (0..1) <---> (1) View
View が、Model が保持するデータを何も表示しない状態。(静的なページなど?)
View が、Model が保持するデータを参照し、ユーザーに表示している状態。
ただし、View が参照できるのは「Model のプロパティ」のみであり、View から直接 Model のメソッドが呼ぶことはしない。
View (1..*) <---> (1) Controller
1 つの View に対して、1 つの Controller を対応させる考え方。
その View からは、対応する Controller へのみリクエストを送る。
Controller の処理の結果は、対応する View にのみ指示を送る、というもの。
Controller の処理の結果を、別の View に表示させたい場合は、
Controller.RedirectToAction? メソッドなどを使用して、その View に対応した Controller に処理をリダイレクトする。
乱暴な言い方をすれば、従来の ASP.NET の WebForm? に近い考え方、と言えるかもしれない。
複数の View に対して、1 つの Controller を対応させる考え方。
たとえば、受注処理を行うアプリケーションを考えると、「受注作成画面」・「受注内容更新画面」・「受注削除画面」など、
複数の View に分かれていても、同じ「受注」業務=受注エンティティに関するリクエストは 1 つの Controller が受け付ける、という考え方。
CRUD を 1 つの View で行うか?View を分けるか?など、画面設計にも関係するので、メリット/デメリットを考慮の上、どちらを採用するかを決定する。
モジュール化の要約で紹介した、
何れかの方針に合わせて、Controllerを作成する。
Action Methodには、特定の HTTP メソッドのみを受け入れる属性を付与することができる。
AcceptVerbs? 属性([AcceptVerbs?(HttpVerbs?.Post)] 等)が用意されていたが、
MVC 2 からはHttpGet?, HttpPost?, HttpPut?, HttpDelete?という4つの属性が追加された。
なお、メソッド属性を指定しなかった場合、
そのAction Methodはすべての HTTP メソッドを受け入れる。
Action Method名と、外部に公開するAction Nameとを別にする。
例えば
CSRF対策に使用する。
@using (Html.BeginForm()) { @* トークンを埋め込む *@ @Html.AntiForgeryToken() }
// トークンを検証する [HttpPost, ActionName("Delete")] [ValidateAntiForgeryToken] public ActionResult DeleteConfirmed() { ・・・ }
モジュール化の考え方のように、Model には 2 つの意味がある。
テンプレート・ヘルパーと呼ばれる(System.ComponentModel?.DataAnnotations?)。
ViewやControllerのスキャフォールディング生成の動作を制御する属性。
型情報
[DataType(DataType.XXXX)]
表示名(Label表示用のViewヘルパーに使用される)
フォーマットの指定。
[DisplayFormat(DataFormatXXXX="YYYY")]
検証属性については、コチラを参考にしてください。
View には、Model のプロパティ参照用、if 文や for 文などの制御用にサーバー処理を埋め込むことができる。
サーバー処理の記法に、Razer 構文、ASPX 構文がある。
ASPX | Razor | |
インライン式 (プロパティの値を表示する場合など) | <%: Model.Property1 %> | @Model.Property1 |
インライン式 (エスケープ処理をスキップし、プロパティの値をそのまま表示する場合) | <%= Model.Property1 %> | @Html.Raw(Model.Property1) |
コードブロック (ロジックを直接 View に記述する場合) (C#) | <% string str = "あいうえお"; %> | @{ string str = "あいうえお"; } |
コードブロック (ロジックを直接 View に記述する場合) (VB) | <% Dim str As String = "あいうえお" %> | @Code Dim str As String = "あいうえお" End Code |
ASP.NET MVC には、<form> タグを生成する Viewヘルパーが 2 種類ある。
BeginForm? ヘルパーは引数にコントローラー名、アクション名が付与でき、指定したアクションメソッドにリクエストを送ることができる。
通常の <form> タグを生成する場合に使用する。
<form> タグに Ajax リクエスト用の属性が付与され、リクエストが非同期で処理される。
画面設計によるが、以下を考慮する。
複数 Form の場合は Form をネストさせないこと。
#HTML の仕様で Form のネストは禁止されている。
ASP.NET MVC で一覧(グリッド)のある View を作成する場合、以下の 3 種類が考えられる。
タイムスタンプ型など、ユーザに見えない情報だが
内部処理に必要な情報を引き継ぐ場合に使用する。
モジュール化の要約で紹介した、
共に、画面遷移の処理フローは以下のようになる。
なお、1つの View が、任意の Controller にPOSTリクエストを送る
ASP.NET Web Formsの「ページ間ポスティング」的な実装も書けるが、
View と Controller の関係が複雑になるのでオススメしない。
従って、上記の「4.」で、どの View に表示の指示をするかによって、
使用する ActionResult? クラスを下記のように変える様に実装する。
「モバイル アプリケーション」テンプレートを使用して、
モバイルデバイス向けアプリケーションを作成できる。
このテンプレートでは、jQuery Mobile をベースとしており、
タッチ操作に最適化した UI を構築できる。
Bootstrapによるレスポンシブデザインに頼らず、
PC 向けサイト、モバイル向けサイトの画面を分けるアプローチ。
protected void Application_Start() { (中略) DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone ") { ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf("iPhone ", StringComparison.OrdinalIgnoreCase) >= 0) }); }
この時、
iPhone 向けのレイアウトを定義すると、
http://server/application/Controller/Index/id
という同じ URL に対し、
ASP.NET MVC のテンプレートには、グルーピングを目的に、既定で以下のフォルダ構成となっている。
それぞれのフォルダには、以下のようにファイルを配置することが推奨されている。
フォルダ名 | 配置されるファイル | 備考 |
App_Start | 起動時に、初期設定を行うモジュール | - |
Contents | CSS | BundleConfig? が使用しているため、既定の CSS ファイルは変更しない |
Controllers | Controller | - |
Models | Model | - |
Scripts | JavaScript | BundleConfig? が使用しているため、既定の JavaScript ファイルは変更しない |
Views | View | 対応する Controller 名のフォルダ以下に、View のファイルを配置する 例 Views\(コントローラー名)\Index.cshtml |
Area (区分) とは、ASP.NET MVC アプリケーションを論理的に分割する仕組みのことである。
(ASP.NET MVC プロジェクトをシステム全体とすると、Area ごとにサブシステム (のようなもの) に分割できる。
App_Start のマップルートが追加されるような感じ、と理解すると分かりやすいかもしれない)
利用不可能
必要であれば、
ViewState?相当の状態保存処理を独自実装する必要がある
(For付きのViewヘルパー(Html.xxxxFor)を使用する)。
使用可能
使用可能
項番 | 属性 | 概要 |
1 | Required() | 必須入力 |
2 | StringLength?(int maxLength, int minLength, string errorMessage) | MaxLength?と同じ |
3 | MaxLength?(max) | 文字列の最大長 |
4 | MinLength?(min) | 文字列の最小長 |
5 | Range(min, max) | 範囲 |
6 | Required | 必須入力 |
7 | Required | 必須入力 |
DataType属性も検証属性として使用される模様。
以下のHPが良く纏まっている。
Action メソッド内で個別にチェックロジックを実装するか、
Model Meta Dataを使用したチェックが可能。
スキャフォールディング(Scaffolding)。
日本語で「足場」、「骨組み」の意味。
を自動で生成する機能。
エンティティ間の関連(アソシエーション)を表す。
項番 | View名 | 対応するAction Method名 | 使用されるTemplate名 |
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 |
テンプレートが追加された。
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 メソッド | 呼び出されるメソッド |
1 | GET | "Get" で始まる名前のメソッド |
2 | POST | "Post" で始まる名前のメソッド |
3 | PUT | "Put" で始まる名前のメソッド |
4 | 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) { } }
単一ページで構成される Ajax アプリケーション。
HTML5 / CSS や、各種 JavaScript ライブラリを使用することで、UX の向上、マルチデバイス対応が可能となる。
シングルページ アプリケーションでは、クライアントサイドは各種 JavaScript ライブラリを使用してデータ操作を行い、サーバサイドは Web API を使用して RESTful にAction Methodを実行する。
「シングル ページ アプリケーション」テンプレートを使用すると、既定で以下の JavaScript ライブラリが使用できる。
項番 | JavaScript ライブラリ | 説明 |
1 | jQuery | JavaScript のコーディングを支援するライブラリ |
2 | jQuery UI | jQuery をベースとした UI ライブラリ |
3 | jQuery Validate | HTML フォームの入力検証を行う jQuery プラグイン |
4 | knockout.js | JavaScript による MVVM (Model-View-ViewModel?) フレームワーク |
5 | modernizr.js | HTML5/CSS のブラウザ対応状況を調査するためのライブラリ |
Tags: :ASP.NET, :ASP.NET MVC