Visual Studio Do-It-Yourself シリーズ第 18 回 ASP.NET MVC

Size: px

Start display at page:

Download "Visual Studio Do-It-Yourself シリーズ第 18 回 ASP.NET MVC"

ありかつはかまや
5 years ago
Views:

1 Visual Studio Do-It-Yourself シリーズ第 18 回 ASP.NET MVC

2 著作権このドキュメントに記載されている情報はこのドキュメントの発行時点におけるマクロソフトの見解を反映したものですマクロソフトは市場の変化に対応する必要があるためこのドキュメントの内容に関する責任を問われないものとしますまた発行日以降に発表される情報の正確性を保証できませんこのホワトペーパーは情報提供のみを目的としています明示黙示または法令に基づく規定に関わらずこれらの情報についてマクロソフトはいかなる責任も負わないものとしますこの文書およびソフトウェゕを使用する場合は適用されるすべての著作権関連の法律に従っていただくものとしますこのドキュメントのいかなる部分も米国 Microsoft Corporation の書面による許諾を受けることなくその目的を問わずどのような形態であっても複製または譲渡することは禁じられていますここでいう形態とは複写や記録など電子的なまたは物理的なすべての手段を含みますただしこれは著作権法上のお客様の権利を制限するものではありませんマクロソフトはこの文書に記載されている事項に関して特許申請中特許商標著作権および他の知的財産権を所有する場合があります別途マクロソフトのラセンス契約上に明示の規定のない限りこのドキュメントはこれらの特許商標著作権またはその他の知的財産権に関する権利をお客様に許諾するものではありません別途記載されていない場合このドキュメントで使用している会社組織製品ドメン名電子メールゕドレスロゴ人物場所出来事などの名称は架空のものです実在する商品名団体名個人名などとは一切関係ありません 2010 Microsoft Corporation. All rights reserved. Microsoft Windows Visual Studio Visual Studio ロゴは米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です他のすべての商標はそれぞれの所有者の財産です

3 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.

4 ーステートなどによって開発者が 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] ボタンをクリックすると次に [ 単体テストプロジェクトの作成 ] ダゕログが開きます

5 ここではゕプリケーションプロジェクトの他に単体テストプロジェクトを作成するかどうかを設定します本稿では単体テストについては扱いませんので [ 単体テストプロジェクトを作成しない ] を選択しておきましょう

6 上の図は ASP.NET MVC プロジェクトの初期状態をソリューションエクスプローラーから確認したものです ASP.NET MVC プロジェクトではそれぞれのフォルダに役割が与えられておりそれぞれ対応するフゔルを配置していきます以下の表に主なフォルダの役割をまとめますフォルダ名 Controllers Models 配置する内容リクエストを処理するコントローラークラスデータを管理操作するためのクラス Views UI を表すフゔル (.aspx.ascx.master フゔルなど ) Scripts Content JavaScript のソースコード画像フゔルやスタルシートなど静的なコンテンツその他 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.$

7 [Entity Data Model ウゖザード ] ダゕログが起動しますので以下の表のように必要な情報を入力しますダイアログ項目設定値モデルのコンテンツの選択モデルに含めるコンテンツデータベースから生成データ接続の選択データ接続 ( コンピュータ名 )\sqlexpress.northwind.dbo データベースオブジェクトの選択エンテゖテゖ接続設定の名前モデルに含めるデータベースオブジェクトモデルに外部キー列を含めるモデル名前空間 NorthwindEntities テーブルチェック NorthwindModel ウゖザードを終了した後デザナ画面に以下のようなモデルが生成されていればエンテゖテゖデータモデルは正しく生成できていますデータモデルを生成した後は必ずプロジェクトをビルドするようにしてくださいさもないとこの後の操作で正しくモデルが認識されませんので要注意です

ダゕログが表示されますので [ コントローラー名 ] に CustomerController と入力します Customer の部分は自由に決めることができますがコントローラークラスの名前は必ず Controller

8 Controller の準備続いてコントローラークラスを定義しますコントローラークラスはクラゕントからのリクエストを処理する役割のクラスです MVC の C (Controller) に相当する部分ですコントローラークラスを作成するにはソリューションエクスプローラーから Controllers フォルダを右クリックし [ 追加 ] - [ コントローラー ] を選択します [ コントローラーの追加 ] ダゕログが表示されますので [ コントローラー名 ] に CustomerController と入力します Customer の部分は自由に決めることができますがコントローラークラスの名前は必ず Controller で終わらなければならない点に注意してください ASP.NET MVC ではコントローラークラスの名前から Controller を除いた部分をコントローラー名と見なしますつまりここでは Customer コントローラーを定義しているという意味になります

9 [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()

10 { var db = new NorthwindEntities(); return View(db.Customers); } NorthwindEntities クラスは先ほど生成したデータモデルに含まれるコンテキストクラスです Index ゕクションではコンテキストクラスの Customers プロパテゖにゕクセスすることで Customers テーブルのすべてのレコードを取り出しているわけです取得した Customers オブジェクトの集合 ( 正確には IQueryable<Customers> オブジェクト ) はゕクションメソッドの最後で View メソッドの引数として渡すことで対応するビュースクリプトに渡されます View の準備ゕクションメソッドでの処理結果を受けて最終的な出力を生成するのはビュースクリプトの役割です MVC の残るひとつ V (View) に相当しますビュースクリプトを生成するにはソースビューでゕクションメソッドにカーソルを合わせた状態で右クリックし [ ビューの追加 ] を選択します

11 [ ビューの追加 ] ダゕログが表示されますので表のように必要な項目を指定してください項目設定値ビュー名 Index 厳密に型指定されたビューを作成するチェックビューデータクラスビューコンテンツマスターページを選択する MyMVC.Models.Customers List チェックしない [ ビュー名 ] はゕクションメソッドと同じ名前とするのが基本ですこれによって自動的にゕクションメソッドとビュースクリプトの紐付けが行われるためです ( ビュースクリプトは /View/ コントローラー名 / ゕクション名.aspx という名前で保存されます ) [ 厳密に型指定されたビューを作成する ] を有効にした場合取得したデータモデルをビューに関連付けます型指定することでビュースクリプトで型キャストなどの手間を介さずにデータモデルのプロパテゖにゕクセスできるモデルに対するンテリセンス機能を有効にできる

12 などのメリットがありますビューのスキャフォールデゖング ( 自動生成 ) 機能を有効にする場合型指定は必須です [ ビューコンテンツ ] には自動生成するビューの種類を指定しますここでは 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" " <html xmlns=" > <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 }) %>

13 <%: 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.

14 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> ゕプリケーションの実行以上でサンプルを実装する手順は完了ですプロジェクトをデバッグ実行しブラウザからのような URL でゕクセスすることで以下の図のような結果が得られることを確認してください ( ポート番号は実行都度に変動します ) /Customer/Index の部分は / コントローラー名 / ゕクション名に対応していますこのように ASP.NET MVC ではそれぞれのコンポーネントを決められた規則に従って命名することで特別な設定をすることなく互いを紐付けし呼び出すことができるのですまとめ

15 今回は 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 は有効な選択肢となるはずですそれぞれの得手不得手を理解しその上でその時どきの目的や環境に応じて両者を使い分けるようにしてください

著作権このドキュメントに記載されている情報はこのドキュメントの発行時点におけるマクロソフトの見解を反映したものですマクロソフトは市場の変化に対応する必要があるためこのドキュメントの内容に関する責任を問われないものとしますまた発行日以降に発表される情報の正確性を保証できませんこのホワトペ

著作権このドキュメントに記載されている情報はこのドキュメントの発行時点におけるマクロソフトの見解を反映したものですマクロソフトは市場の変化に対応する必要があるためこのドキュメントの内容に関する責任を問われないものとしますまた発行日以降に発表される情報の正確性を保証できませんこのホワトペ Visual Studio Do-It-Yourself シリーズ第 19 回 Web アプリケーション配置著作権このドキュメントに記載されている情報はこのドキュメントの発行時点におけるマクロソフトの見解を反映したものですマクロソフトは市場の変化に対応する必要があるためこのドキュメントの内容に関する責任を問われないものとしますまた発行日以降に発表される情報の正確性を保証できませんこのホワトペーパーは情報提供のみを目的としています

Visual Studio Do-It-Yourself シリーズ 第 18 回 ASP.NET MVC

Visual Studio Do-It-Yourself シリーズ第 18 回 ASP.NET MVC