データベースのデータを更新するプログラム
今回は、こちらの記事で作成したプログラムを元に、データベースのデータを更新する処理を追加します。
MVCのデータベース操作については、以下のマイクロソフト公式サイトを参照してください。
データ一覧画面に更新処理用のボタンを追加する
一覧画面に表示される各データの右側に、更新ボタンを追加します。
呼び出すコントローラーは UpdateController、呼び出すメソッドは Update()とします。
更新するデータを特定するため、Hidden()メソッドを使って 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 37 38 39 40 41 42 43 44 |
@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> <th></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> <td> @using (Html.BeginForm("Update", "Update", FormMethod.Get)) { @Html.Hidden("id", item.Id) <input type="submit" value="変更" /> } </td> </tr> } </tbody> </table> <div> @Html.ActionLink("新規登録", "Insert", "Insert") </div> |
下図のように、更新画面へのボタンが各データの右側に追加されます。
データ更新用のインターフェイスと実装クラスを作成する
新規にデータ更新用のインターフェイス(IUpdateService)と実装クラス(UpdateImpl)を作成します。
DataFind()メソッドで、IDを元にデータを検索し、Update()メソッドで実際にデータベースを更新します。
使用するビューモデルは、登録処理で使用したもの(EmpViewModel)を使います。
|
1 2 3 4 5 6 7 8 9 10 |
using MvcApp3.Models.ViewModel; namespace MvcApp3.Services { public interface IUpdateService { public Task<EmpViewModel> DataFind(string id); public Task<EmpViewModel> Update(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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
using MvcApp3.Data; using MvcApp3.Models.Entity; using MvcApp3.Models.ViewModel; namespace MvcApp3.Services { public class UpdateImpl : IUpdateService { private readonly MvcAppDbContext _context; public UpdateImpl(MvcAppDbContext context) { _context = context; } public async Task<EmpViewModel> DataFind(string id) { var emp = await _context.Emps.FindAsync(Int32.Parse(id)); EmpViewModel vm = new EmpViewModel() { Id = emp.Id, Name = emp.Name, ZipCode = emp.ZipCode, Address = emp.Address, Birthday = emp.Birthday, Email = emp.Email }; return vm; } public async Task<EmpViewModel> Update(EmpViewModel vm) { var emp = new Emp() { Id = vm.Id, Name = vm.Name, ZipCode = vm.ZipCode, Address = vm.Address, Birthday = (DateOnly)vm.Birthday, Email = vm.Email }; _context.Update(emp); await _context.SaveChangesAsync(); return vm; } } } |
実装クラス(UpdateImpl)の中でデータの更新処理を行います。
Update()メソッドでデータを更新し、SaveChangesAsync()メソッドでデータの更新内容を確定します。
データ更新用のサービスをProgram.csに追加する
インターフェイスと実装クラスを作成したら、Program.cs にサービスを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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>(); builder.Services.AddScoped<IUpdateService, UpdateImpl>(); var app = builder.Build(); ～ 以下略 ～ |
データ更新用のコントローラーを作成する
新規にデータ更新用のコントローラー(UpdateController)を作成します。
処理の流れは、「データ更新(Update)」→「データ確認(UpdateConfirm)」→「データ更新実行(UpdateProcess)」となります。
データの更新が完了したら、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 33 34 |
using Microsoft.AspNetCore.Mvc; using MvcApp3.Models.ViewModel; using MvcApp3.Services; namespace MvcApp3.Controllers { public class UpdateController : Controller { private readonly IUpdateService _updateService; public UpdateController(IUpdateService updateService) { _updateService = updateService; } public async Task<IActionResult> Update(string id) { var vm = await _updateService.DataFind(id); return View(vm); } public IActionResult UpdateConfirm(EmpViewModel vm) { return View(vm); } public IActionResult UpdateProcess(EmpViewModel vm) { _updateService.Update(vm); return RedirectToAction("Index", "Emps"); } } } |
データ更新用のビューを作成する
データ更新用のビューを作成します。
今回は、データ更新用、データ確認用の2つのビューを作成します。
また、ラベルとテキストボックスの位置を揃えるために、スタイルシートを使用しています。
ID は HiddenFor()メソッドで送る必要があります。
|
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 |
@model EmpViewModel @{ ViewData["Title"] = "更新入力"; } <h1>Update</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("UpdateConfirm", "Update", 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, "{0:yyyy-MM-dd}", new { type = "date" })</p> <p>@Html.TextBoxFor(model => model.Email)</p> <p> <input type="submit" value="更新確認" /> <input type="button" value=" 戻る " onclick="backIndex()" /> </p> @Html.HiddenFor(model => model.Id) } </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 45 |
@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("UpdateProcess", "Update", 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.backUpdate.submit();" /> </p> @Html.HiddenFor(model => model.Id) @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("Update", "Update", FormMethod.Post, new { name = "backUpdate" })) { @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) } |
プログラムを実行する
一覧画面から更新したいデータの「更新」ボタンをクリックすると、以下のような更新画面が表示されます。
変更したい値を入力して、「更新確認」ボタンを押下します。
以下の例では、郵便番号と住所を変更しています。
更新確認画面が表示されるので、変更した内容を確認して、「更新実行」ボタンを押下します。
一覧画面が表示されるので、更新画面で変更した値になっていることを確認します。
