【ASP.NET Core】RazorPagesプロジェクトの始め方

RazorPagesプロジェクトの基本的な作成方法をまとめていきます。プロジェクトの作成からコードファーストでスキャフォールディング・DB作成までの手順を記載します。

【検証環境】VisualStudio2022 / .NET6.0

公式ドキュメント：https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/razor-pages/?view=aspnetcore-6.0

RazorPagesとは

RazorPagesとは、ページ単位でのWebアプリ開発のためのフレームワークです。

MVCではコントローラーを使用して複数ページのアクションをまとめて定義しますが、RazorPagesの場合は1ページ1ファイルといった構造になります。フォルダ構造がルーティング構造になるため、ぱっと見でルーティングが分かりやすいです。

また、RazorPagesではコントローラーが存在しません。代わりに、コントローラーとビューモデルをひとまとめにしたcshtml.csファイルがあります。ここにコントローラーで書いていた処理を書くことになります。

プロジェクトの作成

RazorPagesアプリを作成

１．[ASP.NET Core Web アプリ] を選択して、[次へ] を押下します

２．プロジェクト名を入力して、[次へ] を押下します

３．.NET6.0を選択し、[作成] を押下します。

プロジェクトのフォルダ構成を確認

Pagesフォルダが存在することが確認できます。この中にRazorページとサポートファイルが含まれます。サポートファイルは名前がアンスコから始まるファイルです。MVCでも同様に存在していました。

cshtmlファイルをよく見てみると、階層になっていることが分かります。選択してみると、cshtml.csファイルが包含されていることが確認できます。WPFのxamlとxaml.csのような構成になります。

モデルの作成

今回はEntityFramework Core を使ったコードファーストでアプリを作っていきます。まずは下記手順でモデルを作成します。

１．プロジェクト直下にModelsフォルダを作成

２．Modelsフォルダ内にPersonクラスを作成

using System.ComponentModel.DataAnnotations;

namespace RazorPagesSample.Models
{
    public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int GenderId { get; set; }
    }
}

３．Modelsフォルダ内にGenderクラスを作成

外部キー用にGenderクラスも作成します。GenderテーブルとPersonテーブルは1対多の関係としますので、下記のようにします。外部キープロパティとナビゲーションプロパティはセットで定義します。

using System.ComponentModel.DataAnnotations;

namespace RazorPagesSample.Models
{
    public class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }

        //外部キープロパティ
        public int GenderId { get; set; }
        //ナビゲーションプロパティ
        public Gender Gender { get; set; }
    }
}

スキャフォールデイング

作成したPersonモデルをもとに、CRUD処理を行うページを下記手順で自動生成します。

１．プロジェクトに「Microsoft.EntityFrameworkCore.Design」をインストール

PM> Install-Package Microsoft.EntityFrameworkCore.Design

２．PagesフォルダにPersonsフォルダを作成

※フォルダ名とクラス名が同じだと名前空間と競合するので、フォルダ名はクラス名の末尾に「s」を付けるなどして重複しないようにします。

３．Personsフォルダを右クリックして、[追加] > [新規スキャフォールディングアイテム] を押下

４．[Entity Framework を使用するRazor ページ(CRUD)] を選択して、[追加] を押下

５．[モデルクラス] と [データコンテキストクラス] を選択して [追加] を押下

データコンテキストクラスは[＋]ボタンを押下して自動で入力されるので、[追加]を押下でOK

スキャフォールディングには多少時間がかかります。しばらくすると自動でファイルが作成されます。

また、Dataフォルダも自動で作成されており、ここにはコンテキストクラスが格納されています。

データベースの作成

スキャフォールディングでページとCRUD処理が自動で作成されましたが、まだデータベース自体が作成されていません。この状態で実行してもエラーになるので、データベースを作成する必要があります。

パッケージマネージャーコンソールから下記コマンドを実行します。

PM> Add-Migration InitialCreate
PM> Update-Database

実行が成功すると、localdbにデータベースとテーブルが作成されます。localDBはSSMSのWindows認証でサーバー名「(localdb)mssqllocaldb」で接続できます。

実際に確認すると、データベースとテーブルが作成されています。外部キーもばっちりです。

接続文字列はappsettings.jsonに記述してあります。接続先を変更したい場合はここを修正する必要があります。変更後にUpdate-Databaseを行えば別のサーバーにもテーブル作成が可能となります。

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "RazorPagesSampleContext": "Server=(localdb)\mssqllocaldb;Database=RazorPagesSampleContext-dcaf4233-8d83-4a16-bbae-b1270ee9e364;Trusted_Connection=True;MultipleActiveResultSets=true"
  }
}

ここまでの手順を踏んだ上でアプリを実行してみます。実行後、https://localhost:*****/persons　にアクセスすると、自動で作成されたページが開けることが確認できます。

Asp Net Core