💭

【ASP.NET Core MVC】DBに接続してWebアプリをつくる①

2023/11/14に公開

.NET

データベースの接続がプログラミング始めた時からずっと嫌いでしたが、
以下の方法でなんとかなったので、忘れないように書いておきます。
業務でやったら褒めてもらえました。
やっぱり褒めてもらったらうれしいよね！！！！！

はじめに

.NET系っていろいろ種類がありますが、難しいことは一旦置いといて。
ここで言えるのは、ASP.NETとASP.NET CoreではASP.NET Coreの方が新しいということです。
この記事を書くためにどちらも少し触っていますが、
少し触っただけでもCoreの方ができることの幅が広がってるな～と感じますね。

MVCはオブジェクト指向を基にした考え方の名前なので、
ASP.NETでもASP.NET Coreでも利用できます。
なんならどの言語においても、応用が効くのではないでしょうか。
Model、View、Controllerに分けて、それぞれ明確化できるので
シンプルに考えやすい、実装しやすいです。

どうせやるなら新しいほう使ってやっていきます！！

作るもの

今回は、ASP.NET Core MVC、EntityFrameWorkを使用して、
簡単な社員管理ができるWebアプリケーションを作成します。
記事のメインはデータベース接続ですが、
それだけだと味気ないので、ついでに以下機能も実装します。
主にCRUDというやつです。
・登録
・編集
・削除
・検索（②に記載）

環境

・Visual Studio 2022 Community
上記がインストールされている状態からスタートします。

1.プロジェクトを作成する

最初のプロジェクトを作成します。

1.VisualStudioを開き、赤枠部を押下

2.赤枠のプロジェクトを選択し、「次へ」を押下

3.プロジェクト構成を決定し、「次へ」を押下

赤枠内を任意の設定に変更してください。

4.追加情報を選択し、「作成」を押下

赤枠内の通りに選択してください。
無事にプロジェクトが作成されたと思いますので、デバック実行してみます。
赤枠部分を押下してください。

以下のような画面がブラウザ上に表示されていればOKです！↓↓

2.Modelを追加する

Modelsにクラスを追加していきます。
MVCのM(Model)の部分です。

1.画面右部のソリューションエクスプローラから、Modelsを右クリックし、「追加」、「クラス」を押下

2.クラスを選択し、名前を付けたら「追加」を押下

クラス名は任意のもので大丈夫です。
今回は、社員管理アプリを作成するので、Employeeクラスとしました。

3.作成したModelクラス内のコードを以下に変更する

ここにいるのが各プロパティ達です。
難しいことは言えませんが、まあ、クラスが持っている変数と
思っておけば大丈夫だと思います。
今回の場合、各社員さんのID(int)と名前(string)とエリア(string)入社日(date)を
定義しているかんじです。
後に詳しいことを追記しますが、IDを主キーとします。

using System.ComponentModel.DataAnnotations;
namespace WebApplication1.Models
{
    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Area { get; set; }
        [DataType(DataType.Date)]
        public DateTime HireDate { get; set; }
    }
}

4.ビルドする

Modelクラスを変更した後は、毎回ビルドすることが基本のようです。
後々発生するエラーの原因になる場合があるそうで...

ビルドは各々好きな方法で行っていただいたらいいのですが、
参考までに以下方法を添付しておきます。
ソリューションエクスプローラのプロジェクト名の上で右クリック、「ビルド」を
押下してみてください。
(なんかベテランの人にお前いつもこんなめんどくさいやり方でビルドしてんの？？？と思われていそうです。Ctrl＋Shift＋Bでもいけます。)

エラーが出なければ、次へ行きます！！！

3.Modelを使ってスキャフォールディングする

この機能めちゃ便利なので、このややこしい名前もすぐ覚えられると思います！
簡単に言うと、アプリに必要な機能をぜーんぶ自動生成してくれるものです。
ありがたい世界ですね....
ここで主に作成するのは、MVCのC(Controller)の部分です。

1.画面右部のソリューションエクスプローラから、Controllersを右クリックし、「追加」、「新しいスキャフォールディングアイテムの追加」を押下

2.「インストール済み」、「共通」、「MVC」の配下にある、EntityFrameworkを使用した　　　ビューがあるMVCコントローラーを選択し、「追加」を押下

3.モデルクラス名、コントローラー名を決定する。

赤枠の部分にそれぞれの名前を入力してください。
Controller名は、「〇〇Controller.cs」とするのが約束なので、
そんな感じで命名してもらえればと思います。

4.「＋」を押下

赤枠部分を押下してください。

5.データコンテキストの追加より、コンテキストの型が追加される

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

6.赤枠部が自動的に入力される

今回はこのままデフォルトで進みます。
「追加」を押下してください。

ここまででエラーがないか確かめるために、一度ビルドしておくといいかんじですね。

4.データベースを作成して繋ぐ

いよいよデータベースの話に移っていきます。
今回使用するのはEntityFrameWorkです。
.NETにあるライブラリで、オブジェクトを勝手にデータベースに反映してくれるこです。
これのおかげでSQL文を記述しなくてもいいし、
テーブルも自分で作らなくていいってことです。最高です。

1.画面上部のツールバーから、「NuGetパッケージマネージャー」、「パッケージマネージャーコンソール」を選択する

2.コマンドを入力する

コンソールが表示されるので、赤枠部に以下のコマンドを入力してください。

Add-Migration InitialCreate
Update-Database

ここまでの手順で大体の機能は実装できています！
意外といけたのではないでしょうか？？
ビルドして、現時点でのエラーがないことを確認したら、
先ほどと同様に、デバック実行してみましょう！！！

見たことある画面ですね。
画面上部のURLの末尾に「Employees」と追記してEnterを押下してみてください。

おお！！いいかんじですね！！！
スキャフォールディングしたおかげで、MVCのV(View)が勝手に出来上がっています。

5.Ｗebページから社員を管理してみる

ここまでで完成したアプリの機能をさらっと見ていきます！！
機能の確認するだけなので、しなくてもよい方は読み飛ばしてください。

1.登録

「Create New」を押下すると、Createページに遷移します。
画面遷移しているので、URLもかわってますね。

ここから社員さんの新規登録が行えるわけです。
Createボタンを押下すると、無事データベースに登録されていることがわかりますね。

2.編集

「Edit」をを押下すると、Editページに遷移します。

先ほど登録した田中さんのエリアのデータを「大阪」→「東京」に編集してみます。
Saveボタンを押下すると、編集した内容に変更されて表示されてます！

3.削除

「Delete」を押下すると、Deleteページに遷移します。

Deleteボタンを押下すると、登録した社員さんのデータが削除できています！

一旦休憩...

ここまで閲覧いただき、ありがとうございました。
ここまでできれば、一応簡単なWEBアプリケーションとして動作できていることになります。
ただ、ちょっともう少しいじりたい部分が何か所かありますね...
「主キー見れなくない？」とか
「カラム名がそのままアルファベットで表示されてて見づらいよね？」とか...
まあ言い出したらキリがないのですが...

②で上記解決方法をはじめ、検索機能の実装方法等を記載しています。
良ければご覧ください！！