Embed Size (px)
Citation preview
Visual Studio Do-It-Yourself シリーズ
第 18 回 ASP.NET MVC
著作権
このドキュメントに記載されている情報は、このドキュメントの発行時点におけるマクロソフトの見解を反映
したものです。マクロソフトは市場の変化に対応する必要があるため、このドキュメントの内容に関する責任
を問われないものとします。また、発行日以降に発表される情報の正確性を保証できません。
このホワトペーパーは情報提供のみを目的としています。明示、黙示、または法令に基づく規定に関わらず、
これらの情報についてマクロソフトはいかなる責任も負わないものとします。
この文書およびソフトウェゕを使用する場合は、適用されるすべての著作権関連の法律に従っていただくものと
します。このドキュメントのいかなる部分も、米国 Microsoft Corporation の書面による許諾を受けることな
く、その目的を問わず、どのような形態であっても、複製または譲渡することは禁じられています。ここでいう
形態とは、複写や記録など、電子的な、または物理的なすべての手段を含みます。ただしこれは、著作権法上の
お客様の権利を制限するものではありません。
マクロソフトは、この文書に記載されている事項に関して、特許、申請中特許、商標、著作権、および他の知
的財産権を所有する場合があります。別途マクロソフトのラセンス契約上に明示の規定のない限り、このド
キュメントはこれらの特許、商標、著作権、またはその他の知的財産権に関する権利をお客様に許諾するもので
はありません。
別途記載されていない場合、このドキュメントで使用している会社、組織、製品、ドメン名、電子メール ゕ
ドレス、ロゴ、人物、場所、出来事などの名称は架空のものです。実在する商品名、団体名、個人名などとは一
切関係ありません。
© 2010 Microsoft Corporation. All rights reserved.
Microsoft、Windows、Visual Studio、Visual Studio ロゴ、は、米国 Microsoft Corporation の米国および
その他の国における登録商標または商標です。他のすべての商標は、それぞれの所有者の財産です。
ASP.NET Do-It-Yourself 第 18 回は、ASP.NET MVC について学習します。ASP.NET MVC は、 .NET
Framework で利用できるもうひとつの Web ゕプリケーション フレームワークです。ASP.NET という名前こ
そ冠してはいるものの、その開発スタルは、従来の Web フォームとは大きく異なっており、まったく新しい
フレームワークであると考えた方が良いでしょう (ただし、セッションやメンバシップ、データベース ゕクセ
スなどの機能は、従来の ASP.NET の機能をそのまま利用できます)。ASP.NET 3.5 の追加フレームワークと登
場した ASP.NET MVC ですが、ASP.NET 4 ではいよいよ標準搭載され、追加での環境設定を行うことなく利用
できるようになりました。
本稿では、データベースから取得したデータをもとに一覧表を作成するサンプルを通じて、ASP.NET MVC の基
本的な開発の流れについて学びます。以下は、今回作成するサンプルの実行画面です。
なお、本稿のサンプルを利用するには、あらかじめサンプル データベースとして Northwind をセットゕップ
しておく必要があります。Northwind のダウンロード先、接続設定の追加方法については、第 4 回を参照して
ください。
■ASP.NET MVCとは？
ASP.NET (Web フォーム) は優れたフレームワークです。Visual Studio と連携することで、限りなくコーデゖ
ング レスで高度なゕプリケーションを実装できます。しかし、そんな ASP.NET にも問題がないわけではあり
ません。
・ UI 中心の開発モデルであるため、ビジネス ロジックの単体テストが困難
・ ポストバック、ビュー ステート、ベント ドリブンなど、非 .NET の Web 開発者にとっては聞き慣れ
ない概念が多い
・ サーバー コントロールが出力を自動生成するので、マークゕップを制御しづらく、CSS や JavaScript と
の親和性が低い
もちろん、これらの問題は ASP.NETの長所と裏表の関係にあります (たとえば、サーバー コントロールやビュ
ー ステートなどによって、開発者が HTML や HTTP を意識する局面が少なくなりますので、開発生産性が向
上しますし、Windows ゕプリケーション開発者にとっては ベント ドリブン モデルは親しみやすい開発モ
デルです)。一概に短所と断じることはできませんが、もしもこうした問題を強く感じているならば、ASP.NET
MVC の導入を検討すると良いでしょう。
ASP.NET MVC は、名前の通り、MVC (Model – View – Controller) モデルを基盤に据えたフレームワークで
す。MVC モデルとは、ゕプリケーションをその役割ごとに Model (ビジネス ロジック)、View (レゕウト)、
Controller (Model と View との橋渡し) と、明確に分離しようという設計モデルです。MVC モデルは、Java
や PHP、Ruby をはじめとした非 .NET 環境ではスタンダードな Web 開発モデルのひとつで、たとえば
Struts や Ruby on Rails、CakePHP などのフレームワークを利用したことがある開発者であれば、ごく直感
的に利用できます。また、ゕプリケーションがそれぞれの役割できちんと分離されていますので、単体テストが
やりやすいというメリットもあります。
■ASP.NET MVC プロジェクトを準備する
ASP.NET MVC ゕプリケーションを作成するには、メニューから [フゔル] - [新規作成] - [プロジェクト…]
を選択します。ASP.NET MVC では、いわゆる Web サト プロジェクトは利用できませんので、注意してく
ださい。
テンプレートとしては「ASP.NET MVC 2 Web ゕプリケーション」を選択し、名前、ソリューション名は「MyMvc」
としておきます。[OK] ボタンをクリックすると、次に [単体テスト プロジェクトの作成］ ダゕログが開き
ます。
ここではゕプリケーション プロジェクトの他に、単体テスト プロジェクトを作成するかどうかを設定します。
本稿では単体テストについては扱いませんので、[単体テスト プロジェクトを作成しない] を選択しておきまし
ょう。
上の図は、ASP.NET MVC プロジェクトの初期状態をソリューション エクスプローラーから確認したものです。
ASP.NET MVC プロジェクトでは、それぞれのフォルダに役割が与えられており、それぞれ対応するフゔルを
配置していきます。以下の表に、主なフォルダの役割をまとめます。
フォルダ名 配置する内容
Controllers リクエストを処理するコントローラー クラス
Models データを管理、操作するためのクラス
Views UI を表すフゔル (.aspx、.ascx、.master フゔルなど)
Scripts JavaScript のソースコード
Content 画像フゔルやスタルシートなど、静的なコンテンツ
その他、ASP.NET MVC プロジェクトにはデフォルトでさまざまなフゔルが含まれていますが、そのほとんど
はサンプル ゕプリケーションなので、Web.config や Global.asax など一部のフゔルを除いては削除しても
構いません。
■Model の準備
プロジェクトの内容が確認できたら、まずはデータ モデルを作成します。MVC の M (Model) に相当する部分
です。
データ モデルとは、データソースへのゕクセスを管理するためのコンテキスト オブジェクトと、取得したデー
タを格納するためのエンテゖテゖなどからなるオブジェクト群のことを言います。ASP.NET MVC で利用できる
データ モデルはさまざまですが、本稿では Entity Framework が提供するエンテゖテゖ データ モデルを前提
に作業を進めます。
エンテゖテゖ データ モデルを作成するには、ソリューション エクスプローラーから Models フォルダを右ク
リックし、[追加] - [新しい項目] を選択します。テンプレートには [ADO.NET Entity Data Model] を、名前
は Nowthwind.edmx とします。
[Entity Data Model ウゖザード] ダゕログが起動しますので、以下の表のように必要な情報を入力します。
ダイアログ 項目 設定値
モデルのコンテンツの選択 モデルに含めるコンテンツ データベースから生成
データ接続の選択 データ接続 (コンピュータ名)\sqlexpress.Northwind.dbo
エンテゖテゖ接続設定の名前 NorthwindEntities
データベースオブジェクト
の選択
モデルに含めるデータベースオ
ブジェクト
テーブル
モデルに外部キー列を含める チェック
モデル名前空間 NorthwindModel
ウゖザードを終了した後、デザナ画面に以下のようなモデルが生成されていれば、エンテゖテゖ データ モデ
ルは正しく生成できています。データ モデルを生成した後は、必ずプロジェクトをビルドするようにしてくだ
さい。さもないと、この後の操作で正しくモデルが認識されませんので、要注意です。
■Controller の準備
続いて、コントローラー クラスを定義します。コントローラー クラスは、クラゕントからのリクエストを処
理する役割のクラスです。MVC の C (Controller) に相当する部分です。
コントローラー クラスを作成するには、ソリューション エクスプローラー から Controllers フォルダを右ク
リックし、[追加] - [コントローラー…] を選択します。
[コントローラーの追加] ダゕログが表示されますので、[コントローラー名] に CustomerController と入力
します。「Customer」の部分は自由に決めることができますが、コントローラー クラスの名前は必ず「Controller」
で終わらなければならない点に注意してください。ASP.NET MVC では、コントローラー クラスの名前から
「Controller」を除いた部分をコントローラー名と見なします。つまり、ここでは Customer コントローラー
を定義しているという意味になります。
[Create、Update、Delete、および Details の各シナリオのゕクション メソッドを追加する] は、データの作
成や更新、削除のための骨組みとなるコードを自動生成するかを決めます。ここでは、この項目をチェックし、
コードの自動生成 (スキャフォールデゖング機能) を有効化します。
[OK] ボタンをクリックすると、以下のような CustomerController.cs が自動生成されることを確認してくだ
さい。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MyMvc.Controllers
{
public class CustomerController : Controller
{
//
// GET: /Customer/
public ActionResult Index()
{
return View();
}
...中略...
}
}
コントローラー クラスに含まれるパブリック メソッドのことを「ゕクションメソッド」と呼びます。個々のリ
クエストに対する具体的な処理は、このゕクション メソッドに記述します。スキャフォールデゖング機能を有
効にした場合、Index (一覧)、Details (詳細)、Create (新規作成)、Edit (編集)、Delete (削除) などのゕクシ
ョン メソッドが生成されているはずです。
本稿では、Index ゕクションに対してコードを追加しています (太字部分)。
using MyMvc.Models;
...中略...
public ActionResult Index()
{
var db = new NorthwindEntities();
return View(db.Customers);
}
NorthwindEntities クラスは、先ほど生成したデータ モデルに含まれるコンテキスト クラスです。Index ゕ
クションでは、コンテキスト クラスの Customers プロパテゖにゕクセスすることで、Customers テーブル
のすべてのレコードを取り出しているわけです。取得した Customers オブジェクトの集合 (正確には
IQueryable<Customers> オブジェクト) は、ゕクション メソッドの最後で View メソッドの引数として渡
すことで、対応するビュー スクリプトに渡されます。
■View の準備
ゕクション メソッドでの処理結果を受けて、最終的な出力を生成するのはビュー スクリプトの役割です。MVC
の残るひとつ、V (View) に相当します。
ビュー スクリプトを生成するには、ソース ビューでゕクション メソッドにカーソルを合わせた状態で右クリ
ックし、[ビューの追加…] を選択します。
[ビューの追加] ダゕログが表示されますので、表のように必要な項目を指定してください。
項目 設定値
ビュー名 Index
厳密に型指定されたビューを作成する チェック
ビュー データ クラス MyMVC.Models.Customers
ビュー コンテンツ List
マスター ページを選択する チェックしない
[ビュー名] は、ゕクション メソッドと同じ名前とするのが基本です。これによって、自動的にゕクション メ
ソッドとビュー スクリプトの紐付けが行われるためです (ビュー スクリプトは、「/View/コントローラー名/
ゕクション名.aspx」という名前で保存されます)。
[厳密に型指定されたビューを作成する] を有効にした場合、取得したデータ モデルをビューに関連付けます。
型指定することで、ビュー スクリプトで
・ 型キャストなどの手間を介さずに、データ モデルのプロパテゖにゕクセスできる
・ モデルに対するンテリセンス機能を有効にできる
などのメリットがあります。ビューのスキャフォールデゖング (自動生成) 機能を有効にする場合、型指定は必
須です。
[ビュー コンテンツ] には、自動生成するビューの種類を指定します。ここでは、List (一覧) を選択しています
が、その他にも Details (詳細)、Create (新規登録)、Edit (編集)、Delete (削除) などを選択できます。[マス
ターページを選択する] にチェックを入れることで、マスターページを適用することもできますが、本稿では無
効にしています。
[追加] ボタンをクリックして、ダゕログを閉じると、以上のようなビュー スクリプトが自動生成されます。
<%@ Page Language="C#"
Inherits="System.Web.Mvc.ViewPage<IEnumerable<MyMvc.Models.Customers>>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Index</title>
</head>
<body>
<table>
<tr>
<th></th>
<th>
CustomerID
</th>
<th>
CompanyName
</th>
...中略...
</tr>
<% foreach (var item in Model) { %>
<tr>
<td>
<%: Html.ActionLink("Edit", "Edit", new { id=item.CustomerID }) %> |
<%: Html.ActionLink("Details", "Details", new { id=item.CustomerID })%> |
<%: Html.ActionLink("Delete", "Delete", new { id=item.CustomerID })%>
</td>
<td>
<%: item.CustomerID %>
</td>
<td>
<%: item.CompanyName %>
</td>
...中略...
</tr>
<% } %>
</table>
<p>
<%: Html.ActionLink("Create New", "Create") %>
</p>
</body>
</html>
自動生成されたコードは、最低限このままでも動作しますので、ここでは特に編集はしません。いくつかのポ
ントのみ押さえておきましょう。
(1) コード埋め込みモデルが基本
ASP.NET MVCでは、原則としてサーバー コントロールは使用しません。<%...%>、<%=…%>、<%:…%>
などのコード ブロックを利用します。それぞれのブロックの意味は、以下の通りです。
ブロック 概要
<%...%> 指定されたコードを実行する
<%=… %> 指定された式を評価し、その結果を出力する
<%: …%> 指定された式を評価し、その結果を HTML エスケープした上で出力する
クロスサト スクリプテゖング対策の観点から、動的な出力は原則として <%=...%> ではなく、<%:…%>
を使って出力するようにしてください。
(2) モデルには Model プロパテゖでゕクセスできる
ビュー スクリプトに関連づいたデータ モデルには、Model プロパテゖでゕクセスできます。ここでは、
Customers オブジェクトの集合 (IEnumerable<MyMVC.Models.Customers>) が渡されているはずなので、
foreach ループで順に Customer オブジェクトを取り出し、そのプロパテゖを取得しているわけです。
(3) ビュー生成に役立つビュー ヘルパー
ビュー ヘルパーとは、ビュー スクリプトで利用できるメソッドのことで、フォーム要素やハパーリンクの生
成、エスケープ処理などの機能を提供します。ASP.NET MVC では、サーバー コントロールの代わりに、ビュ
ー ヘルパーを利用することで、ビュー開発を効率化できます。たとえば、Html.ActionLink メソッドもまた、
ビュー ヘルパーの一種です。
<%: Html.ActionLink("Edit", "Edit", new { id=item.CustomerID }) %> |
<%: Html.ActionLink("Details", "Details", new { id=item.CustomerID })%> |
<%: Html.ActionLink("Delete", "Delete", new { id=item.CustomerID })%>
というコードによって、以下のような出力を得ることができます。
<a href="/Customer/Edit/ALFKI">Edit</a> |
<a href="/Customer/Details/ALFKI">Details</a> |
<a href="/Customer/Delete/ALFKI">Delete</a>
■ゕプリケーションの実行
以上で、サンプルを実装する手順は完了です。プロジェクトをデバッグ実行し、ブラウザから
「http://localhost:3000/Customer/Index」のような URL でゕクセスすることで、以下の図のような結果が
得られることを確認してください (ポート番号は実行都度に変動します)。
「/Customer/Index」の部分は、「/コントローラー名/ゕクション名」に対応しています。このように、ASP.NET
MVCでは、それぞれのコンポーネントを決められた規則に従って命名することで、特別な設定をすることなく、
互いを紐付けし、呼び出すことができるのです。
■まとめ
今回は、ASP.NET 4で標準搭載された新しいフレームワーク ASP.NET MVC について紹介しました。もっとも、
「新しい」とは言っても、ASP.NET MVC は旧来の Web フォームを置き換えるものではありません。冒頭述べ
たように、Web フォームと ASP.NET MVC の長所 / 短所は裏表の関係にあるからです。
たとえば、これまでのWeb フォームによる開発になんら問題を感じておらず、慣れている開発者の方にとって
は、敢えて ASP.NET MVC を導入する意味はないでしょう。しかし、(たとえば) Java Struts のような MVC フ
レームワークの経験者が新たに .NET の世界に踏み込もうとするならば、ASP.NET MVC は有効な選択肢とな
るはずです。
それぞれの得手不得手を理解し、その上でその時どきの目的や環境に応じて、両者を使い分けるようにしてくだ
さい。
