ASP.NET Core

【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アプリを作成

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

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

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

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

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

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

モデルの作成

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

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

2.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; }
    }
}

3.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処理を行うページを下記手順で自動生成します。

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

PM> Install-Package Microsoft.EntityFrameworkCore.Design

2.PagesフォルダにPersonsフォルダを作成

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

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

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

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

データコンテキストクラスは[+]ボタンを押下して自動で入力されるので、[追加]を押下で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 にアクセスすると、自動で作成されたページが開けることが確認できます。

エンジニアの転職ならこれ!

【第二新卒向け】マイナビジョブ20's

マイナビジョブ20'sは、20代・第二新卒・既卒向けの転職エージェントです。

▼こんな方におすすめ
・はじめて転職しようと思っている
・転職できるだけのスキルが自分にあるか不安
・手厚いサポートを受けたい

【フリーランス向け】 Midworks

Midworksは豊富な案件と「フリーランス」と「正社員」の良いとこ取りをした働き方を実現する手厚い保障が特徴です。

▼こんな方におすすめ
・現在正社員でフリーランスになろうか悩んでいる
・フリーランスとして働いているが、先行きが不安がある  (安定的な案件確保や保障など)
・自分の市場価値を知りたい、見合った案件で参画したい
・今後のキャリアビジョンを踏まえて案件を選びたい