ASP.NET(VB.NET) MVCモデル入門～一覧画面に検索処理を追加する

入力した文字列を指定したカラムから検索するプログラム

今回は、一覧画面に検索処理を追加します。
画面のイメージは、以下のようになります。
左から順に、検索文字列を入力するテキストボックス、検索カラムを選択するドロップダウンリスト、検索実行ボタン、検索結果を初期化するクリアボタンです。

マイクロソフトの公式サイトにも、MVCでの検索処理の記事がありますので、参考にしてください。

Microsoft Learn ~ ［検索］ボックスを追加する

新規プロジェクトの作成

新規にプロジェクトを作成します。
今回のサンプルプログラムでは、プロジェクト名を「Test6」として作成します。
プロジェクトの作成方法は、こちらの記事を参照してください。

データベースの作成

今回のプロジェクトで使用するデータベースを作成します。
データベースの仕様、作成方法は、こちらの記事を参照してください。

ADO.NET Entity Data Modelの作成

データベースを作成したら、VB.NETとデータベースを接続するために、ADO.NET Entity Data Modelを作成します。
モデル名は、「TestDbModel」とします。
ADO.NET Entity Data Modelの作成方法は、こちらの記事を参照してください。

Empクラスにアノテーションを追加

自動で作成されたEmpクラスの各プロパティに、アノテーションを追加します。
また、Birthdayプロパティに、表示フォーマットを追加します。

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

Partial Public Class Emp
    <DisplayName("ID")>
    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

<DisplayName("ID")>

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

データベース操作用クラスの作成

データベースを操作するためのクラスを、「DbModel.vb」という名前で、「Data」フォルダーの配下に作成します。
「Data」フォルダーは、あらかじめ作成しておきます。
このクラスの中に、同じ名前のメソッドをオーバーロードして作成します。
引数なしのメソッドは、全データを取得し、引数ありのメソッドは、検索してヒットしたデータを取得します。
引数は、テキストボックスに入力した検索文字列(value)と、検索するカラム(column)です。

Imports System.Web.Mvc

Public Class DbModel
    Function GetEmp() As List(Of Emp)
        Dim emp As List(Of Emp)

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

        Return emp
    End Function

    Function GetEmp(value As String, column As String) As List(Of Emp)
        Dim emp As List(Of Emp)
        Dim sql As String = $"
            SELECT
                Id, Name, Address, Birthday, Email
            FROM
                Emp
            WHERE
                {column} LIKE N'%{value}%';
            "
        Using db As New TestDbEntities
            emp = db.Database.SqlQuery(Of Emp)(sql).ToList()
        End Using

        Return emp
    End Function
End Class

Imports System.Web.Mvc

Public Class DbModel

Function GetEmp() As List(Of Emp)

Dim emp As List(Of Emp)

Using db As New TestDbEntities

emp = db.Emp.ToList()

End Using

Return emp

End Function

Function GetEmp(value As String, column As String) As List(Of Emp)

Dim emp As List(Of Emp)

Dim sql As String = $"

SELECT

Id, Name, Address, Birthday, Email

FROM

Emp

WHERE

{column} LIKE N'%{value}%';

Using db As New TestDbEntities

emp = db.Database.SqlQuery(Of Emp)(sql).ToList()

End Using

Return emp

End Function

End Class

コントローラーの作成

一覧画面用のコントローラーを作成します。
ここで、SelectListItem()メソッドを使って、ドロップダウンリストの内容を定義します。
オプションのSelectedを使って、「氏名」をデフォルトで選択するようにします。
Search()メソッドは、ビューの検索ボタンが押された時に呼び出されます。
SelectListItem()メソッドの詳しい内容は、以下のマイクロソフトの公式サイトを参照してください。

Microsoft Learn ～ SelectListItemクラス

Imports System.Web.Mvc

Namespace Controllers
    Public Class HomeController
        Inherits Controller

        Private item As New List(Of SelectListItem)

        Sub New()
            'ドロップダウンリスト定義
            item.Add(New SelectListItem() With {.Text = "ID", .Value = "Id"})
            item.Add(New SelectListItem() With {.Text = "氏名", .Value = "Name", .Selected = True})
            item.Add(New SelectListItem() With {.Text = "住所", .Value = "Address"})
            item.Add(New SelectListItem() With {.Text = "生年月日", .Value = "Birthday"})
            item.Add(New SelectListItem() With {.Text = "メール", .Value = "Email"})

            'ドロップダウンリスト定義を格納            
            ViewBag.Column = item
        End Sub

        Function Index() As ActionResult
            Dim model As New DbModel

            Return View(model.GetEmp())
        End Function

        Function Search(value As String, column As String) As ActionResult
            Dim model As New DbModel

            Return View("Index", model.GetEmp(value, column))
        End Function

    End Class
End Namespace

Imports System.Web.Mvc

Namespace Controllers

Public Class HomeController

Inherits Controller

Private item As New List(Of SelectListItem)

Sub New()

'ドロップダウンリスト定義

item.Add(New SelectListItem() With {.Text = "ID", .Value = "Id"})

item.Add(New SelectListItem() With {.Text = "氏名", .Value = "Name", .Selected = True})

item.Add(New SelectListItem() With {.Text = "住所", .Value = "Address"})

item.Add(New SelectListItem() With {.Text = "生年月日", .Value = "Birthday"})

item.Add(New SelectListItem() With {.Text = "メール", .Value = "Email"})

'ドロップダウンリスト定義を格納

ViewBag.Column = item

End Sub

Function Index() As ActionResult

Dim model As New DbModel

Return View(model.GetEmp())

End Function

Function Search(value As String, column As String) As ActionResult

Dim model As New DbModel

Return View("Index", model.GetEmp(value, column))

End Function

End Class

End Namespace

ビューの作成

一覧画面用のビューを作成します。
6行目から11行目で、検索用のフォームを作ります。
クリアボタンを押下した時は、JavaScriptの関数を呼び出します。

@ModelType IEnumerable(Of Emp)
@Code
    ViewData("Title") = "Index"
End Code
<div class="search">
    @Using Html.BeginForm("Search", "Home", FormMethod.Get)
        @<span class="margin_size">@Html.TextBox("Value", Nothing, New With {.size = 30})</span>
        @<span class="margin_size">@Html.DropDownList("Column")</span>
        @<input type="submit" value="検索" />
        @<input type="button" value="クリア" onclick="btnClear()" />
    End Using
</div>
<table>
    <tr>
        <th>@Html.DisplayNameFor(Function(model) model.Id)</th>
        <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 class="right">@Html.DisplayFor(Function(model) item.Id)</td>
            <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

@Using Html.BeginForm("Search", "Home", FormMethod.Get)

@<span class="margin_size">@Html.TextBox("Value", Nothing, New With {.size = 30})</span>

@<span class="margin_size">@Html.DropDownList("Column")</span>

@<input type="submit" value="検索" />

@<input type="button" value="クリア" onclick="btnClear()" />

End Using

</div>

<table>

<tr>

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

<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 class="right">@Html.DisplayFor(Function(model) item.Id)</td>

<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>

JavaScriptの作成

クリアボタンを押下した時に、初期一覧画面になるようにJavaScriptを作成します。
location.hrefに「/Home/Index」と指定すると、HomeControllerのIndex()メソッドが呼び出されます。

function btnClear() {
    location.href = '/Home/Index';
}

function btnClear() {

location.href = '/Home/Index';

}

表示レイアウトの編集

ビューを作成すると、自動的に「Views/Shared/_Layout.vbhtml」が作成されるので、これを以下のように編集します。

<!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()
    <script src="~/Scripts/Common.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

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

</head>

<body>

@RenderBody()

</body>

</html>

スタイルシートの修正

スタイルシート(Site.css)を修正します。
ここでは、テーブルの装飾や検索項目の位置調整を行います。

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

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

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

td {
    border: 1px solid;
}

td.right {
    text-align: right;
}

.search {
    margin-left: 10px;
    margin-bottom: 20px;
}

span.margin_size {
    margin-right: 5px;
}

body {

margin: 10px;

padding: 10px;

}

table {

border-collapse: collapse;

width: 60%;

}

th {

background-color: yellow;

border: 1px solid;

text-align: center;

}

td {

border: 1px solid;

}

td.right {

text-align: right;

}

.search {

margin-left: 10px;

margin-bottom: 20px;

}

span.margin_size {

margin-right: 5px;

}

プログラムの実行

検索用入力ボックスに検索したい文字列を入力し、検索するカラムを選択します。
選択するカラムは、以下のようにドロップダウンリストになっています。

下図は、「東京都」で「住所」カラムを検索した結果です。

記事一覧

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