VB.net on ASP.net MVC でCRUD実装（備忘録）

# やること
以下の環境で簡単なCRUDアプリ(Web)を作る

+ フレームワーク：ASP.net MVC
+ 言語：VB.net
+ 開発環境：Visual Studio Community 2019
+ OS：Windows 10

※細かなバージョン等は割愛します

# 経緯
仕事で上記環境の案件に関わることになりまして、ASP.net MVCは未経験だったので少し触ってみようと思いました。
とりあえず簡単なCRUDアプリを作ってみようと思いネットで情報を探してみたのですが、言語はC#を使う例がほとんどでVB.netの解説はあまり見つかりませんでした。（最近はC#が主流のようですね・・・）
案件が始まってから困らないように、開発の流れを自分用にまとめておきます。

# 流れ
1. 新規プロジェクト作成
1. Modelの作成
1. Controller、Viewの作成（Entity Frameworkで自動生成）

Modelは手動で作る必要があるようですが、Entity Frameworkという機能(?)を使うと、CRUD機能が実装されたControllerとViewが自動生成されます。
Entity FrameworkはRailsのActiveRecordのようなもので、SQLを使わなくてもデータベース操作ができるようになっています。

# 実際にやってみた
## 1. 新規プロジェクト作成
Visual Studioを開き「新しいプロジェクトの作成」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/5a9d546e-8f71-8062-cc0b-673be5b6a23f.png)

テンプレート一覧から「ASP.NET Web アプリケーション(.NET Framework)」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/bae072ba-a9ac-1f6c-2003-428e306af083.png)

プロジェクト名を入力し作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/66eeafab-f225-9152-6fda-b927632b3227.png)

一覧から「MVC」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/7d67b2cb-98d6-8c73-b1eb-32f1e1dc9083.png)


## 2. Modelの作成
今回はCRUD操作の対象を「Item」とします。よってItemテーブルが必要となりますが、それはこの後登場するエンティティ、コンテキストクラスを作成すれば自動生成されます。

### エンティティの作成
エンティティはテーブルと紐づくクラスで、これに対して操作することでCRUD処理ができるようです。
今回は「Itemクラス」を作成します。

画面右側のツリーのModelsを右クリックし、追加＞新しい項目
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/54d83b86-a0ca-c483-f71a-07fd569294eb.png)

Visual Basicから「クラス」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/f172b7ea-3d52-3c1c-a8f3-8092a631093f.png)

Modelフォルダの中にClass1.vbというクラスファイルが作成されますが、今回は「Item.vb」にファイル名を変更します。

今回はItemテーブルのカラムにName、Weightを設定しようと思います。そのためには、ItemクラスにName、Weightプロパティを記述します。

```Item.vb
Public Class Item
    Public Property Id As Integer
    Public Property Name As String
    Public Property weight As Integer
End Class

```

### コンテキストクラスの作成
コンテキストクラスは、エンティティをDBにつなぐためのクラスとなるようです。先ほどエンティティに対して操作するとCRUD処理ができると書きましたが、実際はコンテキストクラスを通して操作します。
Railsではこの機能はModelに含まれていたので必要なかったと思いますが、ASP.net MVCでは分かれているようです。JavaでいうところのRepositoryのようなものかもしれません。

画面右側のツリーのModelsを右クリックし、追加＞新しい項目
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/54d83b86-a0ca-c483-f71a-07fd569294eb.png)

「ADO.NET Entity Data Model」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/d4a797dc-83f4-1d7c-fcdf-e991e73fe733.png)

「空のCode Firstモデル」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/5f0ddde0-8c1e-4722-f7c9-ea384a393f83.png)

モデルフォルダの中に、Model1.vbというファイルが作成されます。
今回はファイル名を「ItemContext.vb」に変更しました。

このItemContextクラスの中に、先ほど作成したItemクラスと紐づけるための記述を追加します。
また、ファイル名修正前のModel1の記述をItemContextに修正します。

```ItemContext.vb
Imports System
Imports System.Data.Entity
Imports System.Linq

Public Class ItemContext
    Inherits DbContext

　　～省略～

    Public Sub New()
        MyBase.New("name=ItemContext") '★この行を修正
    End Sub

　　～省略～

    Public Property Items As DbSet(Of Item) '★この行を追加

End Class

～省略～
```

また、ツリーからWeb.configというファイルを開き、connectionStringsの「Model1.vb」を「ItemContext.vb」に変更します。（2ヵ所あると思います）
これはDBへの接続情報で、コンテキストクラスを作成した際に自動生成されるようです。

```Web.config
  <connectionStrings>
    <add name="ItemContext" connectionString="data source=(LocalDb)\MSSQLLocalDB;initial catalog=CrudApplication.ItemContext;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework" providerName="System.Data.SqlClient" />
  </connectionStrings>
```


## 3. Controller、Viewの作成
先述の通り、Entity Frameworkを使うとCRUD機能が実装されたControllerとViewが自動生成されます。

画面右側のツリーのControllersを右クリックし、追加＞コントローラー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/6f9b01ba-48d0-362d-e203-71d716f21412.png)

「Entity Frameworkを使用した、ビューがあるMVC 5コントローラー」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/3a02556c-c259-13a0-c165-e7089cb13449.png)

モデルクラスに「Item」、データコンテキストクラスに「ItemContext」を選択。コントローラ名は「ItemsController」とする。（デフォルトで入力済み）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/295f3a0c-705b-cc7d-c74e-9a10d4ca3c30.png)

※ここでエラーが発生する場合、一度ビルドしてから再度実施すると上手くいくかもしれません


# アプリ起動
これで完成です。アプリを起動すると以下のような画面が立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/ea629772-4f7b-1ee1-6506-c331e0acaaa1.png)

詳細は割愛しますが、画面に従い操作すればCRUD操作ができるようになっています。
このように簡単な手順でCRUDアプリを作ることができました。先述のようにASP.net MVCでVB.netを使う場合情報があまり多くないですが、生成されたソースコードを読み解けば見えてくるものがあるかもしれません・・・


# 最後に
いろんな情報を寄せ集めて実装したので、もっと効率が良いやり方、正しいやり方があるのかもしれません。
あくまでも備忘録なので参考までに・・・


# 参考リンク
https://itsakura.com/aspnet-mvc-helloworld

https://www.atmarkit.co.jp/fdotnet/aspnetmvc3/aspnetmvc3_03/aspnetmvc3_03_01.html