LoginSignup
1
2

More than 1 year has passed since last update.

@green_fox(みどりの きつね)

【ASP.NET】Web未経験者がASPのMSDNチュートリアルやってみる（モデルの追加）

Posted at

タイトル通り、Web未経験のエンジニアがASP.NETでMSDNのチュートリアルに沿って慣れてみようという内容です。
筆者のステータスはこんな感じ。

  • VB.NET経験あり
  • C#独学
  • Web未経験（何それおいしいの？）

時代はWebだということで、手を出してみます。
手を出すチュートリアルはコチラ。

今回はMSDNのチュートリアル「ASP.NET Core で Razor ページ アプリにモデルを追加する」を進めます。

尚、前回実施したチュートリアルの導入編の続きから始めます。

作成の流れ

まずは今回の作成の流れを確認します。MSDNのチュートリアルに沿って次の様に進めます。

  1. データモデルの追加
  2. モデルのスキャフォールディング
  3. 初期移行
  4. 実行

今回のチュートリアルも簡単そうに見えますね。

1. データモデルの追加

まずはデータモデルの追加を実施します。
しかし、初めてASP.NETを触る人にとっては、「データモデルって何？」ってなります。私もなりました。
MSDNのチュートリアルでは、

アプリのモデル クラスでは、Entity Framework Core (EF Core) を使用して、データベースを操作します。

とあります。いまいちピンときません。ちょっと調べてみました。

寄り道①モデルって何？

気になったので調べてみましたが、MSDN特有の言い回しに辟易してしまったので、MSDN以外のサイトも調べてみました。
その中で、【ASP.NET MVC入門その2】ASP.NET MVCでModelクラスの実装のページにモデルの説明があり、そこには、

ASP.NET MVCのModelとは、データのやりとりをするためのクラスです。

と説明してくれています。
なるほど、データベースを操作するためのクラスということですね。
VB.NETで言うところの「OleDbConnection クラス」みたいなものでしょうか。
※間違ってたらすみません。

寄り道②MVCって何？

モデルを調べていて気になったのがもう一つ。MVCという単語です。「ASP.NET モデル」で検索すると、「MVC」という単語が必ずセットでついてきます。
MVCを調べて見ると、MVCについてマイクロソフトが説明しています。

どうやら、MVCというのは、Model-View-Controllerの略で、アーキテクチャのデザインパターンの一つであり、UI作成のために使われるようです。

  • Model…データ
  • View…ユーザー インターフェイス
  • Controller…アプリケーション ロジック

なるほど。
忘れてしまいそうですが、これはチュートリアルです。
チュートリアルで言ってる「データモデルの追加」というのは、「データをやり取りするためのコーディングをしましょう」ということですね。

気を取り直してデータモデルの追加

というわけでチュートリアルの「データモデルの追加」に戻ります。
MSDNの記載から流れを確認すると、

1-1. 「Models」フォルダを追加
1-2. 「Movie」クラスを追加
1-3. 「Movie」クラスにプロパティを作成

となっています。

1-1.「Models」フォルダを追加

まずは、Visual Studio で前回のチュートリアルで作成したプロジェクト「RazorPagesMovie」を開きます。

RazorPagesMovie プロジェクトを右クリックして、コンテキストメニューから「追加」→「新しいフォルダー」を選択し、プロジェクト内にフォルダを追加します。

20220222_001.png

すると、「新しいフォルダー」がソリューションエクスプローラー上に作成されます。
20220222_002.png

このフォルダの名前を、「Models」に変更します。
20220222_003.png

1-2.「Movie」クラスを追加

「Models」フォルダを追加したら、「Movie」クラスを追加します。
「Models」フォルダを右クリックしてコンテキストメニューを開き、「追加」→「クラス」を選択します。

20220222_004.png

「新しい項目の追加」画面がポップアップされるので、「クラス」を選んで、名前を「Movie」にして、追加をクリックします。
20220222_005.png
すると、ソリューションエクスプローラーの「Models」フォルダの中に「Movie.cs」が作成されます。
20220222_006.png

1-3.「Movie」クラスにプロパティを作成

「Movie」クラスを作成したら、今度は「Movie」クラスにプロパティを作成します。
ひとまず、MSDNのソースコードをそのままコピペ。

using System;
using System.ComponentModel.DataAnnotations;

namespace RazorPagesMovie.Models
{
    public class Movie
    {
        public int ID { get; set; }
        public string Title { get; set; }

        [DataType(DataType.Date)]
        public DateTime ReleaseDate { get; set; }
        public string Genre { get; set; }
        public decimal Price { get; set; }
    }
}

プロパティは、

  • ID…ID
  • Titel…タイトル
  • ReleaseDate…発売日
  • Genre…ジャンル
  • Price…価格

と言うところでしょうか。気になるのはこの1行。

[DataType(DataType.Date)]

これはプロパティに対して型を指定しているのですが、対象となるプロパティは、

public DateTime ReleaseDate { get; set; }

だけです。1行にまとめてもエラーが出ないので、こんな感じに書くと分かりやすいですね。

[DataType(DataType.Date)]public DateTime ReleaseDate { get; set; }

2.モデルのスキャフォールディング

データモデルのプロパティを作成したら、モデルのスキャフォールディングを行います。
…スキャフォールディングという、見たことも聞いたこともない単語が登場しました。

スキャフォールディングって何？

というわけで調べてみましょうスキャフォールディング。
CodeZineで分かりやすくまとめられています。

Scaffolding（スキャフォールディング）とは、データモデルとなる型を元に、いわゆるCRUD（Create/Read/Upadate/Delete)と呼ばれる追加、読込、変更、削除を行う画面とそのコードを自動で生成する機能のことです。
Scaffoldingを和訳すると「足場」という言葉であり、その名のとおり少ない手間でアプリケーションの「足場」となる大枠の構造を作ることを目的としています。従って、Scaffoldingは完全なアプリケーションを作るための機能ではない、ということは認識しておく必要があります。

なるほど。
作成したモデルを元にして、データ操作に必要な機能を自動で作ってくれるみたいですね。
ただし、大枠の構造を作るだけで、他の機能については自分で実装する必要があるようです。

スキャフォールディングしてみる

ではスキャフォールディングを実行してみます。
まず、ソリューションエクスプローラーの「Pages」フォルダを右クリックしてコンテキストメニューを開き、「追加」→「新しいフォルダー」を選択して、「Movies」フォルダを作成します。
20220222_007.png
こんな感じに「Pages」「Movies」フォルダを作ります。
20220222_008.png
「Pages」フォルダの中に「Movies」フォルダを作成したら、「Movies」フォルダを右クリックしてコンテキストメニューを開き、「追加」→「新規スキャフォールディングアイテム」をクリックします。
20220222_009.png
すると、「新規スキャフォールディング アイテムの追加」のポップアップが出て来るので、「Entity Framework を使用する Razor ページ (CRUD)」を選択して追加ボタンをクリック。
20220222_010.png
またまた少し寄り道を。
CRUDというまたまた新しい単語が出てきていますが、これは、

  • Create（作成）
  • Read（参照）
  • Update（更新）
  • Delete（削除）

の頭文字を取ったもので、データベース操作の基本的な機能です。DBMSにおけるDML（データ操作言語）に相当するものです。

話を戻して、「新規スキャフォールディング アイテムの追加」画面で、「Entity Framework を使用する Razor ページ (CRUD)」を選択して追加ボタンをクリックしたところです。
すると、「Entity Framework を使用する Razor ページ (CRUD)の追加」というポップアップが出てきます。
20220222_011.png
初期状態だと上図の様に空っぽなので、「モデル クラス」と「データ コンテキスト クラス」を設定します。
「モデル クラス」は、リストからMovie (RazorPagesMovie.Models)を選択します。20220222_012.png
「データ コンテキスト クラス」は、右にある「+」ボタンをクリックすると「データコンテキストの追加」のポップアップ画面が出て来るので、「新しいデータコンテキスト型」に「RazorPagesMovie.Data.RazorPagesMovieContext」を設定します。
20220222_013.png
MSDNのチュートリアルでは、

RazorPagesMovie.Models.RazorPagesMovieContext を RazorPagesMovie.Data.RazorPagesMovieContext に変更します。

とありますが、チュートリアル通りに進めると、「RazorPagesMovie.Data.RazorPagesMovieContext」がデフォルトで入っているはずです（私はそうでした）。
下の画像の様に設定したら追加ボタンをクリックします（チェックボックスは何も触らない）。
20220222_014.png
すると、「スキャフォールディングしています…」という画面が出て来るので、しばらく待ちます。
20220222_015.png

スキャフォールディングが完了すると、ファイルとフォルダが作成されます。
まず、「Movies」フォルダ内には次のcshtmlファイルが作成されています。

  • Create.cshtml
  • Delete.cshtml
  • Details.cshtml
  • Edit.cshtml
  • Index.cshtml

ソリューションエクスプローラーで見るとファイルが作成されていることが分かります。
20220222_016.png
また、RazorPagesMovieプロジェクトの直下に「Data」フォルダが作成され、その中に RazorPagesMovieContext.cs ファイルが作成されます。
20220222_017.png
これでスキャフォールディングは完了し、DB操作に必要がhtmlファイルが生成されました。

3. 初期移行

スキャフォールディングが完了したら、「パッケージ マネージャー コンソール」から初期移行を実施します。
といっても、MSDNのチュートリアルではコンソール画面にコマンドを入力して実行しているだけなので簡単です。

コマンドの実行

Visual Studio のメニュー画面の「ツール」を開き、「NuGetパッケージマネージャー」→「パッケージ マネージャー コンソール」を選択します。
20220222_018.png
すると、Visual Studio の画面の下に「パッケージ マネージャー コンソール」が出現します。
20220222_019.png
上の画像の赤枠で囲った部分が「パッケージ マネージャー コンソール」です。
ここに、コマンドを入力します。
まずは、
　Add-Migration InitialCreate
と入力して、Enterキーを押下。
20220222_020.png
「Build succeeded.」と出ていれば完了です。
20220222_021.png
次に、
　Update-Database
と入力して、Enterキーを押下。
20220222_022.png
こちらも「Build succeeded.」と出ていれば完了です。
20220222_023.png
そして上記のコマンドを実行すると、ソリューションエクスプローラーに「Migrations」フォルダが作成されます。
20220222_024.png
…何か気が付いたら作成されていたので、MSDNのチュートリアルに書かれていることを忖度しながら解読してみます。
まず、Add-Migration InitialCreate コマンドの実行で、「Migrations」フォルダが作成され、その中に「yyyymmddhhmiss_InitialCreate.cs」と「RazorPagesMovieContextModelSnapshot.cs」の2ファイルが作成されます。
その次の、Update-Database コマンドの実行で、「yyyymmddhhmiss_InitialCreate.cs」のUpメソッドが実行されます。

protected override void Up(MigrationBuilder migrationBuilder)
{
    migrationBuilder.CreateTable(
        name: "Movie",
        columns: table => new
        {
            ID = table.Column<int>(nullable: false)
                .Annotation("SqlServer:Identity", "1, 1"),
            Title = table.Column<string>(nullable: true),
            ReleaseDate = table.Column<DateTime>(nullable: false),
            Genre = table.Column<string>(nullable: true),
            Price = table.Column<decimal>(nullable: false)
        },
        constraints: table =>
        {
            table.PrimaryKey("PK_Movie", x => x.ID);
        });
}

なるほど、このUpメソッドでテーブルを作成しているんですね。

依存関係挿入に登録されるコンテキスト

MSDNのチュートリアルの順番に進めると、唐突に「依存関係挿入に登録されるコンテキストを調べる」が出てきます。
何だこれはという感じですが、

スキャフォールディング ツールによってデータベース コンテキスト context が自動的に作成され、依存関係挿入コンテナーに登録されました。

ということらしい。
長々と書かれていますが、スキャフォールディングではStartup.ConfigureServices メソッドに、モデルとして作成した「Movie」の情報を調整するように追記してくれているみたいです。
そしてもう一つは「Data」フォルダにある RazorPagesMovieContext.cs の話で、RazorPagesMovieContextクラス内で、プロパティが設定されている Movie クラスをデータセットとして扱うことが可能になっているようです。

4.実行

というわけで実行してみます。F5キーでもIIS Expressボタンでもどちらでも大丈夫です。
20220222_025.png
とりあえず立ち上がりました。
で、ここから、URLの末尾に「/movies」を加えてページ遷移します。
20220222_026.png
もし、https://localhost:xxxxx/movies （xxxxxはポート番号）にジャンプしない場合は、一度終了して、ビルドしてから再実行してみて下さい。
※私はジャンプしなかったのでビルドして再実行したら出来ました。

データを登録してみます。
チュートリアルの通りにポチポチと入力。
20220222_027.png
※コピペ用にテキスト貼っておきます。

  • Title：The Good, the bad, and the ugly
  • Genre：Western
  • Price：1.19

Createボタンをクリックし、登録されていることを確認。
20220222_028.png

大丈夫そうですね。

参考

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2