![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
Open棟梁Project - マイクロソフト系技術情報 Wiki
MVCの基本的な考え方
Modelには、
がある。
View ＝ 画面表示のための処理。
「M（Model）」を呼び出して「（Bean≒M）」を取得して「V（View）」呼び出す。
非同期コントローラを使用すると、async/awaitを使用し、Webサーバのスレッド枯渇を防ぐことができる。
図から、リクエスト処理開始時とレスポンス処理終了時のスレッドが変わることが解る。
後者のスレッドはWebサーバから独立したスレッドプールから取得する。
複雑なのでオーバーヘッドがある。
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 アクションを呼び出し、アクションの引数として "1" を渡す。
Webページのビューエンジンには以下の2つのものがある。
従来の ASP.NET と同様、
式やコードブロックを コード・ナゲット（<% ～ %>）で囲む記述形式。
View の拡張子も、従来の ASP.NET と同様、「*.aspx」で表される。
ASP.NET MVC 3 で登場したビューエンジン。
式やコードブロックの先頭に「@」を付与する記述形式で、
冗長なコード・ナゲット（<% ～ %>）が不要になる。
View の拡張子は、C# の場合は「*.cshtml」、VB の場合は「*.vbhtml」で表される。
ControllerからViewにデータを渡すときに使用する入れ物的なモノ。
従来の 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? |
ヘッダーやフッター、サイドメニューなどをアプリケーションで共通的に表示させたい場合、マスターページを使用してレイアウトを共通化させることができる。マスターページには、画面ごとに個別実装が必要な箇所を定義する。
メインのコンテンツ領域以外に、画面ごとに個別実装が必要な箇所を定義する場合、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通信の結果をページの一部に反映させるようなケースで利用することになるだろう。
スキャフォールディング（Scaffolding）
テンプレートが追加された。
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 のアクションを呼び出す際の 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)
{
}
}
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 アカウントによる認証 |
単一ページで構成される 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 のブラウザ対応状況を調査するためのライブラリ |
