ASP.NET MVC + VM：例としてイベントのカレンダーを使用するビューモデルを使用して、複雑なビューを単純なビューに分割する

私は常にASP.NET MVC Webアプリケーションでビューモデルを使用しており、多くの場合、このアプローチの本質を同僚に説明する必要があるため、このトピックについて書くことにしました。見つかりません。 この記事は主に初心者向けです。



今月のいくつかのイベントのカレンダーを表示する必要があると想像してください。 これはかなり複雑な設計です。 カレンダーには、現在の月と年の名前の見出し、曜日の名前の行、そして実際には曜日自体（各7日間の6行）が含まれている必要があります。データベースから。 また、週末と祝日は特別な方法でマークする必要があるとします。 つまり、最終的には次のようになります。

理論のビット

おそらく、すべての開発者はMVCの設計パターンと、アプリケーションを3つの部分（モデル、ビュー、コントローラー）に分割するという概念に精通しています。



モデルは、単なるデータ（サブジェクトエリアのオブジェクト、多くの場合モデルと呼ばれます）、およびそれらを処理するいくつかのロジックに関連するデータとして理解できます。 （データの保存は、独立した独立したレイヤーに分離する必要があります。）つまり、理想的には、データの表示方法と保存方法に関係なく、存在し機能するモデルを用意します。



たとえば、オンラインショッピングを検討します。 多くの場合、このようなプロジェクトでは、フロントエンドは機能全体のごく一部しか占有せず、その大部分は注文会計や顧客との対話、倉庫会計、分析、APIなどのさまざまな管理サブシステムに集中しています。 明らかに、単一の一般的なモデルのコンテキストでのそのようなサブシステム（偶然、別のアプリケーションとして簡単に実行できる）の機能は非常に重要です。 特定のポジションの値の計算（現在のプロモーションや割引を考慮に入れる）や注文の合計額などの機能の実装は、プロジェクト全体で同じでなければなりません。



典型的なオンラインストアのメインページを紹介しましょう。 おそらくカテゴリのリスト、いくつかの人気製品、ニュースなどの場所があるでしょう。 つまり、ここで1つのモデルオブジェクトの表現を転送するだけでは十分ではありません。 ただし、このような表現を表示するために必要なオブジェクトのセットを形成するには、特定のロジックが必要になります。 はい、これらのオブジェクトのセットは異なる表現で類似している可能性があるため、このようなロジックをコントローラーに直接配置するのは間違っています。 （不正なコードの2つの最も一般的な問題は、重複と長く聞こえないメソッドです。）しかし、このロジックは特定の表現を参照するため、モデルの一部にすることはできません。 これは、種のモデルが助けになる場所です。



実際、ビューモデル（プレゼンテーションモデルと呼ぶ方が正しいでしょう）は、特定のビュー（または複数のビュー）に必要なすべてのデータのセットをカプセル化します。 ビューが他のビューで構成できるように、ビューモデルは他のビューモデルで構成できます。 オンラインストアのメインページの場合、このページの外観のモデルを定義できます。これには、カテゴリ、製品、ニュースのタイプのモデルセットが含まれます。 同様に、製品のタイプのモデルは、写真、コメントなどのタイプのモデルで構成される場合があります。 これらのすべてのビューモデル（おそらく、ビューページモデルを除く）を再利用できることは注目に値します。 ただし、これは、これらのオブジェクトのグラフ全体を形成するロジックを持つ必要性の問題を解決するものではありません。これは、上記で説明したように、直接コントローラであるため、悪い考えです。



対応するタイプの種モデルのオブジェクトを生成するクラスの並列階層であるビューモデルビルダーは、ビューモデルを初期化するためのコードを分離および再利用するのに理想的です。 親種モデルのビルダーは、子種モデルのビルダーを使用して、必要なすべての階層を構築し、チェーンに沿って上から下に互いに呼び出します。 初期化がコントローラーから受け取った値を設定するだけの問題である単純なビューモデルの場合、ビルダーの使用は不要で面倒です-この場合、通常のコンストラクターで十分です。



これで、練習に移る時だと思います。

練習する

簡単な例として、イベントのカレンダーに戻りましょう。 まず、ASP.NET MVCに空のWebアプリケーションを準備します（ASP.NET Coreを使用して、新しいプラットフォームの機能を同時にデモンストレーションしますが、この例のコンテキストでは関係ありません）。 唯一のCalendarアクションを含む唯一のDefaultControllerコントローラーに追加します-カレンダーの表示を担当します。 対応するビューを追加します（これまでのところコンテンツはありません）。 ここでアプリケーションを実行すると、空白のページが表示されます。 （記事の最後に、GitHubに投稿された完成したテストプロジェクトへのリンクがあります。）



上で見たように、必要なすべてのデータをビューに転送するには、適切なビューモデルが必要です。 CalendarViewModelと呼びましょう。 （プロジェクトのViewModelsフォルダーにビューモデルを配置して、Viewsフォルダーの構造を繰り返すのは非常に便利です。後で適切なスクリーンショットを提供します。）DateTime型の明らかなDateプロパティをすぐに追加します。 現在の月と年を表示するために必要です。 これにより、次のようなクラスが生成されます。

public class CalendarViewModel { public DateTime Date { get; set; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、ビューモデルのビルダーを追加します（実際には必要ありませんが、後で表示されます-事前に行います）。

 public class CalendarViewModelBuilder { public CalendarViewModel Build() { return new CalendarViewModel() { Date = DateTime.Now }; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、ビルダーのBuildメソッドはパラメーターを受け入れず、CalendarViewModelクラスの新しいオブジェクト（完成したビューモデル）を返します。



次に、CalendarViewModelクラスをCalendarビューのビューモデルとして指定し、このビューモデルから月と年の表示を追加します。

 @model AspNetCoreViewModels.ViewModels.Default.Calendar.CalendarViewModel <div class="calendar"> <div class="header"> @Model.Date.ToString("MMMM yyyy") </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、CalendarViewModelBuilderビルダーを使用して、ビューモデルをビューに渡します。 コントローラーは次の形式にする必要があります。

 public class DefaultController : Controller { public ActionResult Calendar() { return this.View(new CalendarViewModelBuilder().Build()); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、アプリケーションを再び起動できます。今回は、すでに何かが表示されています（スタイルを少し変更したため、将来のカレンダーには既にいくつかのデザインがあります）。







次に、曜日の名前を含む行を出力します。 これは静的な情報であり、どこでも個別に使用されることはないため、適切なマークアップをビューに直接追加するだけです。 次のようになります。

 @model AspNetCoreViewModels.ViewModels.Default.Calendar.CalendarViewModel <div class="calendar"> <div class="header"> @Model.Date.ToString("MMMM yyyy") </div> <table cellpadding="0" cellspacing="0"> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </table> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザでは、次のようになります。







今、最も興味深いのターンが来ました-日の表示。 これを行うには、_Dayの個別の部分ビューと、そのためのDayViewModelフォームのモデルを追加します。 （プロジェクトの将来では、カレンダーに関係なく、予定されたイベントを含む日を表示することもできます。たとえば、今日のイベントの別のブロックとして。これを念頭に置いてください。）



今のところ、DateTime型のDateプロパティをDayViewModelクラスに追加し、bool型の3つのプロパティ-IsNotCurrentMonth、IsWeekendOrHoliday、IsTodayを追加します。

 public class DayViewModel { public DateTime Date { get; set; } public bool IsNotCurrentMonth { get; set; } public bool IsWeekendOrHoliday { get; set; } public bool IsToday { get; set; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今回のビルダーのBuildメソッドは、パラメーターを1つ取ります-日付：

 public class DayViewModelBuilder { public DayViewModel Build(DateTime date) { return new DayViewModel() { Date = date, IsNotCurrentMonth = date.Month != DateTime.Now.Month, IsWeekendOrHoliday = date.DayOfWeek == DayOfWeek.Saturday || date.DayOfWeek == DayOfWeek.Sunday, IsToday = date.Date == DateTime.Now.Date }; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、ビルダーはビューモデルのすべてのプロパティを初期化します。 IsNotCurrentMonthフラグは、日が現在の月の外にあるかどうか（グレーで強調表示できるようにするため）を決定します。 IsWeekendOrHolidayのセットは、その日が週末または休日であり、IsToday-今日であることを意味します（したがって、そのような日を赤または緑で強調表示します）。



部分的な_Dayビューは次のようになります（この部分的なビューをカレンダーとは別に使用できるように、ここではtdタグを特に使用していません）。

 <div class="day @(this.Model.IsNotCurrentMonth ? "not-current-month" : null) @(this.Model.IsWeekendOrHoliday ? "weekend-or-holiday" : null) @(this.Model.IsToday ? "today" : null)"> <div class="date"> @Model.Date.Day.ToString("00") </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

対応するCSSクラスは、IsNotCurrentMonth、IsWeekendOrHoliday、およびIsTodayプロパティの値に応じて設定されます。



カレンダービューモデルに日表示モデルのセットを追加し、カレンダービューモデルビルダーでこのセットを初期化することは残ります。



どのロジックがビューモデルビルダーに最もよく実装され、どのロジックがビューに直接あるかを考える場合、簡単なテストの結果から進める必要があります。ビューを置き換える必要がある場合、このロジックを再度複製する必要がありますか？ その場合、ビューモデルビルダーにロジックを配置する必要があります。 そうでない場合は、ビューで直接（これは、コードがあまりにも具体的であり、特定の表示方法にのみ適用されることを意味します）。 ロジックが本当に膨大なものを意味する場合、おそらく最良の解決策は、特定の表現の追加のビューモデルを作成し、このロジックをそのビルダーのBuildメソッドに転送することです。 この場合、日を42要素の配列（各7日間の6行）として表すことができますが、この場合、カレンダービューでは、この配列を文字列に分割するロジックが必要です。 したがって、配列をすぐに2次元にする方が適切な場合があります（将来、表とは何らかの方法で日を表示する必要があると仮定しない限り）。

 public class CalendarViewModel { public DateTime Date { get; set; } public DayViewModel[,] Days { get; set; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このビューモデルのビルダーのBuildメソッドは、ほぼ次のロジックで補完できるようになりました。

 DayViewModel[,] days = new DayViewModel[6,7]; DateTime date = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1); int offset = (int)date.DayOfWeek; if (offset == 0) offset = 7; offset--; date = date.AddDays(offset * -1); for (int i = 0; i != 6; i++) { for (int j = 0; j != 7; j++) { days[i, j] = new DayViewModelBuilder().Build(date); date = date.AddDays(1); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリケーションを実行し、何が起こったかを確認します







ほぼ完了。 それでは、イベントに対処しましょう。 まず、モデルにEventクラスを追加する必要があります。

 public class Event { public int Id { get; set; } public DateTime Date { get; set; } public string Name { get; set; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、いくつかの偽のデータアクセスレイヤーを追加します。実際には、指定された日付に対して事前に定義されたオブジェクトを返すだけです。 これについては詳しく説明しませんが、その実装（作業単位とリポジトリテンプレートを最も単純な形式で使用+組み込みのASP.NET Core DIを使用）はテストプロジェクトで見ることができます。



EventViewModelビューのモデル、そのビルダー、および_Eventの部分ビューをすぐに追加します。



EventViewModelクラス：

 public class EventViewModel { public DateTime Date { get; set; } public string Name { get; set; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

EventViewModelBuilderクラスのビルドメソッド：

 public EventViewModel Build(Event @event) { return new EventViewModel() { Date = @event.Date, Name = @event.Name }; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、この場合、ビューモデルのプロパティセットはモデルプロパティのセットとほぼ同じであるため、あるクラスの各プロパティを別のクラスのプロパティに手動で投影しないようにするには、 AutoMapperなどを使用する必要があります。



_Eventの部分ビュー：

 @model AspNetCoreViewModels.ViewModels.Shared.EventViewModel <div class="event"> @Model.Date.ToString("HH:mm")<br /> @Model.Name </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

明らかに、これらはすべて、日やカレンダーに関係なく再利用できます。



アプリケーションを完了するには、IEnumerable型のEventsプロパティをDayViewModelクラスに追加し、日ビューモデルのビルダーで初期化する必要があります。 これを行うには、作業単位テンプレートの実装で表されるデータアクセスレイヤーにアクセスできるようにする日ビューモデルビルダーが必要です。 すでに大きな記事を拡大しないように、ここでは詳細に触れません。 要するに、コントローラーへの単一の要求内のデータアクセス層へのすべてのアクセスは、作業単位のクラスの単一インスタンスのコンテキストで発生する必要があります。 つまり、このようなインスタンスは、コントローラーオブジェクトが作成されたときに（たとえば、DIを使用して）作成され、チェーン内のすべてのビューモデルビルダーに転送される必要があります。 そこで、別の抽象クラスViewModelBuilderBaseを追加しました。このコンストラクタは、コンストラクタがIStorage型のストレージ引数を1つ受け取り、すべての子孫がアクセスできるように保護された変数に格納します。 Eventsプロパティを初期化することで、DayViewModelBuilderクラスのBuildメソッドを補足できるようになりました。

 Events = this.Storage.EventRepository.FilteredByDate(date).Select( e => new EventViewModelBuilder(this.Storage).Build(e) )
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、EventRepositoryリポジトリに目を向け、FilteredByDateメソッドを使用して特定の日付のすべてのイベントを選択してから、LINQ SelectメソッドとEventViewModelBuilderビルダーを使用して、各イベントモデルオブジェクトをEventViewModelモデルのオブジェクトに投影します。



イベントの出力を部分的な_Dayビューに追加すると、アプリケーションの準備が整い、それを起動することで最初のスクリーンショットに表示されているものを取得できます。

 <div class="events"> @foreach (var @event in this.Model.Events) { @Html.Partial("_Event", @event) } </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以上です。 プロジェクトの最終構造：

おわりに

このプロジェクトをGitHubに投稿して、ライブで視聴できるようにしました。 繰り返しますが、ASP.NET Coreに実装されています。 ここでは、実行に必要なすべてを見つけることができます。



このアプローチの本質を説明し、それを実装する簡単な方法を示すことができたと思います。 ビューモデルを使用してフォームを表示することについては何も言及しませんでしたが、これはそれほど一般的な使用例ではありません。 興味深い場合は、次の記事で説明できます。 おそらく「データベース」を使用しているため、この例はあまりにも混乱しているように見えましたが、この側面については確かに触れたいと思います。 一般的に、あなたの注意に感謝します、そして、私は批判を聞いてうれしいです！