Open棟梁Project - マイクロソフト系技術情報 Wiki

目次

概要

ルーティング

あらかじめ定義されたルート定義 (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 アクションを呼び出し、アクションの引数として "1" を渡す。

スキャフォールディング

ASP.NET MVC のコントローラクラスに対して、データベースの CRUD 操作を行うアクションメソッドのひな形を自動生成する機能。ADO.NET Entity Framework によるデータ操作を行う場合、アクションメソッドに加えて View も自動生成できる。

Webページのビューエンジン

ASPX

従来の ASP.NET と同様、式やコードブロックを <% ~ %> で囲む記述形式。
View の拡張子も、従来の ASP.NET と同様、「*.aspx」で表される。

Razor

ASP.NET MVC 3 で登場したビューエンジン。
式やコードブロックの先頭に「@」を付与する記述形式。
View の拡張子は、C# の場合は「*.cshtml」、VB の場合は「*.vbhtml」で表される。

ASPX と Razor の記述方法の比較

ASPXRazor
インライン式 (プロパティの値を表示する場合など)<%: 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

HTMLヘルパー

従来の ASP.NET では、ASP.NET Web コントロールを使用して、ラベルやテキストボックスなどのコントロールを表示していたが、ASP.NET MVC では、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"> を記述する。

Html.xxxx と Html.xxxxFor の使い分け

Html.TextBox?("Category") のように、プロパティを文字列で指定する場合は、"For" がつかない HTML ヘルパーを使用する。
Html.TextBoxFor?(model => model.Category) のように、プロパティをラムダ式で指定する場合は、"For" で終わる HTML ヘルパーを使用する。

マスターページによる画面共通化

ヘッダーやフッター、サイドメニューなどをアプリケーションで共通的に表示させたい場合、マスターページを使用してレイアウトを共通化させることができる。
マスターページには、画面ごとに個別実装が必要な箇所を定義する。ビューエンジンが 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」で囲む必要がある。

ADO.NET Entity Framework のコードファースト機能

ADO.NET Entity Framework 4.1 で登場した機能。ASP.NET MVC のモデルに POCO でデータ構造を定義すると、その定義に従ってデータベースにテーブルが作成される。ソースコードのみで完結し、Entity Framework の Entity Data Model (EDM) などを明示的に作成する必要がなくなるため、より迅速な開発が可能となる。
(モデルクラスへのデータ構造の定義が、そのままデータベースのテーブル設計となる)

ASP.NET MVC 4 の新機能

プロジェクトテンプレートの追加

Facebook キャンバスアプリを簡単に作成するための「Facebookアプリケーション」テンプレートや、シングルページ アプリケーションを作成するための「シングル ページ アプリケーション」テンプレートが追加された。

モバイルデバイス対応

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」が使用されるようになる。

Web API

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 対応

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 ライブラリ説明
jQueryJavaScript のコーディングを支援するライブラリ
jQuery UIjQuery をベースとした UI ライブラリ
jQuery ValidateHTML フォームの入力検証を行う jQuery プラグイン
knockout.jsJavaScript による MVVM (Model-View-ViewModel?) フレームワーク
modernizr.jsHTML5/CSS のブラウザ対応状況を調査するためのライブラリ

ASP.NET、ASP.NET MVC選択基準

どのような時に、ASP.NET MVCを採用するか?

ASP.NET MVCのアーキテクチャ?

ASP.NET MVCのアーキテクチャを理解する。

ファーストステップ

以下を消化することで学ぶことができる。

参考

連載:ASP.NET MVC入門

バージョン1.0

Insider.NET ASP.NET MVC入門 - @IT
http://www.atmarkit.co.jp/ait/subtop/features/dotnet/aspnetmvc_index.html

バージョン3.0対応

連載:ASP.NET MVC入門【バージョン3対応】 - @IT
http://www.atmarkit.co.jp/fdotnet/aspnetmvc3/index/

MSDN

ASP.NET デベロッパー センター

ASP.NET および Visual Studio

http://msdn.microsoft.com/ja-jp/library/dd566231.aspx


トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS