【ASP.NET】ASP.NET Core MVCでWebアプリを作成する

はじめに

最近、UdemyでASP.NETの学習を始めました。
「【入門者向け】ASP.NET MVCでWebアプリ開発のノウハウを学ぼう！」という講座です。
こちらではASP.NET MVCを用いたWebアプリケーションの作成方法が解説されています。

しかしこの講座は5年以上も前のものなので各種技術が古くなっています。

ASP.NETはASP.NET Coreとなり、Entity FrameworkはEntity Framework Coreとなりました。
Visual Studioも2017から2022になっています。

なので今一度最新の環境でプロジェクトを作成する流れを把握していこうと思います。

アプリ内容

今回作成するプロジェクトの内容は、「友人の情報を記録するメモ帳」というものです。
名前や出会った日・場所などを友達ごとに記録できるようにします。

簡単なCRUDを実装して、データを一覧表示できるようなWebアプリです。
CRUD：「Create（作成）」「Read（読み取り）」「Update（更新）」「Delete（削除）」

講座と同じ系統の技術を使用するため、ASP.NET Core MVCとEntity Framework Coreを使用していきます。

実装

1. プロジェクト作成

それではプロジェクトの作成からやっていきます。
今回使うのはVisual Studio Community 2022です。

プロジェクト作成で「ASP.NET Core Web アプリ (Model-View-Controller)」を選択します。
「FriendMemo」という名前でプロジェクトを作成しました。

今回使用する.NETは9.0にしました。

2. モデルの作成

プロジェクトのModelフォルダ下に今回使用するモデルを作成します。
今回はFriendというモデルを定義しました。

using System.ComponentModel.DataAnnotations;

namespace FriendMemo.Models
{
    public enum Gender
    {
        [Display(Name = "男性")]
        Male,
        [Display(Name = "女性")]
        Female,
        [Display(Name = "その他")]
        Other
    }

    public class Friend
    {
        public int Id { get; set; }

        [Display(Name = "名前")]
        [Required]
        public string Name { get; set; }

        [Display(Name = "出会った場所")]
        public string MetAt { get; set; }

        [Display(Name = "出会った日")]
        [DataType(DataType.Date)]
        public DateTime MetDate { get; set; }

        [Display(Name = "性別")]
        public Gender Gender { get; set; }

        [Display(Name = "メモ")]
        [DataType(DataType.MultilineText)]
        public string? Memo { get; set; }
    }
}

定義内容としては書いてある通りで、名前・出会った場所・出会った日・性別・メモとしています。
また性別はEnumで種類を定義していて、男性・女性・その他を選択できるようにします。

3. Entity Framework Core のインストールと設定

3-1. パッケージインストール

NuGetパッケージでEntity Framework Coreをインストールしていきます。

なお、このときプレリリース版の10.0.0をインストールすると、エラーが出てロールバックしました。
なので安定板の9.0.10をダウンロードしました。

3-2. DbContextの作成

プロジェクト内にDataフォルダを作成し、ApplicationDbContextクラスを定義していきます。

using FriendMemo.Models;
using Microsoft.EntityFrameworkCore;

namespace FriendMemo.Data
{
    public class ApplicationDbContext : DbContext
    {
        public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
            : base(options)
        {
        }

        public DbSet<Friend> Friends { get; set; }
    }
}

3-3. 接続文字列の設定

プロジェクト下のappsettings.jsonファイルに接続先の設定を書いていきます。
"AllowedHosts": "*" の後にカンマを追加して、以下のように書き換えます。

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=FriendMemo-DB;Trusted_Connection=True;MultipleActiveResultSets=true"
  }
}

(localdb)\mssqllocaldb は、Visual Studioと共にインストールされるSQL Server LocalDBを指します。

3-4. DbContextの登録

プロジェクト下のProgram.csファイルに追記していきます。
var builder = WebApplication.CreateBuilder(args);行の下に以下のコードを追加します。

builder.Services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

また、UseSqlServerを使用するには、NuGetでMicrosoft.EntityFrameworkCore.SqlServerの追加が必要です。

4. データベースの作成（マイグレーション）

Visual Studioの「表示」→「その他のウィンドウ」→「パッケージマネージャーコンソール」を開きます。

続いてAdd-Migrationコマンドを実行していくのですが、このコマンドを実行するためにはNuGetでMicrosoft.EntityFrameworkCore.Toolsの追加が必要です。
先に追加しておいてください。

PM> Add-Migration InitialCreate
Build started...
Build succeeded.
To undo this action, use Remove-Migration.

続いてUpdate-Databaseコマンドを実行していきます。

PM> Update-Database
Build started...
Build succeeded.

...

Done.

これでDBの用意ができました。

5. コントローラーとビューの作成

続いてコントローラーを作成していきます。

プロジェクト下のControllersフォルダを右クリック→「追加」→「コントローラー」を押します。

テンプレートを聞かれるので、「Entity Frameworkを使用したビューがあるMVCコントローラー」を選択し、追加します。

コントローラーの設定をしていきます。
モデルクラスは、Friendクラス
DbContextクラスは、ApplicationDbContext

これでコントローラーとビューが作成されました。

リンクにアクセスできるようにレイアウトを変更します。
「Views」→「Shared」→「_Layout.cshtml」ファイルを編集します。

<ul class="navbar-nav flex-grow-1">の中に以下の行を追加します。

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-controller="Friends" asp-action="Index">フレンド一覧</a>
</li>

これで一旦完成です。
実行してみると、Homeが表示され「フレンド一覧」をクリックするとIndexが表示されます。

「Create New」で追加ページに移動できます。
しかし、このままでは性別欄が入力できないままです。

6. コントローラーとビューの修正

コントローラーの修正(FriendsController.cs)

まずコントローラーの修正を行っていきます。

using System.ComponentModel.DataAnnotations; と using System.Reflection; の追加。

CreateのGETメソッド、EditのGETメソッドの中に以下のように修正。

// GET: Friends/Create
public IActionResult Create()
{
    // Enumの各値を取得し、表示名と値を持つSelectListを作成してViewBagに格納する
    ViewBag.GenderList = Enum.GetValues(typeof(Gender)).Cast<Gender>()
        .Select(g => new SelectListItem
        {
            // [Display(Name = "...")]で指定した名前を取得する
            Text = g.GetType()
                    .GetMember(g.ToString())
                    .First()
                    .GetCustomAttribute<DisplayAttribute>()?.Name ?? g.ToString(),
            // Enumの値を文字列として格納
            Value = g.ToString()
        }).ToList();

    return View();
}
// GET: Friends/Edit/5
public async Task<IActionResult> Edit(int? id)
{
    if (id == null)
    {
        return NotFound();
    }

    var friend = await _context.Friends.FindAsync(id);
    if (friend == null)
    {
        return NotFound();
    }

    // Createと同じく、性別の選択肢をViewBagに格納する
    ViewBag.GenderList = Enum.GetValues(typeof(Gender)).Cast<Gender>()
        .Select(g => new SelectListItem
        {
            Text = g.GetType()
                    .GetMember(g.ToString())
                    .First()
                    .GetCustomAttribute<DisplayAttribute>()?.Name ?? g.ToString(),
            Value = g.ToString()
        }).ToList();

    return View(friend);
}

ビューの修正(Create.cshtml と Edit.cshtml)

<div class="form-group">
    <label asp-for="Gender" class="control-label"></label>
    <input asp-for="Gender" class="form-control" />
    <span asp-validation-for="Gender" class="text-danger"></span>
</div>

上を以下のように修正。

<div class="form-group">
    <label asp-for="Gender" class="control-label"></label>
    @* <input> を <select> に変更 *@
    <select asp-for="Gender" class="form-control" asp-items="ViewBag.GenderList">
        @* 未選択状態の項目を追加 *@
        <option value="">-- 選択してください --</option>
    </select>
    <span asp-validation-for="Gender" class="text-danger"></span>
</div>

これで性別欄が選択できるようになりました。

7. Bootstrapの活用

講座ではBootstrapをインストールしていたのですが、ASP.NET Coreではフロントエンドライブラリの管理にNuGetを使用しなくなったようです。
その代わりにwwwrootフォルダやlibman.jsonファイルの内容で管理するようです。

一覧ページをテーブルからカードデザインに変更

Views/Friends/Index.cshtmlを修正していきます。

修正前:

@model IEnumerable<FriendMemo.Models.Friend>

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.MetAt)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.MetDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Gender)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Memo)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.MetAt)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.MetDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Gender)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Memo)
            </td>
            <td>
                <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
            </td>
        </tr>
}
    </tbody>
</table>

修正後:

@model IEnumerable<FriendMemo.Models.Friend>

@{
    ViewData["Title"] = "フレンド一覧";
}

<h1>@ViewData["Title"]</h1>

<p>
    <a asp-action="Create" class="btn btn-primary mb-3">
        <i class="bi bi-plus-circle"></i> 新しくフレンドを登録する
    </a>
</p>

@* カードデザインの開始 *@
<div class="row">
    @foreach (var item in Model)
    {
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">@Html.DisplayFor(modelItem => item.Name)</h5>
                </div>
                <div class="card-body">
                    <p class="card-text">
                        <strong>出会った場所:</strong> @Html.DisplayFor(modelItem => item.MetAt)<br>
                        <strong>出会った日:</strong> @item.MetDate.ToString("yyyy年MM月dd日")<br>
                        <strong>性別:</strong> @Html.DisplayFor(modelItem => item.Gender)
                    </p>
                    @if (!string.IsNullOrEmpty(item.Memo))
                    {
                        <p class="card-text bg-light border p-2 rounded">@Html.DisplayFor(modelItem => item.Memo)</p>
                    }
                </div>
                <div class="card-footer bg-white">
                    <a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-sm btn-outline-primary">編集</a>
                    <a asp-action="Details" asp-route-id="@item.Id" class="btn btn-sm btn-outline-secondary">詳細</a>
                    <a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-sm btn-outline-danger">削除</a>
                </div>
            </div>
        </div>
    }
</div>

@* アイコン表示のため、Bootstrap IconsのCDNを追加（_Layout.cshtmlでも可） *@
@section Scripts {
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
}

DBのような一覧表示から、カード形式のデザインに変更できました。

おわりに

今回はASP.NET MVCとEntity Framework Coreを用いた簡単なCRUD Webアプリの作成をおこないました。

次回はこの構成で作成したWebアプリを公開する方法を書いていきたいです。

投稿者プロフィール

MuramatsuYuki

関連記事

  1. 【ASP.NET｜Three.js】VATを描画してみる

  2. 【WPF｜Gemini CLI】読書日記アプリの開発

  3. ASP.NET Core Web APIを使ってみた

  4. 【ASP.NET】WebGLを描画してみる

  5. Google認証の実装

  6. AWS

    【AWS EC2】シミュレーションプログラムを動かしてみた

最近の記事

  1. 2025.11.12

    【ASP.NET｜Three.js】VATを描画してみる…

  2. 2025.11.05

    【ASP.NET】WebGLを描画してみる

  3. 2025.11.01

    React 学習ログ – 環境構築からHel…
  4. AWS

    2025.10.27

    【AWS｜ASP.NET】ASP.NET Coreで作成…

  5. 2025.10.24

    【ASP.NET】ASP.NET Core MVCでWe…
  6. AWS

    2025.10.16

    【AWS EC2】シミュレーションプログラムを動かしてみ…

  7. 2025.10.16

    Node.jsバージョン管理ツールについて調べてみる

  8. 2025.10.14

    WSL2 から GitHub CLI を使って認証を行う…

  9. 2025.10.14

    Continue と Ollama を接続するメモ

制作実績一覧

  2. Checkeys