ASP.NET Core MVCアプリを作成します

VisualStudio2022を使用しC#でWebアプリを作成する手順を説明いたします。ASP.NET Core のモデル、ビュー、コントローラー（MVC）のフレームワークを使用した開発です。「Mybook」という蔵書管理のWebアプリを作成します。データベース（SQL Server）へ接続し、データの新規作成、表示、更新、削除のCRUD機能を作成します。

■新しいプロジェクトの作成
■モデルの作成
■スキャフォールディングの実行
■データベースの作成
■アプリの実行
■Mybooksリンクを追加
■データベースの確認
■まとめ

■新しいプロジェクトの作成

visualstodioを起動し「新しいプロジェクトの作成(N)」を選択します。

「新しいプロジェクトの作成」画面が表示されますので、テンプレートの検索ボックスの下に３つのプルダウンリストを次の様に選択します。左のプルダウンの言語を「C#」、真ん中のプラットフォームを「Windows」、右のプロジェクトの種類を「Web」を選択します。

「ASP.NET Core Web アプリ (Model-View-Controller)」が表示されますので選択し、画面右下の「次へ」を押下します。（似たような種類のものがありますので注意）

【注意】もしここで「ASP.NET Core Webアプリ」が表示されない場合は今の画面を一番下にスクロールさせると「探しているものが見つからない場合、さらにツールと機能をインストールする」をクリックすると、ツールを追加することができます。

インストールの詳細画面が表示されますので、「Web&クラウド」の項目の中の「ASP.NETとWeb開発」のチェックボックスに☑を入れて、画面右下の「変更(M)」を押下します。

インストールが開始されます。途中メッセージボックスが表示されたら「続行」を選択します。

「新しいプロジェクトを構成します」画面が表示されますので、プロジェクト名に「MyBookWebApp」と入力し画面右下の「次へ」を押下します。（大文字と小文字の区別が各 namespace と一致する必要があります）。

「追加情報」画面が表示されますのでそのまま「作成」を押下します。（最上位レベルのステートメントを使用しないチェックボックスはオフのままです）

VisualStudioにより、MVCプロジェクトが自動作成されました。

この時点ですでにWebアプリをブラウザーに表示することができます。それでは早速ブラウザに表示させてみましょう。VisualStudioの上部にあるメニューから「▶」をクリックします。（「▶https」の右側の「▶」です）

Webブラウザが起動し下記のようにWeb画面に表示されたら成功です。今後、開発を進めていく中でこの「▶」ボタンをクリックすることでWeb画面でアプリ表示内容が確認できます。

■モデルの作成

それでは今作成したアプリに、MVCのMにあたるモデルを追加します。
モデルクラスはデータベースを操作するために Entity Framework Core (EF Core) で使用されます。 EF Core は、データベースへの接続コードを簡略化するオブジェクトリレーショナルマッピング (ORM) フレームワークです。

VisualStudioのメニューの「表示」→「ソリューションエクスプローラ（P）」を押下しソリューションエクスプローラを表示させます。

ソリューションエクスプローラー内の「Models」を右クリックし、「追加」 → 「クラス」の順に選択します。

「新しい項目の追加」画面が表示されますので画面下部の名前の項目に「Class.cs」が表示されていますのでそのファイル名を「MyBook.cs」へ変更し「追加」ボタンを押下します。

ソリューションエクスプローラーの「Models」フォルダ内に「MyBook.cs」が追加されました。

その追加されたModels/MyBook.cs ファイルを開きclass MyBook内に次のコードを追記します。MyBookクラスに記述するコードはデータベースのテーブルの属性のデータです。

using System.ComponentModel.DataAnnotations;

namespace MyBookWebApp.Models
{
    public class MyBook
    {
        public int Id { get; set; }　　　//1
        public string? Title { get; set; }
        [DataType(DataType.Date)]
        public DateTime ReleaseDate { get; set; }　　//2
        public string? Genre { get; set; }
        public decimal Price { get; set; }
        public string? Author { get; set; }
        public string? Publisher { get; set; }
    }
}

//1ではMyBookクラスにデータベースで主キー用に必要となる「Id」フィールドを設定します。
//2ではReleaseDateのDataType属性によりデータの型 (Date) が指定されます。この属性を使用する場合:
ユーザーがアプリ上で日付フィールドに時刻を入力する必要がなくなり日付のみ表示され時刻は表示されません。

ここで今までのデータを保存しましょう。VisualStudioのメニューの「ファイル」→「すべて保存」を選択します。

■スキャフォールディングの実行

スキャフォールディングツールを使用することでMyBookモデルの「Create」「Read」「Update」「Delete」(CRUD) のViewページを自動で作成します。

ソリューションエクスプローラー内の「Controllers」フォルダーを右クリックし、「追加」→ 「新規スキャフォールディングアイテム」を選択します。

「新規スキャフォールディングアイテムの追加」画面が表示されます。左側のペインで「インストール済み」→「共通」→「MVC」を選択しするとアイテムが表示されますので「Entity Framework を使用したビューがある MVC コントローラー」を選択し「追加」ボタンを押下します。

「Entity Framework を使用したビューがある MVC コントローラーを追加する」画面が表示されます。一番上の「モデルクラス」ドロップダウンで「MyBook (MyBookWebApp.Models)」を選択します。

「DbContextクラス」項目で「＋」ボタンを押下すると「データコンテキスト」画面が表示され新しいデータコンテキストのクラス「MyBookWebApp.Data.MyBookWebAppContext」が自動表示されましたので、そのまま「追加」ボタンを押下し追加します。

「データベースプロバイダー」項目で「SQL Server」をドロップダウンで選択し、「ビュー」項目のチェックボックスと「コントローラー名」は規定値のままで「追加」ボタンを押下します。

スキャフォールディングが完了するまでしばらく待ちます。（途中でエラーメッセージが表示された場合は、もう一度 [追加] を選択して再試行します）

⓵スキャフォールディングによって下記３つのパッケージがインストールされました。

Microsoft.EntityFrameworkCore.SqlServer
Microsoft.EntityFrameworkCore.Tools
Microsoft.VisualStudio.Web.CodeGeneration.Design

⓶スキャフォールディングによって下記のファイルが作成されました。
コントロールとビューのファイル名が「Mybooks」と複数形になっていることに注目してください。モデル名は単数の「MyBook」です。コンテキスト名はこのアプリを作成するときに指定した「MyBookWebApp」が先頭に付きます。

コントローラー:
Controllers/MyBooksController.cs
ビューファイル: 作成、削除、詳細、編集、およびインデックスページ用の Razorファイル
Views/Mybooks/Create.cshtml
Views/Mybooks/Delete.cshtml
Views/Mybooks/Details.cshtml
Views/Mybooks/Edit.cshtml
Views/Mybooks/Index.cshtml
データベースコンテキストクラス:
Data/MyBookWebAppContext.cs

⓷スキャフォールディングによって下記が更新されました。

必要なパッケージ参照を「MyBookWebApp.csproj」プロジェクトファイルに挿入しました。
Program.cs ファイルでデータベースコンテキストを登録しました。
データベース接続文字列を appsettings.json ファイルに追加します。

以上のようにスキャフォールディングを使うことで、エンティティモデルに紐づけられたビューとコントローラーが自動作成され、関連したファイルを自動更新してくれます。

まだ、現時点ではデータベースを作成していませんのでアプリを実行してもWeb画面に表示されずエラーとなります。

■データベースの作成

EF Core移行機能を使用しデータベースを作成します。
VisualStudioの「ツール」メニューで「NuGet パッケージマネージャー」→「パッケージマネージャーコンソール」の順に選択します。

VisualStudioの「パッケージマネージャーコンソール」が表示されます。

下記コマンドを入力しエンターキーを押下します。（「PM>」の右側を入力）

PM> Add-Migration InitialCreate

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

PM> Add-Migration InitialCreate
Build started...
Build succeeded.
Microsoft.EntityFrameworkCore.Model.Validation[30000]
      No store type was specified for the decimal property 'Price' on entity type 'MyBook'. This will cause values to be silently truncated if they do not fit in the default precision and scale. Explicitly specify the SQL server column type that can accommodate all the values in 'OnModelCreating' using 'HasColumnType', specify precision and scale using 'HasPrecision', or configure a value converter using 'HasConversion'.
Microsoft.EntityFrameworkCore.Model.Validation[30000]
      No store type was specified for the decimal property 'Price' on entity type 'MyBook'. This will cause values to be silently truncated if they do not fit in the default precision and scale. Explicitly specify the SQL server column type that can accommodate all the values in 'OnModelCreating' using 'HasColumnType', specify precision and scale using 'HasPrecision', or configure a value converter using 'HasConversion'.
No store type was specified for the decimal property 'Price' on entity type 'MyBook'. This will cause values to be silently truncated if they do not fit in the default precision and scale. Explicitly specify the SQL server column type that can accommodate all the values in 'OnModelCreating' using 'HasColumnType', specify precision and scale using 'HasPrecision', or configure a value converter using 'HasConversion'.
To undo this action, use Remove-Migration.
PM>

同様に次のコマンドを実行します。

PM> Update-Database

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

PM> Update-Database
Build started...
Build succeeded.
Microsoft.EntityFrameworkCore.Model.Validation[30000]
      No store type was specified for the decimal property 'Price' on entity type 'MyBook'. This will cause values to be silently truncated if they do not fit in the default precision and scale. Explicitly specify the SQL server column type that can accommodate all the values in 'OnModelCreating' using 'HasColumnType', specify precision and scale using 'HasPrecision', or configure a value converter using 'HasConversion'.
Microsoft.EntityFrameworkCore.Model.Validation[30000]
      No store type was specified for the decimal property 'Price' on entity type 'MyBook'. This will cause values to be silently truncated if they do not fit in the default precision and scale. Explicitly specify the SQL server column type that can accommodate all the values in 'OnModelCreating' using 'HasColumnType', specify precision and scale using 'HasPrecision', or configure a value converter using 'HasConversion'.
No store type was specified for the decimal property 'Price' on entity type 'MyBook'. This will cause values to be silently truncated if they do not fit in the default precision and scale. Explicitly specify the SQL server column type that can accommodate all the values in 'OnModelCreating' using 'HasColumnType', specify precision and scale using 'HasPrecision', or configure a value converter using 'HasConversion'.
Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (3,762ms) [Parameters=[], CommandType='Text', CommandTimeout='60']
      CREATE DATABASE [MyBookWebAppContext-984c5cd9-c6b7-4404-ac24-4f402aa91c7a];
Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (994ms) [Parameters=[], CommandType='Text', CommandTimeout='60']
      IF SERVERPROPERTY('EngineEdition') <> 5
      BEGIN
          ALTER DATABASE [MyBookWebAppContext-984c5cd9-c6b7-4404-ac24-4f402aa91c7a] SET READ_COMMITTED_SNAPSHOT ON;
      END;
Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (38ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
      SELECT 1
Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (37ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
      CREATE TABLE [__EFMigrationsHistory] (
          [MigrationId] nvarchar(150) NOT NULL,
          [ProductVersion] nvarchar(32) NOT NULL,
          CONSTRAINT [PK___EFMigrationsHistory] PRIMARY KEY ([MigrationId])
      );
Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (1ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
      SELECT 1
Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (215ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
      SELECT OBJECT_ID(N'[__EFMigrationsHistory]');
Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (21ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
      SELECT [MigrationId], [ProductVersion]
      FROM [__EFMigrationsHistory]
      ORDER BY [MigrationId];
Microsoft.EntityFrameworkCore.Migrations[20402]
      Applying migration '20240302132136_InitialCreate'.
Applying migration '20240302132136_InitialCreate'.
Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (519ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
      CREATE TABLE [MyBook] (
          [Id] int NOT NULL IDENTITY,
          [Title] nvarchar(max) NULL,
          [ReleaseDate] datetime2 NOT NULL,
          [Genre] nvarchar(max) NULL,
          [Price] decimal(18,2) NOT NULL,
          [Author] nvarchar(max) NULL,
          [Publisher] nvarchar(max) NULL,
          CONSTRAINT [PK_MyBook] PRIMARY KEY ([Id])
      );
Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (28ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
      INSERT INTO [__EFMigrationsHistory] ([MigrationId], [ProductVersion])
      VALUES (N'20240302132136_InitialCreate', N'7.0.16');
Done.
PM>

一つ目の「Add-Migration」コマンドでは「Migration」フォルダが作成されマイグレーションファイルが作成されます。生成されたクラスにはデータベーススキーマを作成するコードが含まれています。

Migrations/{timestamp}_InitialCreate.cs

二つ目の「Update-Database」コマンドではMigrations/{time-stamp}_InitialCreate.cs ファイルで Upメソッドが実行されデータベースが作成されます。

Migrations/{time-stamp}_InitialCreate.cs

ここで一旦ファイルを保存しましょう。ファイル→すべて保存を選択し保存します。

■アプリの実行

以上の作業でアプリが実行できる状態になりました。前回開いているブラウザを閉じて、VisualStudioのメニューの▶ボタンで実行してみましょう。ブラウザが立ち上がりトップ画面が表示されます。

これは以前に実行した画面と変化はありません。ブラウザのアドレスを下記のように入力します。
「localhost:7230」はローカルホストのポート番号7230です。その右側に「/Mybooks」を追加で入力し実行します。

https://localhost:7230/Mybooks

Web画面がトップ画面から「Index」ページに切り替わりました。

それでは「Create New」ボタンをクリックして１件データを入力し「Create」ボタンで登録してみましょう。

データが１件登録され「Index」ページに自動で繊維し一覧表示されました。（まだ１レコードしかありませんが）

■Mybooksリンクを追加

先ほどアプリを立ち上げたらトップ画面が表示され、アドレスバーに「/Mybooks」を入力しました。毎回入力するのは面倒ですのでヘッダー部の「Privacy」の右横に「Mybooks」のリンクを追加してみましょう。
ソリューションエクスプローラーの「Views」フォルダ内の「MyBooks」→「Shared」→「_Layout.cshtml」ファイルを開きます。

真ん中あたりの「ul class=”navbar-nav flex-grow-1″」タグ内の「li」タグのHome、Privacyの次に下記3行を追記します。

  <li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="MyBooks" asp-action="Index">MyBooks</a>
</li>

これは、「MyBooks」コントローラーの「Index」アクションを「MyBooks」という表示のリンクタグを生成しています。下記は追加されたコードの位置を再掲します。

 ///途中省略///
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li> 
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="MyBooks" asp-action="Index">MyBooks</a>
</li>
</ul>
</div>
///途中省略///

これで表示が変わったかどうか、ブラウザを閉じてVisualstudioの「▶」ボタンで実行してみましょう。

「Mybooks」のリンクが表示されました。そのリンクをクリックすると「Index」画面に遷移します。

■データベースの確認

今回作成されたデータベースは「SQL Server Express LocalDB」SQL Server Express データベースエンジンの軽量版です。（Visualstudioと一緒にインストールされます）
データベースファイルは拡張子「.mdf」で「C:/Users/{user} 」ディレクトリに作成されます。

それでは作成されたデータベースのテーブルを確認してみましょう。
Visualstudioのメニューの「表示」→「SQL Serverオブジェクトエクスプローラー」を選択します。

「SQL Serverオブジェクトエクスプローラー」が表示されますので「SQL Server」→「(localdb)\MSSQLLocalDB****」→「データベース」→「MyBookWebAppContext-984c5cd9-c6b7-4404-ac24-4f402aa91c7a」→「abo.MyBook」を右クリックし「デザイナーの表示」を選択します。