ViewData を使用し、ViewModel クラスを実装する

[アーティクル]
04/18/2024

これは、ASP.NET MVC 1 を使用して小規模で完全な Web アプリケーションを構築する方法を説明する無料の "NerdDinner" アプリケーションチュートリアルの手順 6 です。

手順 6 では、より豊富なフォーム編集シナリオのサポートを有効にする方法を示し、コントローラーからビューにデータを渡すために使用できる 2 つの方法 (ViewData と ViewModel) についても説明します。

ASP.NET MVC 3 を使用している場合は、MVC 3 の概要または MVC Music Store に関するチュートリアルに従うことをお勧めします。

NerdDinner 手順 6: ViewData と ViewModel

さまざまなフォーム投稿シナリオについて説明し、作成、更新、削除 (CRUD) のサポートを実装する方法について説明しました。 DinnersController の実装をさらに進め、より豊富なフォーム編集シナリオのサポートを有効にします。ここでは、コントローラーからビューにデータを渡すために使用できる 2 つの方法 (ViewData と ViewModel) について説明します。

コントローラーからビューテンプレートにデータを渡す

MVC パターンの定義特性の 1 つは、アプリケーションのさまざまなコンポーネント間で適用するのに役立つ厳密な "懸念事項の分離" です。モデル、コントローラー、ビューはそれぞれ、適切に定義された役割と責任を持ち、明確に定義された方法で相互に通信を行います。これは、テスト容易性とコードの再利用を促進するのに役立ちます。

Controller クラスは、HTML 応答をクライアントにレンダリングする場合、応答をレンダリングするために必要なすべてのデータをビューテンプレートに明示的に渡す役割を担います。ビューテンプレートでは、データ取得やアプリケーションロジックを実行しないでください。代わりに、コントローラーによって渡されるモデルまたはデータから駆動されるレンダリングコードのみに制限する必要があります。

現在、DinnersController クラスによってビューテンプレートに渡されるモデルデータは単純で簡単です。Index() の場合は Dinner オブジェクトの一覧、Details()、Edit()、Create()、Delete() の場合は 1 つの Dinner オブジェクトです。アプリケーションに UI 機能を追加するにつれて、多くの場合、ビューテンプレート内で HTML 応答をレンダリングするために、このデータ以上のものを渡す必要が出てきます。たとえば、編集ビューと作成ビュー内の "Country" フィールドを HTML テキストボックスからドロップダウンリストに変更できます。ビューテンプレートで国と地域の名前のドロップダウンリストをハードコーディングするのではなく、動的に設定される、サポートされている国と地域の一覧から生成することもできます。 Dinner オブジェクト "と" サポートされている国と地域の一覧の両方をコントローラーからビューテンプレートに渡す方法が必要です。

これを実現する 2 つの方法を見てみましょう。

ViewData ディクショナリの使用

Controller 基底クラスは、コントローラーからビューに追加のデータ項目を渡すために使用できる "ViewData" ディクショナリプロパティを公開します。

たとえば、編集ビュー内の "Country" テキストボックスを HTML テキストボックスからドロップダウンリストに変更するシナリオをサポートするために、Edit() アクションメソッドを更新して、"Country" ドロップダウンリストのモデルとして使用できる SelectList オブジェクトを (Dinner オブジェクトに加えて) 渡すことができます。

//
// GET: /Dinners/Edit/5

[Authorize]
public ActionResult Edit(int id) {

    Dinner dinner = dinnerRepository.GetDinner(id);

    ViewData["Countries"] = new SelectList(PhoneValidator.AllCountries, dinner.Country);

    return View(dinner);
}

上記の SelectList のコンストラクターは、ドロップダウンリストに設定される国と地域の一覧と、現在選択されている値を受け入れます。

その後、前に使用した Html.TextBox() ヘルパーメソッドの代わりに Html.DropDownList() ヘルパーメソッドを使用するように、Edit.aspx ビューテンプレートを更新できます。

<%= Html.DropDownList("Country", ViewData["Countries"] as SelectList) %>

上記の Html.DropDownList() ヘルパーメソッドは、2 つのパラメーターを受け取ります。 1 つ目は、出力する HTML フォーム要素の名前です。 2 つ目は、ViewData ディクショナリを介して渡した "SelectList" モデルです。 C# の "as" キーワードを使用して、ディクショナリ内の型を SelectList としてキャストしています。

アプリケーションを実行し、ブラウザー内で /Dinners/Edit/1 URL にアクセスすると、編集 UI が更新され、テキストボックスではなく国と地域のドロップダウンリストが表示されることがわかります。

Screenshot of the edit user interface with the dropdown list of countries and regions highlighted with a red arrow.

また、HTTP-POST Edit メソッドから編集ビューテンプレートをレンダリングするため (エラーが発生した場合のシナリオでは)、ビューテンプレートがエラーシナリオでレンダリングされるときに SelectList を ViewData に追加するように、このメソッドも更新することもできます。

//
// POST: /Dinners/Edit/5

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(int id, FormCollection collection) {

    Dinner dinner = dinnerRepository.GetDinner(id);

    try {
    
        UpdateModel(dinner);

        dinnerRepository.Save();

        return RedirectToAction("Details", new { id=dinner.DinnerID });
    }
    catch {
    
        ModelState.AddModelErrors(dinner.GetRuleViolations());

        ViewData["countries"] = new SelectList(PhoneValidator.AllCountries, dinner.Country);

        return View(dinner);
    }
}

DinnersController 編集シナリオで DropDownList がサポートされるようになりました。

ViewModel パターンの使用

ViewData ディクショナリのアプローチには、実装が非常に高速で簡単であるという利点があります。ただし、入力ミスがコンパイル時にキャッチされないエラーにつながる可能性があるため、文字列ベースのディクショナリを使用するのが好きではない開発者もいます。型指定されていない ViewData ディクショナリでは、ビューテンプレートで C# のような厳密に型指定された言語を使用する場合は、"as" 演算子またはキャストを使用する必要もあります。

使用できる別のアプローチは、多くの場合、"ViewModel" パターンと呼ばれるものです。このパターンを使用する場合は、特定のビューシナリオ用に最適化され、ビューテンプレートで必要な動的な値またはコンテンツのプロパティを公開する、厳密に型指定されたクラスを作成します。コントローラークラスは、これらのビュー最適化クラスを設定し、使用するビューテンプレートに渡すことができます。これにより、ビューテンプレート内のタイプセーフ、コンパイル時チェック、エディターの Intellisense が有効になります。

たとえば、ディナーフォームの編集シナリオを有効にするには、次のような "DinnerFormViewModel" クラスを作成します。このクラスでは、厳密に型指定された 2 つのプロパティ (Dinner オブジェクトと、"Countries" ドロップダウンリストを設定するために必要な SelectList モデル) が公開されます。

public class DinnerFormViewModel {

    // Properties
    public Dinner     Dinner    { get; private set; }
    public SelectList Countries { get; private set; }

    // Constructor
    public DinnerFormViewModel(Dinner dinner) {
        Dinner = dinner;
        Countries = new SelectList(PhoneValidator.AllCountries, dinner.Country);
    }
}

その後、Edit() アクションメソッドを更新して、リポジトリから取得した Dinner オブジェクトを使用して DinnerFormViewModel を作成し、それをビューテンプレートに渡すことができます。

//
// GET: /Dinners/Edit/5

[Authorize]
public ActionResult Edit(int id) {

    Dinner dinner = dinnerRepository.GetDinner(id);
    
    return View(new DinnerFormViewModel(dinner));
}

次に、edit.aspx ページの上部にある "inherits" 属性を次のように変更することで、"Dinner" オブジェクトではなく "DinnerFormViewModel" が必要になるようにビューテンプレートを更新します。

Inherits="System.Web.Mvc.ViewPage<NerdDinner.Controllers.DinnerFormViewModel>

これを行うと、ビューテンプレート内の "Model" プロパティの Intellisense が更新され、渡す DinnerFormViewModel 型のオブジェクトモデルが反映されます。

Screenshot of the code editor window with a dropdown list and the Dinner list item highlighted with a blue rectangle.

Screenshot of the code editor window with a dropdown list and the Address list item highlighted with a gray dotted rectangle.

その後、ビューコードを更新して動作させることができます。以下の作成する入力要素の名前を変更しない方法 (フォーム要素は引き続き "Title"、"Country") に注意してください。DinnerFormViewModel クラスを使用して値を取得するように HTML ヘルパーメソッドを更新しています。

<p>
    <label for="Title">Dinner Title:</label>
    <%= Html.TextBox("Title", Model.Dinner.Title) %>
    <%=Html.ValidationMessage("Title", "*") %>
</p>

<p>
    <label for="Country">Country:</label>
    <%= Html.DropDownList("Country", Model.Countries) %>                
    <%=Html.ValidationMessage("Country", "*") %>
</p>

また、エラーをレンダリングするときに DinnerFormViewModel クラスを使用するように Edit post メソッドを更新します。

//
// POST: /Dinners/Edit/5

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(int id, FormCollection collection) {

    Dinner dinner = dinnerRepository.GetDinner(id);

    try {
        UpdateModel(dinner);

        dinnerRepository.Save();

        return RedirectToAction("Details", new { id=dinner.DinnerID });
    }
    catch {
        ModelState.AddModelErrors(dinner.GetRuleViolations());

        return View(new DinnerFormViewModel(dinner));
    }
}

また、Create() アクションメソッドを更新して、まったく同じ DinnerFormViewModel クラスを再利用して、それらの中で "Countries" DropDownList を有効にすることもできます。 HTTP-GET の実装を次に示します。

//
// GET: /Dinners/Create

public ActionResult Create() {

    Dinner dinner = new Dinner() {
        EventDate = DateTime.Now.AddDays(7)
    };

    return View(new DinnerFormViewModel(dinner));
}

HTTP-POST Create メソッドの実装を次に示します。

//
// POST: /Dinners/Create

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create(Dinner dinner) {

    if (ModelState.IsValid) {

        try {
            dinner.HostedBy = "SomeUser";

            dinnerRepository.Add(dinner);
            dinnerRepository.Save();

            return RedirectToAction("Details", new { id=dinner.DinnerID });
        }
        catch {
            ModelState.AddModelErrors(dinner.GetRuleViolations());
        }
    }

    return View(new DinnerFormViewModel(dinner));
}

これで、編集画面と作成画面の両方で、国または地域を選択するためのドロップダウンリストがサポートされるようになりました。

カスタムシェイプの ViewModel クラス

上記のシナリオでは、DinnerFormViewModel クラスは、サポートする SelectList モデルプロパティと共に、Dinner モデルオブジェクトをプロパティとして直接公開します。この方法は、ビューテンプレート内に作成する HTML UI が、ドメインモデルオブジェクトに比較的近いシナリオに適しています。

そうでないシナリオの場合、使用できる 1 つのオプションは、オブジェクトモデルがビューによって使用できるように最適化され、基になるドメインモデルオブジェクトとは完全に異なる可能性があるカスタムシェイプの ViewModel クラスを作成することです。たとえば、複数のモデルオブジェクトから収集された異なるプロパティ名や集計プロパティを公開できる可能性があります。

カスタムシェイプの ViewModel クラスを使用すると、コントローラーからビューにデータを渡してレンダリングしたり、コントローラーのアクションメソッドにポストバックされたフォームデータを処理したりできます。この後のシナリオでは、アクションメソッドで ViewModel オブジェクトをフォームに投稿されたデータで更新し、ViewModel インスタンスを使用して実際のドメインモデルオブジェクトをマップまたは取得する場合があります。

カスタムシェイプの ViewModel クラスは非常に柔軟性が高く、ビューテンプレート内のレンダリングコードやアクションメソッド内のフォーム投稿コードが複雑になり始めた場合にいつでも調査する必要があります。これは、多くの場合、生成する UI にドメインモデルが明らかに対応していないこと、および中間カスタムシェイプの ViewModel クラスが役立つことを示しています。

次の手順

ここでは、部分ページとマスターページを使用して、アプリケーション全体で UI を再利用して共有する方法を見てみましょう。

前へ次へ

次の方法で共有

ViewData を使用し、ViewModel クラスを実装する

NerdDinner 手順 6: ViewData と ViewModel

コントローラーからビューテンプレートにデータを渡す

ViewData ディクショナリの使用

ViewModel パターンの使用

カスタムシェイプの ViewModel クラス

次の手順

フィードバック

その他のリソース

次の方法で共有

ViewData を使用し、ViewModel クラスを実装する

NerdDinner 手順 6: ViewData と ViewModel

コントローラーからビュー テンプレートにデータを渡す

ViewData ディクショナリの使用

ViewModel パターンの使用

カスタムシェイプの ViewModel クラス

次の手順

フィードバック

その他のリソース

コントローラーからビューテンプレートにデータを渡す