Open棟梁Project - マイクロソフト系技術情報 Wiki
MVCの基本的な考え方
Modelには、
がある。
View = 画面表示のための処理。
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でリクエストを送信した場合、
http://(Server FQDN名)/(Controller名)/(Action Method名)/(id 値)
ルート定義に従い、ページハンドラは
と判断し、
Products Controllerの Index Action Methodを呼び出し、Action Methodの引数として "1" を渡す。
Action Method名と id 値は省略可能で、Action Method名を省略すると、Index Action Methodが実行される。
マップの方法
Action Methodの結果として、Action Resultを返す。
詳細はAction Resultを参照。
MVC 4 以降であれば、以下のように書ける。
public Task<ActionResult> Index()
public async Task<ActionResult> Index()
Controller のAction Methodは、View の選択と指示として、
ActionResult クラスのオブジェクトを返す必要がある。
Action Methodで、
return View();
と、Viewを指定しないoverloadで呼び出すと、
/Views/コントローラ名/アクション名.cshtml
を呼び出す。
ActionResult? クラスには、以下の種類が存在する。
種類 | 概要・用途 | コード例(ヘルパー・メソッド) |
ViewResult? | 指定された全体 View の表示を指示する。 基本的には HTML.BeginForm の場合に使用する。 | return View("Result"); ("Result" は全体 View 名) |
PartialViewResult? | 指定された部分 View の表示を指示する。 基本的には Ajax.BeginForm の場合に使用する。 | return PartialView?("Result"); ("Result" は部分 View 名) |
RedirectResult? | 指定した URL にリダイレクトする場合に使用する。 | return Redirect("http://www.wings.msn.to/"); |
RedirectToActionResult? | 指定した Controller, Action にリダイレクトする場合に使用する。 | return RedirectToAction?("Index"); |
指定したルート名にリダイレクトする場合に使用する。 | return RedirectToRoute?("View Product", new { ProductName? = <商品名> }); | |
FilePathResult? | 指定されたパスの内容をファイルとして出力 | return File("C:\temp\file.zip", "application/zip", "file.zip"); |
FileContentResult? | byte配列の内容をファイルとして出力 | return File(bytes, "application/pdf"); |
FileStreamResult? | ストリームの内容をファイルとして出力 | return new FileStreamResult?(fileStream, "application/pdf"); |
ContentResult? | プレーン・テキストを出力(Ajax通信) | Return Content("こんにちは、世界!", "text/plain"); |
JsonResult? | 指定されたコンテンツをJSONとして出力(Ajax通信) | return Json(JsonConvert?.SerializeObject?(result), JsonRequestBehavior?.AllowGet?); |
JavaScriptResult? | 指定されたコンテンツをJavaScriptスクリプトとして出力 | return JavaScript(code); |
HttpUnauthorizedResult? | 承認の失敗時にHTTP応答コード「401 Unauthorized」をセット | - |
EmptyResult? | 何もしない | - |
Viewではなく、HTTP状態コードを返す。
Webページのビューエンジンには以下の2つのものがある。
従来の ASP.NET と同様、
式やコードブロックを コード・ナゲット(<% ~ %>)で囲む記述形式。
View の拡張子も、従来の ASP.NET と同様、「*.aspx」で表される。
ASP.NET MVC 3 で登場したビューエンジン。
式やコードブロックの先頭に「@」を付与する記述形式で、
冗長なコード・ナゲット(<% ~ %>)が不要になる。
View の拡張子は、C# の場合は「*.cshtml」、VB の場合は「*.vbhtml」で表される。
従来の ASP.NET では、ASP.NET Web コントロールを使用して、
ラベルやテキストボックスなどのコントロールを表示していたが、
ASP.NET MVC では、主に以下のような Viewヘルパーが使用できる。
項番 | HTMLタグ | Viewヘルパー |
1 | フォーム <form> | Html.BeginForm? または Ajax.BeginForm? |
2 | リンク <a> | Html.ActionLink? |
3 | テキストボックス <input type="text"> | Html.TextBox? または Html.TextBoxFor? |
4 | テキストエリア <textarea> | Html.TextArea? または Html.TextAreaFor? |
5 | パスワード <input type="password"> | Html.Password または Html.PasswordFor? |
6 | チェックボックス <input type="checkbox"> | Html.CheckBox? または Html.CheckBoxFor? |
7 | ドロップダウンリスト <select> | Html.DropDownList? または Html.DropDownListFor? |
8 | リストボックス <select> | Html.ListBox? または Html.ListBoxFor? |
9 | ラジオボタン <input type="radio"> | Html.RadioButton? または Html.RadioButtonFor? |
10 | 隠しフィールド <input type="hidden"> | Html.Hidden または Html.HiddenFor? |
Html.xxxx と Html.xxxxFor の2種類のHTMLヘルパーがある。
ただし、HTTP を経由しての双方向バインディングになるので、
処理方式的には、以下のような処理シーケンスになる。
ヘッダーやフッター、サイドメニューなどをアプリケーションで共通的に表示させたい場合、
マスターページを使用してレイアウトを共通化させることができる。
マスターページには、画面ごとに個別実装が必要な箇所を定義する。
return View("Viewスクリプト名", "Layoutスクリプト名");
メインのコンテンツ領域以外に、画面ごとに個別実装が必要な箇所を定義する場合、
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> }
で囲む必要がある。
BeginForm?には以下の2つのものがある。
その性質上、Ajax通信の結果をページの一部に反映させるようなケースで利用することになるだろう。
ControllerからViewにデータを渡すときに使用する入れ物的なモノ。
ModelState?・・・
スキャフォールディング(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 |
テンプレートが追加された。
ASP.NET MVC 4 で追加された「モバイル アプリケーション」テンプレートを使用して、モバイルデバイス向けアプリケーションを作成できる。このテンプレートでは、jQuery Mobile をベースとしており、タッチ操作に最適化した UI を構築できる。
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」が使用されるようになる。
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) { } }
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? クラスには、
各サービスに応じて、アカウント認証を行うためのメソッドが用意されている。
項番 | メソッド | 処理内容 |
1 | RegisterFacebookClient? | Facebook アカウントによる認証 |
2 | RegisterGoogleClient? | Google アカウントによる認証 |
3 | RegisterLinkedInClient? | LinkedIn? アカウントによる認証 |
4 | RegisterMicrosoftClient? | Microsoft アカウントによる認証 |
5 | RegisterTwitterClient? | Twitter アカウントによる認証 |
6 | RegisterYahooClient? | Yahoo アカウントによる認証 |
単一ページで構成される 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 MVC