【C#】VSCodeでWebアプリを作成してみよう　ASP.NET Core【Razor編】

C#ライン
2024.09.15

Razor pagesを使ってWebアプリを作成

View（テンプレート）とViewModel（ビューモデル）の組み合わせてアプリを開発していくMVVM（Model-View-ViewModel）のフレームワークです。Razor Pagesを使用するとASP.NET Core MVCよりもシンプルに開発がすすめられます。

ASP.NET Core Blazor編はこちら

Razor pagesアプリの作成

今回のRazor pagesアプリは、前回記事で作成したソリューションプロジェクト内にRazor Pages用のプロジェクトを作成していきます。もし前回記事のアプリを作成していなければ、先にアプリを作成してから今回のアプリを作成するようにしてください。
それではこれから作成していきます。まずは、コマンドプロンプトを起動し、前回記事で作成した「BookList」ソリューションフォルダに移動し、次のコマンドを実行します。（フォルダのPATHは自身のPCに置き換えてください）

cd C:\C#_Apps\VSCode\BookList

ソリューションフォルダに移動したら、そのフォルダ内にBookListRazorプロジェクトを作成するため、次のコマンドを実行します。

dotnet new razor -o BookListRazor

次の様に表示されたら成功です。

dotnet newコマンドのテンプレートはrazorです。これでBookListソリューションに属するBookListRazorプロジェクトが作成できました。

そして、BookListRazorプロジェクトをソリューションに追加するため、次のコマンドを実行します。

dotnet sln add BookListRazor

次の様に表示されたら成功です。

BookListソリューションフォルダ内に前回作成したプロジェクト「BookList」プロジェクトと今作成した「BookListRazor」プロジェクトが同じフォルダ階層に作成されました。

VisualStudioCodeを開く

BookListソリューションフォルダを右クリックし「Codeで開く」をクリックします。

VSCodeがBookListソリューションフォルダで開きました。

ソリューションエクスプローラ（エクスプローラではない）の中のBookListRazorプロジェクトを展開するとPagesフォルダが作成されています。ASP.NET Core MVCのアプリで作成したときの「Models」「Controllers」「Views」フォルダかなくなり「Pages」に置き変わりました。

プロジェクトへの参照を追加する

それではスキャフォールディング（Scaffolding）機能を使って書籍一覧アプリを作成していきます。アプリの構造は前回記事のBookListアプリと同じものを作成します。すでに作成済みのBookListプロジェクトでエンティティを用意しているのでそれらを利用します。
VSCodeの左側ペインの「ソリューションエクスプローラ」→「BookListRazor」を右クリックし「プロジェクト参照を追加」をクリックします。

同じソリューションに属するプロジェクトがVSCode上部にリスト表示されますので「BookList」を選択します。

これでBookListプロジェクトへの参照が追加されました。ソリューションエクスプローラのBookListRazorをクリックし「BookListRazor.csproj」ファイルを開いてみると下記のようにBookListへの参照が追加されていることが確認できます。



コンテキスト／接続文字列を登録する

BookListプロジェクトで用意済みのコンテキストを現在のBookListRazorプロジェクトからも利用できるようにします。BookListRazorプロジェクトのProgram.csファイルを開きます。

1行目と2行目にusingディレクティブを追記します。

using BookList.Models;
using Microsoft.EntityFrameworkCore;


4行目の「builder.Services.AddRazorPages();」の行の下に下記コードを追記し上書き保存します。（追記する文はBookListプロジェクトのProgram.csからのコピーです）


builder.Services.AddDbContext(
    options => options.UseSqlServer(
        builder.Configuration.GetConnectionString(
            "BookContext")
        )
    );

下記が修正後の全文です。

using BookList.Models;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

builder.Services.AddDbContext(
    options => options.UseSqlServer(
        builder.Configuration.GetConnectionString(
            "BookContext")
        )
    );

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

次にBookListRazorプロジェクトの「appsettings.json」ファイルを開きます。

８行目の「 “AllowedHosts”: “*”」の最後にカンマ「,」を追記しますしその下に下記コードを追記します。（追記する文はBookListプロジェクトのappsettings.jsonからのコピーです）

  "ConnectionStrings": { 
    "BookContext": "Server=(localdb)\\mssqllocaldb;Database=BookList;Trusted_Connection=True;MultipleActiveResultSets=True;"
  }

下記が修正後の全文です。

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": { 
    "BookContext": "Server=(localdb)\\mssqllocaldb;Database=BookList;Trusted_Connection=True;MultipleActiveResultSets=True;"
  }
}

EF Core関連のパッケージを追加する

コマンドプロンプトを開いてBookListRazorプロジェクトに移動するため下記コマンドを実行します。

cd BookListRazor

BookListRazorプロジェクトに移動したた下記４つのコマンドを順番に実行します。

dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design

実行結果の出力は省略しますが下記のような表示がでれば正常に完了しています。

以上でScaffolding機能を利用するための準備はかんりょうしました。

Scaffolding機能でアプリを作成する

それではスキャフォールディング機能を使うために下記コマンドを実行します。

dotnet aspnet-codegenerator razorpage -m Book -dc BookContext -udl -outDir Pages/BookLists -scripts

下記のように出力されたら成功です。

今のコマンドを実行したことでBookListRazorプロジェクトのPagesフォルダに「Create.cshtml」「Delete.cshtml」「Edit.cshtml」「Index.cshtml」が作成され新規、詳細、削除、更新、一覧の機能が使えるようになりました。

アプリを起動してみる

作成したアプリを起動するため次のコマンドを実行します。

dotnet watch

しばらくするとWebブラウザーが自動で立ち上がりアプリのページが表示されます。

Webブラウザーのアドレスバーの「localhost:5085」の最後に「/booklists」を追加し「localhost:5085/booklists」に修正してエンターキーをクリックします。

BookListRazorアプリが表示されました。データは以前登録したデータが表示されています。

「Edit」「Details」「Delete」リンクをクリックすると各機能が使えます。

ホーム画面のヘッダーにリンクを作成

VSCodeのソリューションエクスプローラの「BookListRazor」→「Pages」→「Shared」→「_Layout.cshtml」を開きます。

25行目あたりにPrivacyのliタグがありますので、その3行をコピーし、その真下の行に貼り付けます。そして下記のように修正します。

ブラウザーを更新し「localhost:5085/」を開きなおすと「BookLists」リンクが追加されます。

「BookLists」リンクをクリックすると一覧画面（Index）に画面が遷移します。

まとめ

いかがだったでしょうか。このようにRazor Pagesフレームワークを使用することでよりシンプルにアプリを作成することができます。

ASP.NET Core Blazor編はこちら

コメント