CodeZine(コードジン)

特集ページ一覧

ASP.NET MVCフレームワークの概要を理解する

ASP.NET MVCフレームワーク 正式版 入門(1)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/06/02 14:00
目次

VS2008のASP.NET MVC作成サポート機能

 ASP.NET MVCをインストールすることで、VS2008にASP.NET MVC開発の補助機能が拡張されます。具体的に以下の機能があります。

VS2008の拡張サポート機能
拡張機能 概要
Add Controller/Add View ソリューション エクスプローラ上からControllerクラスとViewPageを追加できる機能
ControllerクラスとViewPageのスキャフォールディング Modelのデータをスキャフォールディング(足場)とし、一覧、詳細、編集、作成、空(型付のみを行う)のViewPageと、Controllerクラスの雛型を作成
ModelのViewPageに対する型付け Add View機能によるViewPage追加時にModelの型を型付けする
コードビハインドファイルの未作成 MVCでは、コードビハインド側に処理を書くことがほぼないため、既定ではコードビハインドファイルが作成されない
Go To View/Go To Controllerショートカット ViewPageからControllerクラスへ、ControllerクラスからViewPageへのショートカット

 詳細を見ていきましょう。

Add Controller/Add View機能

 従来は、ソリューション エクスプローラから項目の追加で必要な項目を追加していました。Add Controller/Add View機能はソリューションエクスプローラ上のControlersフォルダ上、Viewsフォルダ上で右クリックし、[追加]を選択した時に、[新しい項目]よりも上に表示されます(図7~8)。選択するとそれぞれが追加されます。

図7 Add Controlの利用手順
図7 Add Controlの利用手順
図8 Add Viewの利用手順
図8 Add Viewの利用手順

ControllerクラスとViewPageのスキャフォールディング

 [追加]-[Controller]、[追加]-[View]を選択すると、図9~10のダイアログが表示されます。

図9 Add Controlメニュー
図9 Add Controlメニュー
図10 Add Viewメニュー
図10 Add Viewメニュー

 図9のControllerクラス追加時に表示される「Add action methods for Create, Update, and Details scenarios」にチェックをつけると、関連付けられたModelの情報から一覧、詳細、編集、作成に関するメソッドの雛型を作成します。

 図10のViewPage追加時には、いくつかの設定が行えます。

Add Viewの設定
項目名 設定内容
[チェックボックス]Create a partial view(.ascx) ViewPage内に埋め込むユーザーコントロールを追加するかどうか(チェックしない場合はViewPage)
[チェックボックス]Create a strongly-typed view 作成するViewPage(もしくはユーザーコントロール)
[ドロップダウンリスト]View data class 型付けするデータクラスを選択
[ドロップダウンリスト]View content 型付けしたViewPageの表示内容を選択(一覧、詳細、編集、作成、空(型付のみを行う))
[チェックボックス]Select master page マスタページを使用するかどうか(使用する場合マスタページの場所も設定)
[テキストボックス]ContentPlaceHolder ID マスタページと整合性をとるためのContentPlaceHolder IDの設定

 スキャフォールディング(データの表示、取得などを行うための土台となる基盤)を利用したViewPageはデータの表示部分はすべて記述されます。以下は、View contentのドロップダウンリストで[Details]を選択し、PubsデータベースのPublishersテーブルを型付けした場合のソースです。

View content[Details]を選択した時のViewPageの一部
<fieldset>
    <legend>Fields</legend>
    <p>
        pub_id:
        <%= Html.Encode(Model.pub_id) %>
    </p>
    <p>
        pub_name:
        <%= Html.Encode(Model.pub_name) %>
    </p>
    <p>
        city:
        <%= Html.Encode(Model.city) %>
    </p>
    <p>
        state:
        <%= Html.Encode(Model.state) %>
    </p>
    <p>
        country:
        <%= Html.Encode(Model.country) %>
    </p>
</fieldset>
<p>

    <%=Html.ActionLink("Edit", "Edit", new { id=Model.pub_id }) %> |
    <%=Html.ActionLink("Back to List", "Index") %>
</p>

 後は、Controllerクラスに詳細部分を取得するコードを記述するだけです。

View content[Details]を選択した時のViewPageの一部
public ActionResult Details(string id)
{
    pubsEntities pubs = new pubsEntities();
    var publish = (from p in pubs.publishers
                  where p.pub_id == id
                  select p).First();
    return View(publish);
}

 スキャフォールディングにより、Detailsメソッドの雛型だけはできていたので、pubsEntitiesのインスタンス化と、それに対して、パラメタとして渡されたidを条件に、LINQを行っています。該当の1レコードのみFirstメソッドで取得後ViewDataに格納し、Details.ViewPageを返しています。

 他のメソッドも同様にして対応可能です。

Go To View/Go To Controllerショートカット

 MVCによる開発を行う際、度々ViewとControllerを行き来します。都度、マウスを操作し、タブを切り替えるなどの作業は煩雑です。Go To View/Go To Controllerショートカットはマウスを使うことなく、Viewと該当のControllerの行き来を行えます。

 ショートカットキーは[Ctrl]+[M]、[Ctrl]+[G]です(Ctrlキーを押したままM→GでもOK)。右クリックメニューでも表示されますが、ASP.NET MVCを利用して本格的な開発を進めるのであれば、ショートカットキーを身につけましょう。

ASP.NET MVC Design Gallery

 ASP.NET MVCは既定のプロジェクトでマスタページ、CSSを保持していますが、開発者たちがマスタページやCSSを新規で作りだす時間や労力を抑えることができるデザイン・ギャラリーというページがASP.NET公式ページ上で公開されました。全部で20以上のデザインテンプレートが現在ホストされているのでアプリケーションにあったテンプレートがあればダウンロードし、利用できます。ただし、現在公開されているデザインテンプレートはRC段階で公開されたもので、RTWではそのまま利用できません。

 以下の手順を行うことで、RTWにデザインテンプレートを適用できます。

  1. ASP.NET MVCデザインギャラリーから利用したいデザインテンプレートをダウンロード
  2. Zip形式でダウンロードできるので任意の場所に解凍(VB/C#フォルダ内にContent/Views/Helpersフォルダが展開される)
  3. ASP.NET MVCプロジェクトを作成(VB/C#どちらででもOK)
  4. 解凍したContent/View/Helpers フォルダ内の項目を、MVCプロジェクトに追加する(Helpersフォルダは新しく作成)
  5. Site.Masterのページディレクティブの記述を次のように変更(VBならLanguage="VB")
  6. <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
    
  7. Site.Masterページの<Title>タグ内に<asp:ContentPlaceHolder ID="TitleContent" runat="server"/>を追記
  8. Loginという記述を"LogOn"へと変更する。それに伴い、ログイン情報を表示させたい場合は<% Html.RenderPartial("LogOnUserControl"); %>という記述を表示したい場所に追記

 実際に適用して実行すると図11のようになります(デザインBlue Bubblesを選択)。

図11 デザインギャラリーを利用したMVCアプリケーション
図11 デザインギャラリーを利用したMVCアプリケーション

まとめ

 今回はASP.NET MVCを利用した開発を行う際の最低限のポイントを紹介しました。最低限と書いている通り、今回の内容を押さえていれば簡単なアプリケーションは作成できますが、まだまだ多くの機能がASP.NET MVCにはあります。

 次回は、今回の内容を踏まえてスキャフォールディング機能を実装するサンプルアプリケーションを作成します。お楽しみに。

参考文献



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ASP.NET MVCフレームワーク 正式版 入門

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト ナオキ(ナオキ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5