しばやん雑記

Azure とメイドさんが大好きなフリーランスのプログラマーのブログ

ASP.NET MVC 3 開発入門 (11) - ビューの作成

ASP.NET MVC 3 開発入門 - インデックス

今回からはクライアントサイド側の実装を行っていきます。まずはビューのファイルから作成していきましょう。

ビューの作成は Visual Studio に作成のための機能が用意されているので、それを使うとあっという間に作成することが出来ます。それではまず VideoController の Details アクションのビューから作成しますので、 VideoController.cs ファイルを開いて Details メソッド内で右クリックしてください。

表示されたコンテキストメニューに「ビューの追加」という項目がありますので、クリックすると以下のような「ビューの追加」ダイアログが表示されます。

重要な項目は以下になります。

  • ビューエンジン
  • 厳密に型指定されたビューを作成する
  • モデルクラス
  • スキャフォールディング ビュー テンプレート

上から順番に見ていきましょう。ちなみに、ビュー名は自動的にアクション名が入りますので殆どの場合は変更不要です。

まずは「ビューエンジン」の選択を行う項目ですが、今回は Razor を使って作成しますので「Razor (CSHTML)」を選択してください。「厳密に型指定されたビューを作成する」チェックボックスですが、これはビューの Model プロパティの型を指定するかどうかの設定になります。

チェックを入れると「モデルクラス」の選択ボックスが有効になりますので、適切なモデルクラスとして今回は Video クラスを選択してください。一覧にクラスが表示されていないときには、一度コンパイルをしてから再度ダイアログを表示させると一覧に表示されます。

そして最後に「スキャフォールディング ビュー テンプレート」ですが、指定したモデルクラスのプロパティを認識して、基本的な機能を持つビューを作成してくれる機能になります。選択可能な値と機能は以下の通りで、それぞれ名前の示す通りのシナリオに適したビューを作成してくれます。

  • Create
    • 作成画面のビューを作成します
  • Delete
    • 削除確認画面のビューを作成します
  • Details
    • 詳細画面のビューを作成します
  • Edit
    • 編集画面のビューを作成します
  • Empty
    • 空っぽのビューを作成します
  • List
    • 一覧画面のビューを作成します

設定が終わって「追加」ボタンをクリックすると、Views ディレクトリ内に適切なコントローラ名のフォルダを作成して、ビューを作成してくれます。

実際に作成されたビューを確認すると以下のようになっていて、これで Video クラスの値を表示するだけのビューを作成することが出来ました。今後は Video の値を利用して動画再生機能やコメント表示機能を追加していくことになります。

Details 以外のビューも「スキャフォールディング ビュー テンプレート」を変更するだけで簡単に基本的な機能を持つビューを作成することが出来ます。

@model MvcVideo.Models.Video

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<fieldset>
    <legend>Video</legend>

    <div class="display-label">Title</div>
    <div class="display-field">@Model.Title</div>

    <div class="display-label">Description</div>
    <div class="display-field">@Model.Description</div>

    <div class="display-label">CreatedAt</div>
    <div class="display-field">@String.Format("{0:g}", Model.CreatedAt)</div>

    <div class="display-label">UpdatedAt</div>
    <div class="display-field">@String.Format("{0:g}", Model.UpdatedAt)</div>
</fieldset>
<p>
    @Html.ActionLink("Edit", "Edit", new { id=Model.VideoId }) |
    @Html.ActionLink("Back to List", "Index")
</p>

一目見て気になるのは @ から始まる文字列だと思いますが、実はこれが Razor 記法になります。Razor は @ から始めると、その後には普通の C# コードを書くことが出来るようになっています。

Razor の文法や詳しい説明に関しては、次回以降にしっかりと説明を行っていく予定です。お疲れ様でした。