[[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的なクラス がある。 **V(View)に実装される処理 [#ad9a7d3d] View = 画面表示のための処理。 -マスタページ的なViewと、 -全体View -部分Viewがある。 **C(Controller)に実装される処理 [#h99848ae] M(Model)→(Bean≒M)→V(View)呼び出し。 *ルーティング [#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] Webページのビューエンジンには以下の2つのものがある。 **ASPX [#u5044497] 従来の ASP.NET と同様、式やコードブロックを <% ~ %> で囲む記述形式。~ View の拡張子も、従来の ASP.NET と同様、「*.aspx」で表される。 **Razor [#id4ef38b] ASP.NET MVC 3 で登場したビューエンジン。~ 式やコードブロックの先頭に「@」を付与する記述形式。~ View の拡張子は、C# の場合は「*.cshtml」、VB の場合は「*.vbhtml」で表される。 *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| なお、ボタンを生成する HTML ヘルパーはないため、直接 <input type="button"> または <input type="submit"> を記述する。 *マスターページ [#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には以下の2つのものがある。 **Html.BeginFormの特徴 [#w59fdfea] -従来のASPなどでも採用されていたMVC方式を同じ仕組み。 -リクエスト・レスポンスの度に、画面全体を再描画する。 -ViewState相当の状態保存処理を独自実装する必要がある。 **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 のブラウザ対応状況を調査するためのライブラリ| *参考 [#q9d096e2] **連載:ASP.NET MVC入門 [#o959203d] ***MVC 1 [#jce05f61] Insider.NET ASP.NET MVC入門 - @IT~ http://www.atmarkit.co.jp/ait/subtop/features/dotnet/aspnetmvc_index.html -第1回 ASP.NET MVCフレームワーク 基本のキ --1.ASP.NET MVCとは?/ASP.NET MVCを利用するための準備 --2.Hello, Worldアプリケーションを作成する(1) --3.Hello, Worldアプリケーションを作成する(2) --4.ユーザー・パラメータを受け取る/アクション・メソッドでポスト・データの取得 --5.入力フォームに検証機能を追加する -第2回 スキャフォールディング機能で軽々DB連携アプリケーション --1.Entity Dataモデルを作成/コントローラ・クラスを作成 --2.Indexアクション・メソッド&ビューを定義 --3.Detailsアクション・メソッド&ビューを定義/ビューの部品化 --4.Createアクション・メソッド&ビューを定義 --5.Editアクション・メソッド&ビューを定義 -第3回 ActionResultオブジェクトでアクション操作も自由自在 --1.ActionResultオブジェクトとは/ViewResult/RedirectToRouteResult --2.ContentResultオブジェクト --3.JsonResultオブジェクト --4.artialViewResultオブジェクト --5.JavaScriptResultオブジェクト/FileResultオブジェクト -第4回 フィルタ属性による認証/キャッシュ/セキュリティ対策の実装 --1.ページ・キャッシング機能を有効化する:OutputCache属性 --2.プリケーションに認証機能を追加したい:Authorize属性 --3.カスタム・エラー・ページを有効化する:HandleError属性 --4.HandleError属性のプロパティ --5.妥当性を検証:ValidateInput属性/CSRF対策:ValidateAntiForgeryToken属性 ***MVC 3 [#pe325b3a] 連載:ASP.NET MVC入門【バージョン3対応】 - @IT~ http://www.atmarkit.co.jp/fdotnet/aspnetmvc3/index/ -第0回 Webアプリケーション・フレームワークの新たな選択肢 --1.ASP.NET概論 --2.いま、いずれのフレームワークを学ぶべきか --3.WebフォームもASP.NET MVCも基盤は共通 -第1回 Controller-View開発のキモを押さえる --1.ASP.NET MVC 3を利用するための準備/Hello, Worldアプリを作成 --2.コントローラ・クラスを作成する --3.ビューを作成する/サンプルの実行/まとめ -第2回 Entity Frameworkコード・ファーストでモデル開発 --1.EF 4.1のインストール/モデル・オブジェクトを作成する --2.コンテキスト・クラス/DB接続文字列の準備/イニシャライザ --3.スキャフォールディング機能を利用しよう/サンプルの実行 -第3回 モデル・バインドとアノテーション検証の実装 --1.データ登録の基本/Createアクション・メソッド/ビュー・スクリプト --2.検証機能の実装/エンティティに検証ルールを追加 --3.ビュー・スクリプトでエラー・メッセージを表示 -第4回 検証属性の自作とクラス・レベルのモデル検証 --1.自作の検証属性を定義する(サーバサイド編) --2.自作の検証属性を定義する(クライアントサイド編) --3.複数プロパティをまたがった検証を実装する -第5回 新しいビュー・エンジン「Razor」の基本を理解しよう --1.ASPXとの比較で理解するRazor文法(1) --2.ASPXとの比較で理解するRazor文法(2) --3.ビュー開発を効率化する「ビュー・ヘルパー」(1) --4.ビュー開発を効率化する「ビュー・ヘルパー」(2) -第6回 テンプレート機能でビュー開発を効率化 --1. モデルを自動認識する高機能なビュー・ヘルパー(DisplayFor/EditorFor) --2. 独自の表示/編集テンプレートを準備/モデル単位にテンプレート適用 --3. ビュー・ヘルパーの自作/拡張メソッドとしてビュー・ヘルパーを定義 -第7回 レイアウト/部分ビューでアプリ共通のデザインを定義 --1.ヘッダ/フッタ/メニューを共通化する - レイアウト --2.レイアウトに複数のコンテンツ領域を設置/レイアウトを入れ子に配置 --3.部分ビューの基本 --4.アクションを伴う部分ビュー呼び出し/子アクションでフラグメント・キャッシュ -最終回 テスト自動化でアプリケーションの品質向上41.単体テストの基本を理解する --1.単体テストの基本を理解する --2.モック・ライブラリMoqの利用方法 --3.データベース・アクセスを伴うテスト(1) --4.データベース・アクセスを伴うテスト(2) ***MVC 4 [#j4edb29e] 特集:ASP.NET 4.5新機能概説(3):ASP.NET MVCの新機能 (1-6) - @IT -http://www.atmarkit.co.jp/ait/articles/1304/23/news056.html -http://www.atmarkit.co.jp/ait/articles/1304/23/news056_2.html -http://www.atmarkit.co.jp/ait/articles/1304/23/news056_3.html -http://www.atmarkit.co.jp/ait/articles/1304/23/news056_4.html -http://www.atmarkit.co.jp/ait/articles/1304/23/news056_5.html -http://www.atmarkit.co.jp/ait/articles/1304/23/news056_6.html **MSDN [#of583417] ***ASP.NET デベロッパー センター [#k2e0a3d9] -ASP.NET MVC~ http://msdn.microsoft.com/ja-jp/asp.net/aa336581.aspx --ASP.NET MVC のチュートリアル~ http://msdn.microsoft.com/ja-jp/asp.net/ff630143.aspx --連載! コードで学ぶ ASP.NET MVC アプリケーション開発入門 Code Recipe MSDN~ http://msdn.microsoft.com/ja-jp/asp.net/gg490787 ***ASP.NET および Visual Studio [#vf5d9e30] http://msdn.microsoft.com/ja-jp/library/dd566231.aspx -ASP.NET MVC 2~ http://msdn.microsoft.com/ja-jp/library/dd394709(v=vs.100).aspx -ASP.NET MVC 3~ http://msdn.microsoft.com/ja-jp/library/gg416514(v=vs.98).aspx -ASP.NET MVC 4 コンテンツ マップ~ http://msdn.microsoft.com/ja-jp/library/gg416514(v=vs.108).aspx ***その他 [#v8b129c6] -ASP.NET MVCフレームワーク 正式版 入門:CodeZine~ http://codezine.jp/article/corner/295