ASP.NET6.0でスキャフォールディングする方法

この記事では

・MVC、スキャフォールディングの概念について理解する。

・ASP.NET_MVCプロジェクトを作成し、スキャフォールディングを行う。

はじめに

初めて記事を書きます。
記事を書く経緯と致しまして、理由は3つほどあります。

・ASP.NET_MVCの初心者用の記事が少ないように感じたため。
・私自身の復習のため。
・Qiitaで記事を書いてみたいと思っていたため。

まだ私自身初心者SEというところもありますので、間違っているところがある可能性が高いです。
適当に見て頂けると助かります。
まずは、なんとなく理解しようというそこのあなたに必見です。
私は文章をかなり適当に読んでしまうので、大切な部分は太くしておきます。

前置きはこのくらいにして、タイトル通り、スキャフォールディングを丁寧に解説したいと思います。

開発環境

開発環境	使用するもの
IDE	VisualStudio2022
DB	SQLserver
フレームワーク	ASP.NET6.0
	ASP.NET Core
	Entity Framework Core
言語	C# CSHTML JavaScript

MVC（Model-View-Controller)って何？

「みんなで何かアプリケーションを作るときに、どこにどんなプログラムを書けば、わかりやすいかなあ。」

そうだ

「どのプログラムが何をするのか、役割を決めておこう。」みたいな考え方です。

下表がそれぞれの役割です。

MVC	役割
Model	情報の集まり
View	画面(今あなたが見ているこの画面です)
Controller	裏でデータを渡したり、もらったり、取ってきたりする

詳細

Model

基本にエンティティクラスが書かれていることが多いです。
Controllerでどんな名前でどんな値を格納して、Viewに渡すのか。
そんな定義を書くところです。

例えば、ECサイトで、本の情報を載せる際に、こんな情報が最低でも必要なはずです。

・本の製造番号
・タイトル
・著作者
・価格
・発行者

画面にこういう情報を持っていきたいんだ。。。そんな時に定義します。

book.cs

namespace WEBAPP.Models
{
    public class Book
    {
        public int Id { get; set; }
        public string? Title { get; set; }
        public string? Author { get; set; }
        public int Price { get; set; }
        public string? Publisher { get; set; }
    }
}

View

Viewは画面です。
視覚情報です。
ユーザーが見ることができるものは、すべてViewだと思ってください。
HTML・CSS・JavaScriptで書かれていることが多いです。

※今回の実装ではASP.NET_MVCのWEBアプリケーションでは、CShtmlというものを用います。

Controller

画面に必要な情報を持ってきたりします。

多分わかりづらいと思うので、また解説する機会があればします！！

ASP.NET_MVCプロジェクトの作成

まず、はじめにこっから作業を始めていくわけですが、

「プロジェクトを間違えない」

これが大切です。

ここを間違えてしまうと、構成されているファイルなど外見から中身まで、すべて異なってしまいます。

検索窓にMVCと入力し、上から二番目のASP.NET Core Web アプリ(Model-View-Conttroller) を選択し、

右下の「次へ」ボタンを押しましょう。

プロジェクト名に自分で決めたWEBアプリ名を入力してください。

※今回、私は「WEBAPP」というプロジェクト名で進めていきたいと思います。

右下の「次へ」を押しましょう。

今回は、HTTPS用の構成が必要ありません。

HTTPS用の構成のチェックを外し、「作成」を押しましょう。

フレームワークなど他設定は基本的にいじらなくてOKです。

念のためフレームワークが.NET6.0になっていることを確認してください。

そしたら、なんか出てきましたね。これでプロジェクトの作成は完了です。

ASP.NET_MVCプロジェクトの実行

今の作業を行って頂くと、自動的に簡易的な(Model-View-Conttroller)が生成されます。

もうページができています。

これがフレームワークを用いる素晴らしさですね。
プログラムを自動で生成してくれます。

時代に感謝ですね。
では、一度確認してみましょう。

**「右側のちっちゃい緑の矢印ボタン」**を押してください。

すると、こんな画面が出てくるはずです。
これで成功です。
これから画面を更新する際には、「右側のちっちゃい緑の矢印ボタン」 を押します。

Modelの作成

とりあえず、今回はBook.csクラスをModelに作成します。

Modelのファイルにドラッグを合わせ、右クリック、追加、新しい項目 を選択してください。

下の画面が出てくるはずです。

クラスを選択し、一番下の名前をBook.csに変更

追加を押下してください。

ミスってしまって消せるので、大丈夫です。

作成してしまったBook.csにドラッグを合わせ、右クリック、削除 を選択してください。

上手く実行すれば以下のような画面が出てくるはずです。

以下コードを入れてみてください。

book.cs

namespace WEBAPP.Models
{
    public class Book
    {
        public int Id { get; set; }
        public string? Title { get; set; }
        public string? Author { get; set; }
        public int Price { get; set; }
        public string? Publisher { get; set; }
    }
}

以下のようになれば、OKです。

Modelの作成については完了です。

ここまでが下準備です。

ここからスキャフォールディングをおこなっていきます。

そのまえに・・・・

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

そもそも、「スキャフォールディングって何？」っていう話だと思います。

私もASP.NET_MVCを始めるときに、なんぞこれってなりました。

簡単に申し上げますと、

Modelに対応したコントローラやDBとの接続などのプログラムの自動生成機能です。

今回、私と同じように実装を行うと

・自動的にDBとのやり取りを行うことができるViewを作成することができる。

・Modelに即したデータの「CRUD」コントローラを作成することができる。

スキャフォールディングを行う

Controllerのファイルにドラッグを合わせ、右クリック、追加、新規スキャフォールディングアイテム を選択してください。

以下画面が出てきたら成功です。

ここからはASP.NET Core にある Entity Framework Core　というフレームワークを使用していくことになります。
(インストールしましょう。)

Entity Framework を使用したビューがあるMVCコントローラーを選択し、追加を押してください。

行うと以下のような画面が出てくると思います。

ここ、ミスりやすいので注意です。ミスったらやり直しです。

モデルクラス：Book(←先ほど作成したお手製のclassです)

データコンテキスト　クラス：始めはここに何もありません。

そのため、右の＋ボタンを押してください。

すると以下画面が出てくると思うので、追加を押します。

以下画面と一致しているを確認し、追加を押してください。

もしやり直し等をしてミスってしまい、ビルドエラーが出た場合、初心者のあなたは、もう一度一から手順を始めましょう。

（そちらの方が早いです。）

無事成功すると、以下のような画面が出てきます。

コントローラファイルにbookControllerが生成されています。

あれ？なんか先ほどまでなかったものまで入ってる。
Dataファイルなんてあったっけ？？
なんだーこれ？（ロバート山本)

後に解説させて頂きますが、作業を続けたいと思います。

以下画面のSharedファイルにある**_Layout.cshtmlをダブルクリックしてください。**

この画面が開けるはずです。
下の

タグの部分に少し開業を加えてスペースを空けて

以下のhtmlをコピーして貼り付ける。

_layout.cshtmlの一部

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

以下のようになるはずです。
画面を更新してみましょう。
さっきやりましたよね？？？
「右側のちっちゃい緑の矢印ボタン」 を押します。

こんな感じで、BOOKsが追加されました。やったね。

SQLserverと接続させる

今からの作業はSQLserverとの接続に必要な部分についての解説・作業を行います。

appsettings.jsonをダブルクリックし、中のコードをいじります。

以下画面のWEBAPPContextを変更します。

ここは、自分のSQLserverの認証方式、データベースによって、変わってくる部分です。

以下サイトが接続文字列としてわかりやすかったので、載せておきます。

こんな感じで記載します。
認証方法も結構DBにより変わりますので、そこは調べましょう。

appsettingsの一部

"ConnectionStrings": {
    "WEBAPPContext": "Server=[サーバ名]\\SQLEXPRESS01;Database=[テーブル名];Trusted_Connection=True;MultipleActiveResultSets=true"
  }

自分の指定したサーバ・データベース上にBookクラスと同じテーブルを作成します。

Bookのテーブル

CREATE TABLE Book (
	Id INT NOT NULL PRIMARY KEY IDENTITY(1,1)
	,Title NVARCHAR(50)
	,Author NVARCHAR(50)
	,Price INT 
	,Publisher NVARCHAR(50)
);

さあ画面を開いてみよう。

そうして、以下画面のBooksを押下してみると。。。
こんな画面がでてきたぞ！！
これでCRUDの画面を生成することができました。

これで何ができるようになったの？？？？

まあ見てなさい。
下の画面みたいに入力すると、

HTML上でも以下のように更新される！！

まさか、DBにもと思ったあなた。。。

正解。

DBも更新されます。

本来であれば、DB接続には、以下のようなコードを書かないといけなかったはず。。。

このようなめんどくさい作業をスキャフォールディングで自動生成することができます。

しかも、詳しく見ればわかるのですが、非同期処理が施されていたり、かなり便利です。

SQL接続の為の文

using System.Configuration;
using System.Data.SqlClient;
 
public void Connect1()
{
    // 接続文字列の取得
    var connectionString = ConfigurationManager.ConnectionStrings["sqlsvr"].ConnectionString;
 
    // データベース接続の準備
    var connection = new SqlConnection(connectionString);
 
    // データベースの接続開始
    connection.Open();
 
    // 実行するSQLの準備
    var command = new SqlCommand();
    command.Connection = connection;
    command.CommandText = @"SELECT count(*) FROM T_USER";
 
    // SQLの実行
    command.ExecuteNonQuery();
 
    // データベースの接続終了
    connection.Close();
}

解説

疲れたので、のちに更新

まとめ

ASP.NETのフレームワークやスキャフォールディングを行うことのメリット

・Modelを作成することで、DBとの接続を自動生成することができる。

・コーディングミスによる遅延減少を見込める

・非同期処理を行っているので、データの独立性も高くなる。

こんなもんでしょうか。また、何か気づいたら足していきたいと思います。

[ASP.NET6.0][ASP.NET_MVC]MVC・スキャフォールディングを丁寧に解説