ASP.NET(C#) MVCモデル入門～データベースのデータを削除する

データベースのデータを削除するプログラム

今回は、こちらの記事で作成したプログラムを元に、データベースのデータを削除する処理を追加します。
MVCのデータベース操作については、以下のマイクロソフト公式サイトを参照してください。

チュートリアル:ASP.NET MVC の Entity Framework を使用して CRUD 機能を実装する

データ一覧画面に削除処理用のボタンを追加する

一覧画面に表示される各データの右側に、削除ボタンを追加します。
呼び出すコントローラーは DeleteController、呼び出すメソッドは DeleteConfirm()とします。
削除するデータを特定するため、Hidden()メソッドを使って IDをコントローラーに送る必要があります。

@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 colspan="2"></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 width="66">
                    @using (Html.BeginForm("Update", "Update", FormMethod.Get))
                    {
                        @Html.Hidden("id", item.Id)
                        <input type="submit" value="変更" />
                    }
                </td>
                <td width="66">
                    @using (Html.BeginForm("DeleteConfirm", "Delete", FormMethod.Get))
                    {
                        @Html.Hidden("id", item.Id)
                        <input type="submit" value="削除" />
                    }
                </td>
            </tr>
        }
    </tbody>
</table>
<div>
    @Html.ActionLink("新規登録", "Insert", "Insert")
</div>

@model IEnumerable<Emp>

ViewData["Title"] = "Index";

}

<h1>Index</h1>

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

@using (Html.BeginForm("Update", "Update", FormMethod.Get))

{

@Html.Hidden("id", item.Id)

}

</td>

@using (Html.BeginForm("DeleteConfirm", "Delete", FormMethod.Get))

{

@Html.Hidden("id", item.Id)

}

</td>

</tr>

}

</tbody>

</table>

<div>

@Html.ActionLink("新規登録", "Insert", "Insert")

</div>

下図のように、削除画面へのボタンが各データの右側に追加されます。

データ削除用のインターフェイスと実装クラスを作成する

新規にデータ削除用のインターフェイス(IDeleteService)と実装クラス(DeleteImpl)を作成します。
DataFind()メソッドで、IDを元にデータを検索し、Delete()メソッドで該当データをデータベースから削除します。
使用するビューモデルは、登録処理で使用したもの(EmpViewModel)を使います。

using MvcApp3.Models.ViewModel;

namespace MvcApp3.Services
{
    public interface IDeleteService
    {
        public Task<EmpViewModel> DataFind(string id);
        public Task<EmpViewModel> Delete(EmpViewModel vm);
    }
}

using MvcApp3.Models.ViewModel;

namespace MvcApp3.Services

{

public interface IDeleteService

{

public Task<EmpViewModel> DataFind(string id);

public Task<EmpViewModel> Delete(EmpViewModel vm);

}

実装クラス(DeleteImpl)の中でデータの削除処理を行います。
Remove()メソッドでデータを削除し、SaveChangesAsync()メソッドでデータの削除を確定します。

using MvcApp3.Data;
using MvcApp3.Models.Entity;
using MvcApp3.Models.ViewModel;

namespace MvcApp3.Services
{
    public class DeleteImpl : IDeleteService
    {
        private readonly MvcAppDbContext _context;

        public DeleteImpl(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> Delete(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.Remove(emp);
            await _context.SaveChangesAsync();

            return vm;
        }
    }
}

using MvcApp3.Data;

using MvcApp3.Models.Entity;

using MvcApp3.Models.ViewModel;

namespace MvcApp3.Services

{

public class DeleteImpl : IDeleteService

{

private readonly MvcAppDbContext _context;

public DeleteImpl(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> Delete(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.Remove(emp);

await _context.SaveChangesAsync();

return vm;

}

データ削除用のサービスをProgram.csに追加する

インターフェイスと実装クラスを作成したら、Program.cs にサービスを追加します。

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>();
builder.Services.AddScoped<IDeleteService, DeleteImpl>();

var app = builder.Build();

～　以下略　～

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>();

builder.Services.AddScoped<IDeleteService, DeleteImpl>();

var app = builder.Build();

～　以下略　～

データ削除用のコントローラーを作成する

新規にデータ削除用のコントローラー(DeleteController)を作成します。
処理の流れは、「データ削除(Delete)」→「データ確認(DeleteConfirm)」→「データ削除実行(DeleteProcess)」となります。
データの削除が完了したら、RedirectToAction()メソッドを使って、データ一覧画面に遷移します。

using Microsoft.AspNetCore.Mvc;
using MvcApp3.Models.ViewModel;
using MvcApp3.Services;

namespace MvcApp3.Controllers
{
    public class DeleteController : Controller
    {
        private readonly IDeleteService _deleteService;

        public DeleteController(IDeleteService deleteService)
        {
            _deleteService = deleteService;
        }

        public async Task<IActionResult> DeleteConfirm(string id)
        {
            var vm = await _deleteService.DataFind(id);

            return View(vm);
        }

        public IActionResult DeleteProcess(EmpViewModel vm)
        {
            _deleteService.Delete(vm);
            return RedirectToAction("Index", "Emps");
        }
    }
}

using Microsoft.AspNetCore.Mvc;

using MvcApp3.Models.ViewModel;

using MvcApp3.Services;

namespace MvcApp3.Controllers

{

public class DeleteController : Controller

{

private readonly IDeleteService _deleteService;

public DeleteController(IDeleteService deleteService)

{

_deleteService = deleteService;

}

public async Task<IActionResult> DeleteConfirm(string id)

{

var vm = await _deleteService.DataFind(id);

return View(vm);

}

public IActionResult DeleteProcess(EmpViewModel vm)

{

_deleteService.Delete(vm);

return RedirectToAction("Index", "Emps");

}

データ削除用のビューを作成する

データ削除用のビューを作成します。
今回は、データ確認用のビューを作成します。
また、ラベルとテキストボックスの位置を揃えるために、スタイルシートを使用しています。
ID は HiddenFor()メソッドで送る必要があります。

@model EmpViewModel
@{
    ViewData["Title"] = "削除確認";
}

<h1>DeleteConfirm</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("DeleteProcess", "Delete", 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="backIndex();" />
            </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>

@model EmpViewModel

ViewData["Title"] = "削除確認";

}

<h1>DeleteConfirm</h1>

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

@using (Html.BeginForm("DeleteProcess", "Delete", 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>

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

プログラムを実行する

一覧画面から削除したいデータの「削除」ボタンをクリックすると、以下のような削除確認画面が表示されます。
本当に削除するデータかどうかを確認して、「削除実行」ボタンを押下します。

一覧画面が表示されるので、削除したデータが表示されていないことを確認します。

記事一覧

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