【ASP.NET MVC5】実務で使える簡単なCRUD機能の作成

プログラミング初級の方が、実践の場でプログラミングをする際に、
必ずと言って作るであろうCRUD(クラッド)機能。

Create(生成)
Read(読取)
Update(更新)
Delete(削除)

これら4つの機能をまとめてCRUD(クラッド)と呼ばれています。

この記事では、ASP.NET MVC5のプロジェクトにて、CRUD機能の
を作成する方法をまとめてあります。

今回は、商品データをデータベース上で管理して表示、追加、編集できる簡単なシステムを開発していきます。
作成する画面は、以下の通りです。

No 画面名 CRUD 画面詳細
1 商品一覧画面 Read 商品データを読込、一覧として表示する画面
2 商品登録画面 Create 商品データを新規に登録する画面
3 商品編集画面 Update
Delete
商品データの内容を更新または削除する画面

 

事前準備

使用ツール

・Visual Studio Community 2019
こちらでダウンロード可能です。(無料)

・SQL Server 2019 Developer エディション
こちらでダウンロード可能です。(無料)

使用プロジェクト

こちらの記事で作成したログイン機能のプロジェクトを使用して解説していきます。

Entity FrameWorkのバージョン:6.0.2
bootstrapのバージョン:3.4.1

データベース構築

今回は、Microsoft SQL Server でデータベースを作成して、商品テーブル(T_COM)を作成します。
SQL Serverのインストールに関しては、ここでは割愛します。

商品テーブルのカラム情報

No. 論理名 物理名 データ型 Not Null デフォルト 備考
1 商品ID com_id bigint identity Yes (PK)
2 商品名 com_name nvarchar(100)
3 商品詳細 com_detail nvarchar(max)
4 削除フラグ del_flag tinyint Yes 未削除:0 削除済:1
5 登録日時 create_date datetime Yes
6 登録ユーザー create_user nvarchar(50)
7 更新日時 update_date datetime Yes
8 更新ユーザー update_user nvarchar(50)

 

SQL Server上で、以下のSQLを実行してください。

商品テーブル(T_COM)

商品テーブル(T_COM)の初期データ

Entity Data Model更新

データベースでテーブルの追加、初期データ追加ができたら、プロジェクト上でADO.NET Enitiy Data Modelも更新して、
データベースの情報をマッピングする為のEDMファイルを作成します。
(Visual Studio上でEDMファイルを作成する方法は、こちらの記事を参照ください。)

対象のEDMファイルのデザイナー画面を開き、右クリック→「データベースからモデルを更新」を選択します。

EDMのデザイナー画面に、商品テーブル(T_COM)が追加された事を確認できたら、
Ctrl+Sで上書き保存しましょう!

 

一覧表示機能作成

EDMに商品テーブル(T_COM)を追加したので、商品一覧を表示する一覧画面を作っていきましょう。

Modelの作成

まずは一覧画面のデータを表示する際にマッピングするためのモデルを作成します。
プロジェクト内の「Model」ディレクトリにComModel.csを新規作成してください。

一覧には、商品名は必須入力にする為、12行目で
アノテーションの設定(必須、エラーメッセージ)をしておきます。

 

Controllerの作成

次に商品テーブル(商品)からデータを取得する処理を記述する為、
プロジェクト内の「Controller」ディレクトリにComController.csを新規作成してください。

ポイントは商品テーブル(T_COM)から削除フラグが0(未削除)のデータを、作成したComModelクラス型のインスタンスに代入します。
取得した結果をViewに送ります。
※SAMPLEDB01Entitiesは、私がEDMファイルを作成した際に設定したエンティティの名前の為、ご自身で設定したエンティティ名に変更してください。

 

Viewの作成・修正

続いては一覧画面のViewを作成する為、
プロジェクト内の「View」ディレクトリにComというディレクトリを新規作成し、
その中にindex.cshtmlを新規に作成してください。

次に商品一覧画面に遷移する為のリンクを設定する為、ヘッダーメニューの_Layout.cshtmlに
リンクを追加します。

10、35行目は、商品管理システムなど適当なシステム名を設定しておきましょう。
14行目で商品一覧画面に遷移するリンクを追加します。
ASP.NET MVCプロジェクトのデフォルトで入っているホーム、詳細、問い合わせのリンクは、使用しない為、削除しました。

 

新規登録機能の作成

次に商品データを新規登録(Create)する機能を作っていきます。

Controllerの修正

一覧機能(Read)で作成したComController.csに新規登録に必要なコードを追加します。

同じCreateメソッドになっていますが、
画面表示時は、GETの方のメソッドを使用して、登録時はPOSTの方のメソッドを使用しています。

POST時の処理の流れとしては、
入力チェック ⇒ 登録処理 ⇒ 一覧画面にリダイレクトになっています。
※登録処理で商品IDの記載がないですが、商品IDはテーブルの設定で自動採番するようにしている為、登録時に記載する必要がありません。

 

Viewの作成

一覧画面(Read)で作成したComディレクトリ上に、Create.cshtmlを新規に作成してください。

編集機能(更新・削除)の作成

新規作成画面が完成したら、最後に更新、削除機能を作成します。

新規作成画面でContollerとViewを作成した際に、
Viewのファイル名とContorollerのメソッド名は、一致している事に気が付きましたか?
その流れで更新・削除処理を実装すると、Viewを更新用、削除用の2つ作成しないといけません。

実務の場合、更新、削除の画面が、別々に分かれているCRUDアプリは、ほぼないでしょう!
その為、今回はViewは1つのファイルにして更新、削除ができるようにします。

1つのViewファイルから処理するメソッドをSubmitした時に分ける方法がないか?
探していたところ、ここのサイトに方法が書かれていました。
Contorollerのメソッドに、ActionNameとButtonのカスタムのアノテーションを設定することで可能になります。

しかし、カスタムアノテーションの為のクラスを別途作成する必要があります。
別の画面でも共通で使用できるようにする為、共通のBaseContollerのファイルを作成して、
ComContollerの継承元をBaseContollerに修正します。

 

Contollerの修正

BaseContollerの作成

まずは、プロジェクト内の「Controller」ディレクトリにBaseController.csを新規作成してください。

Contollerの修正

次にComControllerの継承元クラスをControllerからBaseControllerに修正。
編集画面表示、更新用、削除用のメソッドを追加します。

メソッド名の上に、
[ActionName(“Edit”)]
[Button(ButtonName = “Save”)]
を設定することで、Submit時の処理を分岐しています。

削除処理に関しては、データを直接削除するわけでなく、
商品テーブル(T_COM)の削除フラグを1(削除済)に更新して、
1(削除済)の商品データに関しては、一覧画面で読込する際に、
取得しないようにする事で、削除されたように見せています。
※こういったフラグの値を変更して削除する方法を論理削除と呼ばれています。

Viewの作成

Create.cshtmlと同じようにComディレクトリ上に、Edit.cshtmlを新規に作成してください。
内容は、Create.cshtmlとほぼ同じですが、
タイトルと配置しているボタンが異なるだけで、他は変わりません。

※27、28行目の削除、更新ボタンのname属性は、ControllerのButtonNameで記載した文字列と同じにしてください。

JSファイルの修正

これで削除処理が実行されるようになりましたが、
このままでは削除ボタンをクリック後、問答無用に削除処理が実行されてしまい、
誤操作などした場合に、取り返しがつかなくなります。
その為、確認ダイアログを表示して、「OK」をクリックした場合のみ削除処理が実行されるようにします。

※今回はcommon.jsというjsファイルに記載します。
新規にcommon.jsを作成・読込の方法は、こちらの記事で書いてあります。

 

まとめ

ここまで実装できたら、早速実行してみましょう!

【実行結果】

今回はかなりボリュームのある内容でしたが、如何でしたか?
現場に入って多くの初心者が、まず初めに任されるであろう機能が、
こういったCRUD機能の実装です。

これができるか?できないか?で
次のステップに進める登竜門のような機能です。

自分で一度作成した事があれば、
言語が変わろうが、やることは一緒です!
是非、練習と思って取り組んでみてください(^^)

それでは、今回もありがとうございました!

お問い合わせはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA