ASP.NET Core 2.0でRazor Pagesアプリケーションを作ろう

進化した「ASP.NET Core 2.0」新しいWeb開発手法を学ぶ 第2回

　2017年8月14日、「ASP.NET Core 2.0」が公開されました。今回は新たに登場した「Razor Pages」を使ったWebアプリケーションの作成を通してRazor Pagesの構成要素や基本的な実装方法、データバインディングの仕組みについて説明します。

対象読者

• 新しいASP.NET Coreの機能について知りたい方
• MacやLinuxなどでASP.NET Coreアプリケーションを動かしたい方

検証環境

　本稿では、以下の環境で動作を確認しています。

• Windows 10
• macOS Sierra 10.12.6

Razor Pagesアプリケーションを作成しよう（1）

　前回も簡単に触れましたが、Razor PagesはASP.NET Core 2.0から導入された新機能です。ページコーディングの多いアプリケーションで重用されるように設計されており、ASP.NET Core MVCとは異なるアーキテクチャ／手法でWebアプリケーションを作成することができます。

Razor Pagesの構成要素

　Razor Pagesにおける主要なコンポーネントは「ページ」と「ページモデル」です。アプリケーションのプレゼンテーション層にあたるのがページで、ページの中で使用するデータを保持しているのがページモデルです。ページとページモデルはお互いにデータを共有しており、片方のアクションによってデータが変更されるともう片方に変更が反映される仕組みとなっています。これはMVVMデザインパターンのViewとViewModel間で行われる2方向データバインディングと同じものであるため、Razor PagesはASP.NET CoreにおけるMVVMパターンのWebアプリケーションフレームワークと位置づけることができます。

　図1はMVVMパターンとRazor Pagesの対応図です。ページとページモデルは前述の通りです。モデルに関してはページに依存しないビジネスロジックやデータベースアクセス等を行うレイヤで、MVCパターンのモデルとほぼ同じ責務を有しています。

図1　MVVMパターンとRazor Pagesの構成要素の対応図

Razor Pagesプロジェクトの作成

　ここからは、実際にプロジェクトの作成からRazor Pagesアプリケーションの起動までを行います。Razor Pagesに必要なコンポーネントを確認するために、空のWebアプリケーション用のプロジェクトテンプレートで、プロジェクトを作成していきます。

　.NET Core 2.0で使用可能なプロジェクトテンプレートを確認するには、コマンドラインで「dotnet new --help」と入力します。

図2　用意されているテンプレートの一覧

　ここでは一からRazor Pagesアプリケーションを作成するため、「ASP.NET Core Empty」テンプレートを使います。「dotnet new」の後にプロジェクトテンプレートの短縮名（図中の「短い名前の列」）を、-oオプションの後にプロジェクト名を入力します。

リスト1　emptyテンプレートからプロジェクトを新規作成

$ dotnet new web -o razor-web-sample
テンプレート "ASP.NET Core Empty" が正常に作成されました。
・・・中略・・・
正常に復元されました。
$

　リスト1のように、エラーなくコマンドが実行されればプロジェクトの作成は成功です。

アプリケーションでのRazor Pagesの有効化

　次は、アプリケーション全体でRazor Pagesを使用可能とするための最小設定を追加していきます。プロジェクトのルートディレクトリにある「Starup.cs」を編集します。

リスト2　アプリケーションでRazor Pagesを有効にする設定（Startup.cs）

namespace Sample.RazorPages
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            // 以下を追加する（これでRazor Pagesが有効化される）
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app)
        {
            // 他の記述を削除して以下を追加する
            app.UseMvc();
        }
    }
}

　編集内容を保存し、一度アプリケーションを起動してみましょう。プロジェクトのルートディレクトリで「dotnet run」とコマンドを実行します。実行後に表示されるメッセージの「Now listening on: 」に続いて表示されているURLにブラウザからアクセスしてみると、「ページが見つかりません」といった画面（404ページ）が表示されるかと思います。

　図3のように、コンソール上にも「http://＜表示されたアドレス:ポート＞/」に対するGETリクエストがあり、結果として404エラーとなった旨のメッセージが表示されているかと思います。

図3　Startup.cs編集後のアプリケーションログ

　これは、アプリケーションのルートパスである「/」に対応するページが実装されていないために発生したエラーです。それではこのエラーを解消するページを、Razor Pagesを使って実装しましょう。