ASP.NET(VB.NET) MVCモデル入門～データベース接続

VB.NETアプリケーションからSQL Server Express LocalDBに接続する

今回は、VB.NETアプリケーションから、Visual Studioに付属しているSQL Server Express LocalDBに接続するプログラムを作ります。
VB.NETアプリケーションとデータベースの接続には、ADO.NETを使用します。
ADO(ActiveX Data Object).NETとは、SQL Serverなどのデータソースへの接続や、データソースに格納されているデータの取得、操作、更新を行う仕組みです。
ADO.NETに関する詳しい内容は、以下のマイクロソフトの公式サイトを参照してください。

Microsoft Docs ～ ADO.NET の概要

ADO.NET Entity Data Modelの作成

まず、新しいプロジェクトとデータベースを作成します。
データベースの作成手順は、こちらの記事を参照してください。
今回のプロジェクト名は「Test2」、データベース名は「TestDb」とします。
作成したデータベースをVB.NETアプリケーションに接続するために、ADO.NET Entity Data Modelを使用します。

ソリューションエクスプローラーの「Models」にカーソルを合わせて、右クリックから「追加」→「新しい項目」を選択します。

左ペインの「データ」に合わせてから「ADO.NET Entity Data Model」を選択し、任意の名前を入力して、「追加」ボタンを押下します。

「データベースからEF Designer」を選択し、「次へ」ボタンを押下します。

しばらくすると、作成したデータベースが選択されるので、「次へ」ボタンを押下します。
※自動的にデータベースが選択されない場合は、「新しい接続」ボタンを押下して、データベースを手動で選択します。

「Entity Framework 6.x」が選択されていることを確認して、「次へ」ボタンを押下します。

モデルに含めるテーブルにチェックを入れて、「完了」ボタンを押下します。

セキュリティ警告画面が何回か表示されますが、「OK」ボタンを押下して処理を継続します。

しばらくすると、以下の画面が表示されます。
ソリューションエクスプローラーのModels配下に、"入力したモデル名".edmxという名前で、ADO.NET Entity Data Modelが作成されます。

ADO.NET Entity Data Modelの内容を確認するには、ソリューションエクスプローラーから作成したモデルにカーソルを合わせ、アイコンメニューの「すべてのファイルを表示」アイコンをクリックします。

展開すると、テーブルの内容が定義されたVBファイル(Emp.vb)があることが分かります。

Imports System
Imports System.Collections.Generic

Partial Public Class Emp
    Public Property Id As Integer
    Public Property Name As String
    Public Property Address As String
    Public Property Birthday As Date
    Public Property Email As String

End Class

Imports System

Imports System.Collections.Generic

Partial Public Class Emp

Public Property Id As Integer

Public Property Name As String

Public Property Address As String

Public Property Birthday As Date

Public Property Email As String

End Class

このクラスに、アノテーションで各プロパティにラベルと、生年月日に表示フォーマットを追加します。

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.ComponentModel.DataAnnotations

Partial Public Class Emp
    Public Property Id As Integer

    <DisplayName("氏名")>
    Public Property Name As String

    <DisplayName("住所")>
    Public Property Address As String

    <DisplayName("生年月日")>
    <DisplayFormat(DataFormatString:="{0:yyyy年MM月dd日}")>
    Public Property Birthday As Date

    <DisplayName("メール")>
    Public Property Email As String
End Class

Imports System

Imports System.Collections.Generic

Imports System.ComponentModel

Imports System.ComponentModel.DataAnnotations

Partial Public Class Emp

Public Property Id As Integer

<DisplayName("氏名")>

Public Property Name As String

<DisplayName("住所")>

Public Property Address As String

<DisplayName("生年月日")>

<DisplayFormat(DataFormatString:="{0:yyyy年MM月dd日}")>

Public Property Birthday As Date

<DisplayName("メール")>

Public Property Email As String

End Class

データベース接続用コントローラーの作成

作成したADO.NET Entity Data Modelを使って、データベースに接続するコントローラーを作成します。

ソリューションエクスプローラーから「Controllers」にカーソルを合わせ、右クリックから「追加」→「コントローラー」を選択します。
以下の画面から「MVC 5 コントローラー - 空」を選択し、「追加」ボタンを押下します。

コントローラー名を入力して、「追加」ボタンを押下します。

コントローラーに対応するビューの作成

ソリューションエクスプローラーから「Views/Home」にカーソルを合わせ、右クリックから「追加」→「ビュー」を選択します。
以下の画面から「MVC 5 ビュー」を選択し、「追加」ボタンを押下します。

ビュー名、テンプレートを入力し、「追加」ボタンを押下します。

_Layout.vbhtmlとスタイルシート(Site.css)の編集

ビューを作成すると、自動的に「Views/Shared/_Layout.vbhtml」と「Content/Site.css」が作成されます。

「_Layout.vbhtml」と「Site.css」を、以下のように修正します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    @RenderBody()
</body>
</html>

<!DOCTYPE html>

<head>

<title>@ViewBag.Title - My ASP.NET Application</title>

</head>

<body>

@RenderBody()

</body>

</html>

body {
    margin: 20px;
    padding: 20px;
}

table {
    border-collapse: collapse;
    width: 60%;
}

th {
    background-color: yellow;
    border: 1px solid;
}

td {
    border: 1px solid;
}

body {

margin: 20px;

padding: 20px;

}

table {

border-collapse: collapse;

width: 60%;

}

th {

background-color: yellow;

border: 1px solid;

}

td {

border: 1px solid;

}

データベース接続用コントローラーの編集

作成したコントローラーを、以下のように修正します。
ファイルやデータベースの操作では、最後にDisposeを呼び出して、リソースを開放する必要があります。
VB.NETでは、Usingステートメントを使うことによって、Using ～ End Usingの中で使ったリソースの開放が行われます。
そのため、明示的にDisposeを呼び出す必要がなくなります。
10行目で、TestDbModel.Context.vbに定義されたTestDbEntitiesクラスを使用して、データーベースの情報を取得します。
Usingステートメントの中でデータベースの処理を記述しているので、データベースのリソースをDisposeする必要はありません。

Imports System.Web.Mvc

Namespace Controllers
    Public Class HomeController
        Inherits Controller

        Function Index() As ActionResult
            Dim emp As List(Of Emp)

            Using db As New TestDbEntities
                emp = db.Emp.ToList()
            End Using

            Return View(emp)
        End Function
    End Class
End Namespace

Imports System.Web.Mvc

Namespace Controllers

Public Class HomeController

Inherits Controller

Function Index() As ActionResult

Dim emp As List(Of Emp)

Using db As New TestDbEntities

emp = db.Emp.ToList()

End Using

Return View(emp)

End Function

End Class

End Namespace

データ表示用ビューの編集

1行目で、ビューで想定されるオブジェクトの種類として、Empクラスを指定します。
IEnumerableインターフェースを使うことで、データベースのレコードが複数あっても、一度に1レコードずつ渡されます。
13行目で、Modelオブジェクトに格納されているレコードを、For Each文で1レコードずつ取得します。

@ModelType IEnumerable(Of Emp)
@Code
    ViewData("Title") = "Index"
End Code

<table>
    <tr>
        <th>@Html.DisplayNameFor(Function(model) model.Name)</th>
        <th>@Html.DisplayNameFor(Function(model) model.Address)</th>
        <th>@Html.DisplayNameFor(Function(model) model.Birthday)</th>
        <th>@Html.DisplayNameFor(Function(model) model.Email)</th>
    </tr>
    @For Each item In Model
       @<tr>
            <td>@Html.DisplayFor(Function(model) item.Name)</td>
            <td>@Html.DisplayFor(Function(model) item.Address)</td>
            <td>@Html.DisplayFor(Function(model) item.Birthday)</td>
            <td>@Html.DisplayFor(Function(model) item.Email)</td>
        </tr>
    Next
</table>

@ModelType IEnumerable(Of Emp)

@Code

ViewData("Title") = "Index"

End Code

<table>

<tr>

<th>@Html.DisplayNameFor(Function(model) model.Name)</th>

<th>@Html.DisplayNameFor(Function(model) model.Address)</th>

<th>@Html.DisplayNameFor(Function(model) model.Birthday)</th>

<th>@Html.DisplayNameFor(Function(model) model.Email)</th>

</tr>

@For Each item In Model

@<tr>

<td>@Html.DisplayFor(Function(model) item.Name)</td>

<td>@Html.DisplayFor(Function(model) item.Address)</td>

<td>@Html.DisplayFor(Function(model) item.Birthday)</td>

<td>@Html.DisplayFor(Function(model) item.Email)</td>

</tr>

</table>

プログラムを実行

プログラムを実行すると、データベースに格納されているレコードの一覧が表示されます。

レコードの一覧をソート

レコードの一覧をソートするには、OrderBy()メソッドを使います。
上記プログラムを生年月日で昇順ソートする場合は、11行目を以下のように修正します。

emp = db.Emp.OrderBy(Function(s) s.Birthday).ToList()

1	emp = db.Emp.OrderBy(Function(s) s.Birthday).ToList()

ソートメソッドの種類は、以下の通りです。

OrderBy	昇順ソート
OrderByDescending	降順ソート
ThenBy	後続の要素を昇順でソート
ThenByDescending	後続の要素を降順でソート

記事一覧

ASP.NET(VB.NET) MVCモデル入門【記事一覧】