データベースにデータを登録するプログラム
今回は、こちらの記事で作成したプログラムを元に、データベースにデータを登録する処理を追加します。
MVCのデータベース操作については、以下のマイクロソフト公式サイトを参照してください。
テーブルに自動採番の設定を追加する
データを登録する際に、Id を自動的に採番するため、Empテーブルの Idカラムに自動採番の設定を追加します。
オブジェクトエクスプローラーから Empテーブルにカーソルを合わせ、右クリック → 「デザイナーの表示」を選択します。
デザイナーから Id 行を選択し、プロパティの「IDENTITY の設定」を「True」に変更します。
上記の設定が完了したら、デザイナーの左上にある「更新」を押下します。
以上で、ID の自動採番の設定は完了です。
DbContextクラスを再作成
テーブルの内容を変更したため、DbContextクラスを再作成する必要があります。
メニューバーから「ツール」→「NuGetパッケージマネージャー」→「パッケージマネージャーコンソール」を選択し、パッケージマネージャーコンソールを起動します。
パッケージマネージャーコンソールから以下のスキャフォールディングコマンドを使って、モデルクラスと DbContextクラスを再作成します。
なお、今回は再作成なので、必ず「-Force」オプションを指定します。
Scaffold-DbContext 'Name=ConnectionStrings:MvcAppDb' Microsoft.EntityFrameworkCore.SqlServer -ContextDir Data -OutputDir Models/Entity -NoOnConfiguring -Force
データ一覧画面に新規登録処理用のリンクを追加する
新規登録処理を呼び出すリンクを、一覧画面に追加します。
呼び出すコントローラーは InsertController、呼び出すメソッドは Insert()とします。
また、ID が自動的に登録されているかを確認するために、一覧にID列を追加しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
@model IEnumerable<Emp> @{ ViewData["Title"] = "Index"; } <h1>Index</h1> <table class="table"> <thead> <tr> <th>@Html.DisplayNameFor(model => model.Id)</th> <th>@Html.DisplayNameFor(model => model.Name)</th> <th>@Html.DisplayNameFor(model => model.ZipCode)</th> <th>@Html.DisplayNameFor(model => model.Address)</th> <th>@Html.DisplayNameFor(model => model.Birthday)</th> <th>@Html.DisplayNameFor(model => model.Email)</th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td>@Html.DisplayFor(modelItem => item.Id)</td> <td>@Html.DisplayFor(modelItem => item.Name)</td> <td>@Html.DisplayFor(modelItem => item.ZipCode)</td> <td>@Html.DisplayFor(modelItem => item.Address)</td> <td>@Html.DisplayFor(modelItem => item.Birthday)</td> <td>@Html.DisplayFor(modelItem => item.Email)</td> </tr> } </tbody> </table> <div> @Html.ActionLink("新規登録", "Insert", "Insert") </div> |
下図のように、登録画面へのリンクがデータ一覧の下に配置されます。
データ登録用のモデルを作成する
登録内容を格納するビューモデルを作成します。
Modelsフォルダー配下にビューモデル用のフォルダー(Models/ViewModel)を作成し、そこにデータ登録用のビューモデル(EmpViewModel.cs)を配置します。
ビューモデルの内容は、以下のようになります。
アノテーション「Displayname()」は、登録画面に項目の日本語名を表示するために設定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
using System.ComponentModel; namespace MvcApp3.Models.ViewModel { public class EmpViewModel { [DisplayName("ID")] public int Id { get; set; } [DisplayName("氏名")] public string Name { get; set; } = string.Empty; [DisplayName("郵便番号")] public string ZipCode { get; set; } = string.Empty; [DisplayName("住所")] public string Address { get; set; } = string.Empty; [DisplayName("生年月日")] public DateOnly Birthday { get; set; } [DisplayName("メール")] public string Email { get; set; } = string.Empty; } } |
データ登録用のインターフェイスと実装クラスを作成する
新規にデータ登録用のインターフェイス(IInsertService)と実装クラス(InsertImpl)を作成します。
|
1 2 3 4 5 6 7 8 9 |
using MvcApp3.Models.ViewModel; namespace MvcApp3.Services { public interface IInsertService { public Task<EmpViewModel> Insert(EmpViewModel vm); } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
using MvcApp3.Data; using MvcApp3.Models.Entity; using MvcApp3.Models.ViewModel; namespace MvcApp3.Services { public class InsertImpl : IInsertService { private readonly MvcAppDbContext _context; public InsertImpl(MvcAppDbContext context) { _context = context; } public async Task<EmpViewModel> Insert(EmpViewModel vm) { var emp = new Emp() { Name = vm.Name, ZipCode = vm.ZipCode, Address = vm.Address, Birthday = (DateOnly)vm.Birthday, Email = vm.Email }; _context.Add(emp); await _context.SaveChangesAsync(); return vm; } } } |
実装クラス(InsertImpl.cs)の中でデータの登録処理を行います。
Add()メソッドでデータを登録し、SaveChangesAsync()メソッドでデータの登録内容を確定します。
データ登録用のサービスをProgram.csに追加する
インターフェイスと実装クラスを作成したら、Program.cs にサービスを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
using Microsoft.EntityFrameworkCore; using MvcApp3.Data; using MvcApp3.Services; var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddControllersWithViews(); builder.Services.AddDbContext<MvcAppDbContext>(options => options.UseSqlServer(builder.Configuration.GetConnectionString("MvcAppDb")) ); builder.Services.AddScoped<IEmpsService, EmpsImpl>(); builder.Services.AddScoped<IInsertService, InsertImpl>(); var app = builder.Build(); ～ 以下略 ～ |
データ登録用のコントローラーを作成する
新規にデータ登録用のコントローラー(InsertController)を作成します。
処理の流れは、「データ入力(Insert)」→「データ確認(InsertConfirm)」→「データ登録(InsertProcess)」となります。
データの登録が完了したら、RedirectToAction()メソッドを使って、データ一覧画面に遷移します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
using Microsoft.AspNetCore.Mvc; using MvcApp3.Models.ViewModel; using MvcApp3.Services; namespace MvcApp3.Controllers { public class InsertController : Controller { private readonly IInsertService _insertService; public InsertController(IInsertService insertService) { _insertService = insertService; } public IActionResult Insert(EmpViewModel vm) { return View(vm); } public IActionResult InsertConfirm(EmpViewModel vm) { return View(vm); } public IActionResult InsertProcess(EmpViewModel vm) { _insertService.Insert(vm); return RedirectToAction("Index", "Emps"); } } } |
_ViewImports.csに追加
_ViewImports.cs にビューモデルを配置するフォルダーを追加しておきます。
こうすることで、ビューで使用するビューモデルを記述する際、フォルダー名が不要になります。
|
1 2 3 4 5 |
@using MvcApp3 @using MvcApp3.Models @using MvcApp3.Models.Entity @using MvcApp3.Models.ViewModel @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers |
データ登録用のビューを作成する
データ登録用のビューを作成します。
今回は、データ入力用、データ確認用の2つのビューを作成します。
また、ラベルとテキストボックスの位置を揃えるために、スタイルシートを使用しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
@model EmpViewModel @{ ViewData["Title"] = "登録入力"; } <h1>Insert</h1> <div class="data-container"> <div class="data-box1"> <p>@Html.LabelFor(model => model.Name)：</p> <p>@Html.LabelFor(model => model.ZipCode)：</p> <p>@Html.LabelFor(model => model.Address)：</p> <p>@Html.LabelFor(model => model.Birthday)：</p> <p>@Html.LabelFor(model => model.Email)：</p> </div> <div class="data-box2"> @using (Html.BeginForm("InsertConfirm", "Insert", FormMethod.Post)) { <p>@Html.TextBoxFor(model => model.Name)</p> <p>@Html.TextBoxFor(model => model.ZipCode)</p> <p>@Html.TextBoxFor(model => model.Address)</p> <p>@Html.TextBoxFor(model => model.Birthday, new { type = "date" })</p> <p>@Html.TextBoxFor(model => model.Email)</p> <p> <input type="submit" value="登録確認" /> <input type="button" value=" 戻る " onclick="backIndex()" /> </p> } </div> </div> |
登録確認画面では、HTMLヘルパーのDisplayFor()メソッドを使って入力した値を表示していますが、TextBoxFor()メソッドと違い、POSTする際に値をコントローラーに渡すことができないので、HiddenFor()メソッドを使って値を保存する必要があります。
また、「戻る」ボタンで登録入力画面に戻る時に、入力したデータを渡すために「backInsert」という名前のフォームを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
@model EmpViewModel @{ ViewData["Title"] = "登録確認"; } <h1>InsertConfirm</h1> <div class="data-container"> <div class="data-box1"> <p>@Html.LabelFor(model => model.Name)：</p> <p>@Html.LabelFor(model => model.ZipCode)：</p> <p>@Html.LabelFor(model => model.Address)：</p> <p>@Html.LabelFor(model => model.Birthday)：</p> <p>@Html.LabelFor(model => model.Email)：</p> </div> <div class="data-box2"> @using (Html.BeginForm("InsertProcess", "Insert", FormMethod.Post)) { <p>@Html.DisplayFor(model => model.Name)</p> <p>@Html.DisplayFor(model => model.ZipCode)</p> <p>@Html.DisplayFor(model => model.Address)</p> <p>@Html.DisplayFor(model => model.Birthday, new { type = "date" })</p> <p>@Html.DisplayFor(model => model.Email)</p> <p> <input type="submit" value="登録実行" /> <input type="button" value=" 戻る " onclick="document.backInsert.submit();" /> </p> @Html.HiddenFor(model => model.Name) @Html.HiddenFor(model => model.ZipCode) @Html.HiddenFor(model => model.Address) @Html.HiddenFor(model => model.Birthday) @Html.HiddenFor(model => model.Email) } </div> </div> @using (Html.BeginForm("Insert", "Insert", FormMethod.Post, new { name = "backInsert" })) { @Html.HiddenFor(model => model.Name) @Html.HiddenFor(model => model.ZipCode) @Html.HiddenFor(model => model.Address) @Html.HiddenFor(model => model.Birthday) @Html.HiddenFor(model => model.Email) } |
site.css に以下の内容を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.data-container { margin-top: 20px; display: flex; } .data-box1 { margin: 5px; text-align: right; } .data-box2 { margin: 5px; } p { height: 30px; } |
プログラムを実行する
一覧画面から新規登録をクリックすると、以下のような登録画面が表示されます。
データを入力して、「登録確認」ボタンを押下します。
登録確認画面が表示されるので、入力した内容を確認して、「登録実行」ボタンを押下します。
一覧画面が表示され、入力したデータが登録されていることを確認します。
