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

目次 †

↑

概要 †

↑

MVC †

MVCの基本的な考え方

↑

M（Model）に実装される処理 †

Modelには、

がある。

↑

V（View）に実装される処理 †

View ＝ 画面表示のための処理。

↑

C（Controller）に実装される処理 †

M（Model）→（Bean≒M）→V（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でリクエストを送信した場合、ルート定義にしたがい、ページハンドラは

と判断し、Products コントローラの Index アクションを呼び出し、アクションの引数として "1" を渡す。

↑

ビューエンジン †

Webページのビューエンジンには以下の2つのものがある。

↑

ASPX †

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

↑

Razor †

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

↑

HTMLヘルパー †

従来の 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? †

BeginForm?には以下の2つのものがある。

↑

Html.BeginForm?の特徴 †

↑

Ajax.BeginForm?の特徴 †

↑

スキャフォールディング †

スキャフォールディング（Scaffolding）

↑

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

↑

ASP.NET MVC 4 の新機能 †

↑

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

テンプレートが追加された。

↑

モバイルデバイス対応 †

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 のブラウザ対応状況を調査するためのライブラリ
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS