第18章　ASP.NET Core MVCの基本

この章の目的

この章では、C#を使ったWebアプリケーション開発の基本として、ASP.NET Core MVC を学習します。

これまでの章では、主にコンソールアプリを使ってC#の基本文法、クラス、List、LINQ、例外処理、Oracle Database接続を学習してきました。

コンソールアプリでは、処理の流れは比較的単純でした。

Mainメソッドが実行される
  ↓
上から順番に処理される
  ↓
Console.WriteLineで結果を表示する

一方、Webアプリでは、利用者がブラウザーからURLにアクセスします。

ブラウザーでURLにアクセスする
  ↓
Webアプリがリクエストを受け取る
  ↓
Controllerが処理する
  ↓
Modelにデータを用意する
  ↓
ViewがHTMLを作る
  ↓
ブラウザーに画面が表示される

この章では、ASP.NET Core MVCのプロジェクトを作成し、MVCの基本的な構成を確認します。

この章の目的は、Webアプリを深く作り込むことではありません。

まずは、次のことを理解することを目指します。

Webアプリはブラウザーからアクセスして動く
ASP.NET Core MVCではController、Model、Viewに役割を分ける
Controllerがリクエストを受け取る
Viewが画面を表示する
Modelがデータを表す

後の章では、このMVC構成を使って、Oracle Databaseの employees 表から取得した社員一覧をWeb画面に表示します。

挿絵・スクリーンショット案

この章では、以下の画像を入れると理解しやすくなります。

図18-1　コンソールアプリとWebアプリの違い
図18-2　MVCの全体像
図18-3　ASP.NET Core MVCプロジェクト作成画面
図18-4　プロジェクト作成後のソリューションエクスプローラー
図18-5　初期状態のWebアプリ実行画面
図18-6　Controller、Model、Viewの対応関係
図18-7　社員一覧画面の完成例

Markdownでは、後から画像を追加する場合、次のように書けます。

![MVCの全体像](images/18_mvc_overview.png)

画像ファイルは、テキストと同じフォルダの中に images フォルダを作り、その中に入れると管理しやすくなります。

CSharpText/
  ├─ 18_aspnet_core_mvc_basic.md
  └─ images/
      ├─ 18_mvc_overview.png
      ├─ 18_project_create.png
      └─ 18_employee_list.png

この章でできるようになること

この章を終えると、次のことができるようになります。

Webアプリとコンソールアプリの違いを説明できる
ASP.NET Core MVCとは何かをおおまかに説明できる
MVCのModel、View、Controllerの役割を説明できる
Visual Studio 2022でASP.NET Core MVCプロジェクトを作成できる
作成したWebアプリを実行し、ブラウザーで確認できる
Controllers、Models、Views フォルダの役割を説明できる
ControllerのActionメソッドを作成できる
Viewを作成して画面を表示できる
Modelクラスを作成できる
ControllerからViewへデータを渡せる
List<EmployeeListItem> をViewで一覧表示できる
Razor構文の基本を読める

本章で使用する環境

項目	内容
開発環境	Visual Studio 2022
プロジェクト種類	ASP.NET Core Web アプリ Model-View-Controller
対象フレームワーク	.NET 8
プロジェクト名	`Chapter18_MvcBasic`
認証	なし
HTTPS	使用する

作業前チェック

作業を始める前に、次の内容を確認してください。

Visual Studio 2022を起動できる
C#のクラスを作成できる
プロパティを定義できる
List<T> を使える
foreach 文を使える
HTMLの基本的なタグを少し読める
第17章の内容をGitに提出済みである

18-1　Webアプリとは？

コンソールアプリの復習

これまで作成してきたコンソールアプリは、基本的に Main メソッドから処理が始まりました。

class Program
{
    static void Main()
    {
        Console.WriteLine("こんにちは");
    }
}

実行結果は、コンソール画面に表示されます。

こんにちは

コンソールアプリでは、利用者は主にキーボードで入力し、結果はコンソール画面に表示されます。

Webアプリの特徴

Webアプリは、ブラウザーからアクセスして利用するアプリケーションです。

たとえば、次のようなものがWebアプリです。

社内システム
勤怠管理システム
顧客管理システム
商品管理システム
予約システム
問い合わせフォーム

Webアプリでは、利用者はブラウザーでURLにアクセスします。

https://localhost:xxxx/

すると、Webサーバー側のアプリケーションが処理を行い、HTMLをブラウザーに返します。

Webアプリの流れ

Webアプリの基本的な流れは次の通りです。

1. 利用者がブラウザーでURLにアクセスする
2. ブラウザーがWebアプリへリクエストを送る
3. Webアプリがリクエストを受け取る
4. 必要な処理を行う
5. HTMLを作成する
6. ブラウザーにレスポンスを返す
7. ブラウザーが画面を表示する

この流れを図にすると、次のようになります。

ブラウザー
  ↓ リクエスト
ASP.NET Core MVCアプリ
  ↓ 処理
HTML
  ↓ レスポンス
ブラウザーに画面表示

図18-1 挿入候補

コンソールアプリとWebアプリの違いを示す図を入れると分かりやすくなります。

コンソールアプリ：Main → Console表示

Webアプリ：Browser → Controller → View → Browser

18-2　ASP.NET Core MVCとは？

ASP.NET Coreとは

ASP.NET Coreは、.NETでWebアプリを作成するためのフレームワークです。

C#を使って、Webアプリケーションを作成できます。

この研修では、ASP.NET Coreの中でも MVC という構成を使います。

MVCとは

MVCは、アプリケーションを次の3つの役割に分ける考え方です。

役割	意味
Model	データや業務上の情報を表す
View	画面表示を担当する
Controller	リクエストを受け取り、処理の流れを制御する

MVCは、次の3つの頭文字です。

M：Model
V：View
C：Controller

MVCのイメージ

社員一覧画面を例にすると、次のように考えられます。

Controller
  社員一覧を表示したいというリクエストを受け取る

Model
  社員ID、社員名、部署名などのデータを表す

View
  社員一覧をHTMLの表として表示する

流れは次のようになります。

ブラウザー
  ↓
EmployeesController
  ↓
EmployeeListItemのリストを用意
  ↓
Index.cshtml
  ↓
HTMLをブラウザーへ返す

図18-2 挿入候補

MVCの全体像を示す図を入れるとよいです。
Browser
  ↓
Controller
  ↓
Model
  ↓
View
  ↓
Browser

この研修でのMVCの位置づけ

この研修では、ASP.NET Core MVCを深く学びすぎることはしません。

主な目的は、次の内容を体験することです。

Webアプリの構成を理解する
MVCの役割分担を理解する
Controller、Model、Viewの関係を理解する
DBから取得したデータを画面に表示する流れを理解する

登録、更新、削除などのCRUD処理は、時間に余裕がある場合の発展課題として扱います。

まずは、一覧表示・詳細表示・検索 を中心に進めます。

18-3　ASP.NET Core MVCプロジェクトを作成する

プロジェクトを作成する

Visual Studio 2022を起動し、次の手順でプロジェクトを作成します。

1. 「新しいプロジェクトの作成」をクリックする
2. 「ASP.NET Core Web アプリ Model-View-Controller」を選択する
3. 「次へ」をクリックする
4. プロジェクト名に Chapter18_MvcBasic と入力する
5. 保存場所を確認する
6. 「次へ」をクリックする
7. フレームワークで .NET 8.0 を選択する
8. 認証の種類は「なし」にする
9. HTTPS用の構成はチェックありでよい
10. 「作成」をクリックする

図18-3 挿入候補

プロジェクトテンプレート選択画面のスクリーンショットを入れるとよいです。

画像例：
![ASP.NET Core MVCプロジェクト作成画面](images/18_project_create.png)

作成直後の構成を確認する

プロジェクト作成後、ソリューションエクスプローラーを確認します。

主に次のフォルダがあります。

Controllers
Models
Views
wwwroot

それぞれの役割は次の通りです。

フォルダ	役割
`Controllers`	リクエストを受け取り、処理の流れを決める
`Models`	データを表すクラスを置く
`Views`	画面表示用のファイルを置く
`wwwroot`	CSS、JavaScript、画像などの静的ファイルを置く

図18-4 挿入候補

ソリューションエクスプローラーのスクリーンショットを入れるとよいです。

Controllers、Models、Views、wwwroot が見える状態にします。

初期状態で実行する

まずは、作成直後の状態で実行してみます。

1. Visual Studio上部の実行ボタンをクリックする
2. ブラウザーが起動する
3. 初期画面が表示される

画面に Home や Privacy などのメニューが表示されれば成功です。

図18-5 挿入候補

初期状態のWebアプリ実行画面のスクリーンショットを入れるとよいです。

実行時の注意

初回実行時に、開発用証明書に関する確認画面が表示される場合があります。

研修環境では、講師の指示に従って進めてください。

また、ブラウザーのURLは環境によって異なります。

https://localhost:xxxx/

xxxx の部分は、PCやプロジェクトによって異なります。

18-4　初期状態のControllerとViewを確認する

HomeControllerを確認する

Controllers フォルダの中に、HomeController.cs があります。

開くと、次のようなコードがあります。

using System.Diagnostics;
using Microsoft.AspNetCore.Mvc;
using Chapter18_MvcBasic.Models;

namespace Chapter18_MvcBasic.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Privacy()
        {
            return View();
        }
    }
}

この HomeController は、初期状態で用意されているControllerです。

Controllerとは

Controllerは、ブラウザーからのリクエストを受け取り、どの処理を行うかを決めます。

たとえば、次のメソッドがあります。

public IActionResult Index()
{
    return View();
}

このようなController内のメソッドを、Actionメソッド と呼びます。

Index Actionは、対応するViewを表示します。

Viewを返す

次のコードに注目してください。

return View();

これは、対応するViewを表示するという意味です。

HomeController の Index Actionの場合、通常は次のViewが使われます。

Views/Home/Index.cshtml

つまり、次のような対応関係になります。

HomeController の Index
  ↓
Views/Home/Index.cshtml

Index.cshtmlを確認する

Views フォルダを開き、次のファイルを確認します。

Views/Home/Index.cshtml

中には、HTMLに似た内容が書かれています。

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

.cshtml は、Razor Viewと呼ばれるファイルです。

HTMLの中にC#のコードを埋め込めます。

ControllerとViewの対応

ControllerとViewの基本的な対応は、次の通りです。

Controllers/HomeController.cs
  └─ Index()
      ↓
Views/Home/Index.cshtml

Controllers/HomeController.cs
  └─ Privacy()
      ↓
Views/Home/Privacy.cshtml

この対応関係を理解することが、MVC学習の第一歩です。

図18-6 挿入候補

ControllerとViewの対応関係を示す図を入れるとよいです。
HomeController.Index()
    ↓
Views/Home/Index.cshtml

18-5　新しいControllerを作成する

EmployeesControllerを作成する

次に、社員情報を表示するための EmployeesController を作成します。

1. Controllersフォルダを右クリックする
2. 「追加」→「コントローラー」を選択する
3. 「MVCコントローラー - 空」を選択する
4. コントローラー名を EmployeesController にする
5. 「追加」をクリックする

作成されるファイル：

Controllers/EmployeesController.cs

EmployeesControllerの基本形

作成された EmployeesController.cs を次のようにします。

using Microsoft.AspNetCore.Mvc;

namespace Chapter18_MvcBasic.Controllers
{
    public class EmployeesController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

このControllerには、Index Actionがあります。

public IActionResult Index()
{
    return View();
}

このActionにアクセスすると、社員一覧画面を表示する予定です。

URLでアクセスする

アプリを実行し、ブラウザーのURLに次のように入力します。

https://localhost:xxxx/Employees

ただし、この時点では対応するViewをまだ作成していないため、エラーになる場合があります。

これは自然な状態です。

Controllerはある
Viewがまだない

次に、対応するViewを作成します。

18-6　Viewを作成する

Employees用のViewフォルダを作る

Views フォルダの中に、Employees フォルダを作成します。

Views
  ├─ Home
  ├─ Shared
  └─ Employees

EmployeesController に対応するViewは、通常 Views/Employees フォルダに置きます。

Index.cshtmlを作成する

Views/Employees フォルダを右クリックし、次の手順でViewを追加します。

1. Views/Employees フォルダを右クリックする
2. 「追加」→「ビュー」を選択する
3. Razor ビューを選択する
4. ビュー名を Index にする
5. 「追加」をクリックする

作成されるファイル：

Views/Employees/Index.cshtml

Index.cshtmlに表示を書く

Views/Employees/Index.cshtml を次のようにします。

@{
    ViewData["Title"] = "社員一覧";
}

<h1>社員一覧</h1>

<p>ここに社員一覧を表示します。</p>

アプリを実行し、次のURLにアクセスします。

https://localhost:xxxx/Employees

次のように表示されれば成功です。

社員一覧

ここに社員一覧を表示します。

ControllerとViewの関係

ここまでで、次の関係ができました。

EmployeesController
  └─ Index()
      ↓
Views/Employees/Index.cshtml

return View(); は、Controller名とAction名から対応するViewを探します。

public IActionResult Index()
{
    return View();
}

EmployeesController の Index Actionなので、通常は次のViewが使われます。

Views/Employees/Index.cshtml

18-7　Modelを作成する

Modelとは

Modelは、画面で扱うデータや業務上の情報を表すクラスです。

社員一覧画面では、次のようなデータを表示したいとします。

社員ID
社員名
部署名
入社日
給与

この1行分を表すクラスとして、EmployeeListItem を作成します。

EmployeeListItemクラスを作成する

Models フォルダを右クリックし、クラスを追加します。

1. Modelsフォルダを右クリックする
2. 「追加」→「クラス」を選択する
3. クラス名を EmployeeListItem.cs にする
4. 「追加」をクリックする

作成された EmployeeListItem.cs を次のようにします。

namespace Chapter18_MvcBasic.Models
{
    public class EmployeeListItem
    {
        public int EmployeeId { get; set; }
        public string EmployeeName { get; set; } = "";
        public string DepartmentName { get; set; } = "";
        public DateTime HireDate { get; set; }
        public decimal? Salary { get; set; }
    }
}

EmployeeListItemの役割

EmployeeListItem は、社員一覧画面に表示する1行分のデータを表します。

EmployeeListItem
  ├─ EmployeeId
  ├─ EmployeeName
  ├─ DepartmentName
  ├─ HireDate
  └─ Salary

第17章で扱った EmployeeListItem と同じ考え方です。

この章ではまだDBには接続せず、Controller内でサンプルデータを作成して表示します。

18-8　ControllerからViewへデータを渡す

サンプルデータを用意する

EmployeesController を次のように変更します。

using Microsoft.AspNetCore.Mvc;
using Chapter18_MvcBasic.Models;

namespace Chapter18_MvcBasic.Controllers
{
    public class EmployeesController : Controller
    {
        public IActionResult Index()
        {
            List<EmployeeListItem> employees = new List<EmployeeListItem>
            {
                new EmployeeListItem
                {
                    EmployeeId = 1001,
                    EmployeeName = "山田二郎",
                    DepartmentName = "総務",
                    HireDate = new DateTime(2001, 4, 1),
                    Salary = 500000
                },
                new EmployeeListItem
                {
                    EmployeeId = 1002,
                    EmployeeName = "佐藤昭夫",
                    DepartmentName = "営業",
                    HireDate = new DateTime(2001, 4, 1),
                    Salary = 500000
                },
                new EmployeeListItem
                {
                    EmployeeId = 1003,
                    EmployeeName = "山口洋子",
                    DepartmentName = "開発",
                    HireDate = new DateTime(2001, 10, 1),
                    Salary = 500000
                }
            };

            return View(employees);
        }
    }
}

ここでは、List<EmployeeListItem> を作成し、View に渡しています。

return View(employees);

View側でModelを受け取る

Views/Employees/Index.cshtml を次のように変更します。

@model List<Chapter18_MvcBasic.Models.EmployeeListItem>

@{
    ViewData["Title"] = "社員一覧";
}

<h1>社員一覧</h1>

<table class="table">
    <thead>
        <tr>
            <th>社員ID</th>
            <th>社員名</th>
            <th>部署名</th>
            <th>入社日</th>
            <th>給与</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var employee in Model)
        {
            <tr>
                <td>@employee.EmployeeId</td>
                <td>@employee.EmployeeName</td>
                <td>@employee.DepartmentName</td>
                <td>@employee.HireDate.ToString("yyyy/MM/dd")</td>
                <td>
                    @if (employee.Salary.HasValue)
                    {
                        @($"{employee.Salary.Value}円")
                    }
                    else
                    {
                        @("未設定")
                    }
                </td>
            </tr>
        }
    </tbody>
</table>

@modelとは

Viewの先頭にある次の記述に注目してください。

@model List<Chapter18_MvcBasic.Models.EmployeeListItem>

これは、このViewが受け取るデータの型を表しています。

この場合、Viewは List<EmployeeListItem> を受け取ります。

Controller側では、次のように渡していました。

return View(employees);

View側では、受け取ったデータを Model という名前で利用できます。

@foreach (var employee in Model)

Razor構文

.cshtml ファイルでは、HTMLの中にC#のコードを書くことができます。

この仕組みを Razor と呼びます。

Razorでは、C#のコードを書くときに @ を使います。

例：

@employee.EmployeeName

@foreach (var employee in Model)
{
    ...
}

@if (employee.Salary.HasValue)
{
    ...
}

HTMLとC#が混ざるため、最初は少し読みにくく感じるかもしれません。

この章では、まず次のように理解してください。

.cshtml
  → HTMLの中にC#を書ける画面ファイル

@model
  → この画面が受け取るデータの型

Model
  → Controllerから渡されたデータ

@foreach
  → C#のforeach文を使ってHTMLを繰り返し出力する

実行結果を確認する

アプリを実行し、次のURLにアクセスします。

https://localhost:xxxx/Employees

社員一覧が表形式で表示されれば成功です。

社員ID    社員名      部署名    入社日        給与
1001      山田二郎    総務      2001/04/01    500000円
1002      佐藤昭夫    営業      2001/04/01    500000円
1003      山口洋子    開発      2001/10/01    500000円

図18-7 挿入候補

社員一覧画面の完成例をスクリーンショットとして入れるとよいです。

18-9　詳細画面を作成する

詳細画面の目的

一覧画面では複数の社員を表示しました。

次に、1人分の社員情報を表示する詳細画面を作成します。

URLは次のような形を想定します。

https://localhost:xxxx/Employees/Details/1001

このURLでは、1001 が社員IDです。

Details Actionを追加する

EmployeesController に Details Actionを追加します。

public IActionResult Details(int id)
{
    List<EmployeeListItem> employees = CreateSampleEmployees();

    EmployeeListItem? employee = employees
        .FirstOrDefault(employee => employee.EmployeeId == id);

    if (employee == null)
    {
        return NotFound();
    }

    return View(employee);
}

このコードでは、id にURLから渡された社員IDが入ります。

Details(int id)

社員が見つかった場合は、その社員データをViewに渡します。

return View(employee);

見つからなかった場合は、NotFound() を返します。

return NotFound();

サンプルデータ作成処理をメソッドに分ける

Index Actionと Details Actionの両方で同じサンプルデータを使うため、メソッドに分けます。

EmployeesController 全体を次のようにします。

using Microsoft.AspNetCore.Mvc;
using Chapter18_MvcBasic.Models;

namespace Chapter18_MvcBasic.Controllers
{
    public class EmployeesController : Controller
    {
        public IActionResult Index()
        {
            List<EmployeeListItem> employees = CreateSampleEmployees();

            return View(employees);
        }

        public IActionResult Details(int id)
        {
            List<EmployeeListItem> employees = CreateSampleEmployees();

            EmployeeListItem? employee = employees
                .FirstOrDefault(employee => employee.EmployeeId == id);

            if (employee == null)
            {
                return NotFound();
            }

            return View(employee);
        }

        private List<EmployeeListItem> CreateSampleEmployees()
        {
            return new List<EmployeeListItem>
            {
                new EmployeeListItem
                {
                    EmployeeId = 1001,
                    EmployeeName = "山田二郎",
                    DepartmentName = "総務",
                    HireDate = new DateTime(2001, 4, 1),
                    Salary = 500000
                },
                new EmployeeListItem
                {
                    EmployeeId = 1002,
                    EmployeeName = "佐藤昭夫",
                    DepartmentName = "営業",
                    HireDate = new DateTime(2001, 4, 1),
                    Salary = 500000
                },
                new EmployeeListItem
                {
                    EmployeeId = 1003,
                    EmployeeName = "山口洋子",
                    DepartmentName = "開発",
                    HireDate = new DateTime(2001, 10, 1),
                    Salary = 500000
                }
            };
        }
    }
}

Details.cshtmlを作成する

Views/Employees フォルダに、Details.cshtml を作成します。

内容は次のようにします。

@model Chapter18_MvcBasic.Models.EmployeeListItem

@{
    ViewData["Title"] = "社員詳細";
}

<h1>社員詳細</h1>

<table class="table">
    <tr>
        <th>社員ID</th>
        <td>@Model.EmployeeId</td>
    </tr>
    <tr>
        <th>社員名</th>
        <td>@Model.EmployeeName</td>
    </tr>
    <tr>
        <th>部署名</th>
        <td>@Model.DepartmentName</td>
    </tr>
    <tr>
        <th>入社日</th>
        <td>@Model.HireDate.ToString("yyyy/MM/dd")</td>
    </tr>
    <tr>
        <th>給与</th>
        <td>
            @if (Model.Salary.HasValue)
            {
                @($"{Model.Salary.Value}円")
            }
            else
            {
                @("未設定")
            }
        </td>
    </tr>
</table>

<a asp-controller="Employees" asp-action="Index">一覧に戻る</a>

詳細画面にアクセスする

アプリを実行し、次のURLにアクセスします。

https://localhost:xxxx/Employees/Details/1001

社員ID 1001 の詳細が表示されれば成功です。

一覧画面から詳細画面へのリンクを作る

Views/Employees/Index.cshtml の表に、詳細リンクを追加します。

@model List<Chapter18_MvcBasic.Models.EmployeeListItem>

@{
    ViewData["Title"] = "社員一覧";
}

<h1>社員一覧</h1>

<table class="table">
    <thead>
        <tr>
            <th>社員ID</th>
            <th>社員名</th>
            <th>部署名</th>
            <th>入社日</th>
            <th>給与</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var employee in Model)
        {
            <tr>
                <td>@employee.EmployeeId</td>
                <td>@employee.EmployeeName</td>
                <td>@employee.DepartmentName</td>
                <td>@employee.HireDate.ToString("yyyy/MM/dd")</td>
                <td>
                    @if (employee.Salary.HasValue)
                    {
                        @($"{employee.Salary.Value}円")
                    }
                    else
                    {
                        @("未設定")
                    }
                </td>
                <td>
                    <a asp-controller="Employees"
                       asp-action="Details"
                       asp-route-id="@employee.EmployeeId">詳細</a>
                </td>
            </tr>
        }
    </tbody>
</table>

次の部分が、詳細画面へのリンクです。

<a asp-controller="Employees"
   asp-action="Details"
   asp-route-id="@employee.EmployeeId">詳細</a>

これは、次のようなURLへのリンクを生成します。

/Employees/Details/1001

18-10　検索フォームを作成する

検索フォームの目的

次に、社員名で検索できる簡単なフォームを作成します。

この章では、DBには接続せず、サンプルデータに対して検索します。

後の章では、同じ考え方でOracle Databaseに検索条件を渡します。

Index Actionを変更する

EmployeesController の Index Actionを次のように変更します。

public IActionResult Index(string? keyword)
{
    List<EmployeeListItem> employees = CreateSampleEmployees();

    if (!string.IsNullOrWhiteSpace(keyword))
    {
        employees = employees
            .Where(employee => employee.EmployeeName.Contains(keyword))
            .ToList();
    }

    ViewData["Keyword"] = keyword;

    return View(employees);
}

keyword には、検索フォームから送信された文字列が入ります。

public IActionResult Index(string? keyword)

キーワードが入力されている場合だけ、LINQで絞り込みます。

employees = employees
    .Where(employee => employee.EmployeeName.Contains(keyword))
    .ToList();

Index.cshtmlに検索フォームを追加する

Views/Employees/Index.cshtml の h1 の下に、検索フォームを追加します。

<form asp-controller="Employees" asp-action="Index" method="get">
    <div class="mb-3">
        <label for="keyword" class="form-label">社員名検索</label>
        <input type="text"
               id="keyword"
               name="keyword"
               value="@ViewData["Keyword"]"
               class="form-control" />
    </div>

    <button type="submit" class="btn btn-primary">検索</button>
    <a asp-controller="Employees" asp-action="Index" class="btn btn-secondary">クリア</a>
</form>

フォームのポイント

次の部分に注目してください。

<form asp-controller="Employees" asp-action="Index" method="get">

これは、EmployeesController の Index ActionへGETで送信するフォームです。

入力欄の name 属性にも注目します。

<input type="text" name="keyword" />

Controller側の引数名と一致しています。

public IActionResult Index(string? keyword)

そのため、フォームに入力した値が keyword に入ります。

検索結果が0件の場合

一覧表示の前に、0件の場合のメッセージを追加してもよいです。

@if (Model.Count == 0)
{
    <p>該当する社員は見つかりませんでした。</p>
}
else
{
    <table class="table">
        ...
    </table>
}

画面アプリでは、検索結果が0件の場合に利用者へ分かりやすく表示することが重要です。

18-11　MVCの流れを整理する

社員一覧表示の流れ

ここまでで作成した社員一覧表示の流れを整理します。

1. ブラウザーで /Employees にアクセスする
2. EmployeesController の Index Action が呼ばれる
3. Controllerが社員一覧データを作成する
4. return View(employees) でViewにデータを渡す
5. Views/Employees/Index.cshtml が実行される
6. View内の foreach で一覧表を作る
7. ブラウザーにHTMLが表示される

社員詳細表示の流れ

1. ブラウザーで /Employees/Details/1001 にアクセスする
2. EmployeesController の Details Action が呼ばれる
3. id に 1001 が入る
4. Controllerが該当する社員を検索する
5. 見つかった社員を View に渡す
6. Views/Employees/Details.cshtml が表示される

社員検索の流れ

1. 検索フォームにキーワードを入力する
2. 検索ボタンを押す
3. /Employees?keyword=山 のようなURLでアクセスする
4. Index Action の keyword に値が入る
5. ControllerがLINQで絞り込む
6. 絞り込み後の一覧をViewに渡す
7. 検索結果が表示される

後のDB接続章へのつながり

この章では、Controllerの中でサンプルデータを作成しました。

List<EmployeeListItem> employees = CreateSampleEmployees();

後の章では、この部分をDBアクセスに置き換えます。

EmployeeRepository repository = new EmployeeRepository();

List<EmployeeListItem> employees = repository.GetEmployeeListItems();

つまり、ControllerやViewの考え方は大きく変わりません。

この章：
Controller → サンプルデータ → View

次章以降：
Controller → Repository → Oracle Database → View

この置き換えの感覚を持つことが重要です。

よくあるつまずき

この章でよくあるつまずきを確認します。

つまずき	原因	対応
Webアプリの流れが分からない	Mainから順番に動く感覚と違う	ブラウザーからのリクエストでActionが呼ばれると考える
ControllerとViewの対応が分からない	フォルダ名とAction名の規則に慣れていない	`Views/Controller名/Action名.cshtml` を確認する
`return View()` の意味が分からない	Viewを返す処理に慣れていない	対応する `.cshtml` を表示すると考える
Viewが見つからないエラーになる	Viewファイルの場所や名前が違う	`Views/Employees/Index.cshtml` を確認する
`@model` の意味が分からない	Viewに渡されるデータ型を意識していない	このViewが受け取るデータの型と考える
`Model` が何か分からない	Controllerから渡されたデータとの対応が見えていない	`return View(employees)` の `employees` がViewの `Model` になる
Razor構文が読みにくい	HTMLとC#が混ざっている	`@` が付いた部分はC#と考える
詳細画面の `id` に値が入る理由が分からない	ルーティングに慣れていない	`/Employees/Details/1001` の `1001` が `id` に入る
検索フォームの値が受け取れない	inputのnameとAction引数名が一致していない	`name="keyword"` と `Index(string? keyword)` を確認する
画面が更新されない	ブラウザーキャッシュや実行中アプリの影響	再実行、ブラウザー更新、保存確認を行う

学んだことチェック

次の項目について、自分で説明できるか確認してください。

ペア確認

研修の進め方によっては、隣の人または近くの人と説明確認を行います。

次の内容を、自分の言葉で説明してください。

Webアプリは、コンソールアプリと何が違いますか。
MVCのModel、View、Controllerは、それぞれ何を担当しますか。
EmployeesController の Index Actionは何をしますか。
return View(employees) は何をしていますか。
Viewの @model は何を表していますか。
Model はどこから渡されてきたデータですか。
/Employees/Details/1001 にアクセスしたとき、1001 はどこで受け取りますか。
検索フォームの name="keyword" と Controller の string? keyword は、どのように対応していますか。
次章で、サンプルデータ部分は何に置き換わる予定ですか。

説明するときは、完全な答えでなくても構いません。
自分の言葉で説明しようとすることが大切です。

演習課題

この章の演習課題に取り組みます。

制限時間は 90分 です。

時間内にすべて完成しなくても構いません。
できたところまでを保存し、Gitに提出してください。

必須課題

まずは、全員が必須課題に取り組んでください。

課題18-1　MVCプロジェクトを作成する

ASP.NET Core MVCプロジェクトを作成してください。

条件：

プロジェクト名は Chapter18_MvcBasic とする
テンプレートは「ASP.NET Core Web アプリ Model-View-Controller」を選択する
フレームワークは .NET 8.0 を選択する
認証は「なし」にする
初期状態で実行し、ブラウザーに画面が表示されることを確認する

課題18-2　EmployeesControllerを作成する

EmployeesController を作成し、Index Actionを追加してください。

条件：

Controllers フォルダに作成する
クラス名は EmployeesController とする
Index Actionを作成する
return View(); を書く

課題18-3　社員一覧Viewを作成する

Views/Employees/Index.cshtml を作成し、社員一覧画面の見出しを表示してください。

表示例：

社員一覧
ここに社員一覧を表示します。

条件：

Views フォルダの中に Employees フォルダを作る
Index.cshtml を作成する
/Employees にアクセスして表示を確認する

課題18-4　EmployeeListItem Modelを作成する

Models フォルダに EmployeeListItem クラスを作成してください。

プロパティ：

プロパティ名	型
`EmployeeId`	`int`
`EmployeeName`	`string`
`DepartmentName`	`string`
`HireDate`	`DateTime`
`Salary`	`decimal?`

条件：

Models フォルダに作成する
Salary は decimal? にする
文字列プロパティには初期値 "" を設定する

課題18-5　社員一覧をViewに表示する

EmployeesController で List<EmployeeListItem> のサンプルデータを作成し、Viewに渡してください。

条件：

List<EmployeeListItem> を作成する
3件以上の社員データを用意する
return View(employees); でViewに渡す
View側で @model List<...> を書く
foreach で表形式に表示する

発展課題

必須課題が終わった人は、発展課題に取り組んでください。

課題18-6　社員詳細画面を作成する

社員IDを指定して、1人分の詳細を表示する画面を作成してください。

条件：

EmployeesController に Details(int id) Actionを追加する
FirstOrDefault で社員を検索する
見つからない場合は NotFound() を返す
Views/Employees/Details.cshtml を作成する
/Employees/Details/1001 で表示を確認する

課題18-7　一覧画面に詳細リンクを追加する

社員一覧画面に、詳細画面へのリンクを追加してください。

条件：

一覧表に「詳細」列を追加する
asp-controller、asp-action、asp-route-id を使う
詳細リンクをクリックすると詳細画面へ移動する

課題18-8　社員名検索フォームを作成する

社員名で検索できるフォームを作成してください。

条件：

Index(string? keyword) のようにAction引数を追加する
string.IsNullOrWhiteSpace で未入力を判定する
Where と Contains で社員名検索する
Viewに検索フォームを追加する
検索結果が0件の場合はメッセージを表示する

課題18-9　部署名で検索する

社員名検索に加えて、部署名でも検索できるようにしてください。

条件：

検索フォームに部署名入力欄を追加する
Controllerで departmentName を受け取る
入力されている場合だけ部署名で絞り込む
社員名と部署名の両方が入力された場合は、両方の条件で絞り込む

課題18-10　MVCの流れをコメントで説明する

EmployeesController の Index Actionに、処理の流れをコメントで書いてください。

例：

// 1. 社員一覧データを用意する
// 2. 必要に応じて検索条件で絞り込む
// 3. Viewにデータを渡す

条件：

自分が理解した言葉でコメントを書く
Controller、Model、Viewの役割が分かるようにする

Gitへの提出

課題が終わったら、できたところまでをGitに提出します。

まず、現在の状態を確認します。

git status

変更されたファイルを追加します。

git add .

コミットします。

git commit -m "Chapter18 ASP.NET Core MVCの基本"

ファイルサーバー上のリポジトリへpushします。

git push

Gitの操作でエラーが出た場合は、自己判断で同じ操作を繰り返さず、講師に確認してください。

提出前チェックリスト

提出前に、次の項目を確認してください。

この章のまとめ

この章では、ASP.NET Core MVCの基本を学習しました。

この章で学んだ主な内容は次の通りです。

Webアプリは、ブラウザーからリクエストを受け取り、HTMLを返すアプリケーションである
ASP.NET Core MVCでは、Model、View、Controllerに役割を分ける
Controllerは、リクエストを受け取り、処理の流れを制御する
Modelは、画面で扱うデータや業務上の情報を表す
Viewは、HTMLとして画面を表示する
Controllers フォルダにはControllerを置く
Models フォルダにはModelクラスを置く
Views フォルダには画面表示用の .cshtml ファイルを置く
return View() は、対応するViewを表示する
return View(model) を使うと、Viewへデータを渡せる
Viewでは @model で受け取るデータの型を指定する
View内では Model を使ってControllerから渡されたデータを参照する
Razor構文を使うと、HTMLの中にC#の処理を書ける
URLの値をActionメソッドの引数として受け取れる
検索フォームから送信された値をControllerで受け取り、一覧を絞り込める

次章では、WebアプリからOracle Databaseを利用する ことを学習します。

この章では、Controllerの中でサンプルデータを作成しました。
次章では、その部分を EmployeeRepository に置き換え、Oracle Databaseの employees 表と departments 表から取得した社員一覧をMVCのViewに表示します。

第18章 ASP.NET Core MVCの基本

この章の目的

挿絵・スクリーンショット案

この章でできるようになること

本章で使用する環境

作業前チェック

18-1 Webアプリとは？

コンソールアプリの復習

Webアプリの特徴

Webアプリの流れ

18-2 ASP.NET Core MVCとは？

ASP.NET Coreとは

MVCとは

MVCのイメージ

この研修でのMVCの位置づけ

18-3 ASP.NET Core MVCプロジェクトを作成する

プロジェクトを作成する

作成直後の構成を確認する

初期状態で実行する

実行時の注意

18-4 初期状態のControllerとViewを確認する

HomeControllerを確認する

Controllerとは

Viewを返す

Index.cshtmlを確認する

ControllerとViewの対応

18-5 新しいControllerを作成する

EmployeesControllerを作成する

EmployeesControllerの基本形

URLでアクセスする

18-6 Viewを作成する

Employees用のViewフォルダを作る

Index.cshtmlを作成する

Index.cshtmlに表示を書く

ControllerとViewの関係

18-7 Modelを作成する

Modelとは

EmployeeListItemクラスを作成する

EmployeeListItemの役割

18-8 ControllerからViewへデータを渡す

サンプルデータを用意する

View側でModelを受け取る

@modelとは

Razor構文

実行結果を確認する

18-9 詳細画面を作成する

詳細画面の目的

Details Actionを追加する

サンプルデータ作成処理をメソッドに分ける

Details.cshtmlを作成する

詳細画面にアクセスする

一覧画面から詳細画面へのリンクを作る

18-10 検索フォームを作成する

検索フォームの目的

Index Actionを変更する

Index.cshtmlに検索フォームを追加する

フォームのポイント

検索結果が0件の場合

18-11 MVCの流れを整理する

社員一覧表示の流れ

社員詳細表示の流れ

社員検索の流れ

後のDB接続章へのつながり

よくあるつまずき

学んだことチェック

ペア確認

演習課題

必須課題

課題18-1 MVCプロジェクトを作成する

課題18-2 EmployeesControllerを作成する

課題18-3 社員一覧Viewを作成する

課題18-4 EmployeeListItem Modelを作成する

課題18-5 社員一覧をViewに表示する

発展課題

課題18-6 社員詳細画面を作成する

課題18-7 一覧画面に詳細リンクを追加する

課題18-8 社員名検索フォームを作成する

課題18-9 部署名で検索する

課題18-10 MVCの流れをコメントで説明する

Gitへの提出

第18章　ASP.NET Core MVCの基本

18-1　Webアプリとは？

18-2　ASP.NET Core MVCとは？

18-3　ASP.NET Core MVCプロジェクトを作成する

18-4　初期状態のControllerとViewを確認する

18-5　新しいControllerを作成する

18-6　Viewを作成する

18-7　Modelを作成する

18-8　ControllerからViewへデータを渡す

18-9　詳細画面を作成する

18-10　検索フォームを作成する

18-11　MVCの流れを整理する

課題18-1　MVCプロジェクトを作成する

課題18-2　EmployeesControllerを作成する

課題18-3　社員一覧Viewを作成する

課題18-4　EmployeeListItem Modelを作成する

課題18-5　社員一覧をViewに表示する

課題18-6　社員詳細画面を作成する

課題18-7　一覧画面に詳細リンクを追加する

課題18-8　社員名検索フォームを作成する

課題18-9　部署名で検索する

課題18-10　MVCの流れをコメントで説明する