Изменение и удаление в базе данных в Razor Pages

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7

Продолжим работу с проектом из прошлой темы и добавим в него функционал по редактированию и удалению данных. Итак, добавим в проект новую страницу Razor Edit.cshtml, которая будет предназначена для редактирования данных.

Вначале изменим файл связанного кода Edit.cshtml.cs:

using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using RazorPagesApp.Models;

namespace RazorPagesApp.Pages.People
{
    public class EditModel : PageModel
    {
        private readonly ApplicationContext _context;
        [BindProperty]
        public Person Person { get; set; }

        public EditModel(ApplicationContext db)
        {
            _context = db;
        }
        public async Task<IActionResult> OnGetAsync(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            Person = await _context.People.FindAsync(id);

            if (Person == null)
            {
                return NotFound();
            }
            return Page();
        }
        public async Task<IActionResult> OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }

            _context.Attach(Person).State = EntityState.Modified;

            try
            {
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {

                if (!_context.People.Any(e => e.Id == Person.Id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }
            return RedirectToPage("Index");
        }
    }
}

В методе OnGetAsync через параметр получаем id пользователя, по этому id получаем из базы данных объект и передаем его на страницу Edit.cshtml. В методе OnPostAsync сохраняем изменения в базе данных и выполняем переадресацию на страницу Index.

Также изменим файл Edit.cshtml:

@page "{id:int}"
@model RazorPagesApp.Pages.People.EditModel
@{
    ViewData["Title"] = "Редактирование пользователя";
}
<h2>@ViewData["Title"]</h2>

<form method="post">
    <div asp-validation-summary="All"></div>
    <input asp-for="Person.Id" type="hidden" />
    <div>
        <label>Имя</label>
        <div>
            <input asp-for="Person.Name" />
            <span asp-validation-for="Person.Name"></span>
        </div>
    </div>
    <div>
        <label>Возраст</label>
        <div>
            <input asp-for="Person.Age" type="number" />
            <span asp-validation-for="Person.Age"></span>
        </div>
    </div>
    <div>
        <input type="submit" value="Сохранить" />
    </div>
</form>

Чтобы параметр id передавался как параметр маршрута, после директивы page указан шаблон параметров маршрута "{id:int}". И далее идет форма для редактирования, все поля которой привязаны к свойствам модели EditModel.

В итоге весь проект будет выглядеть следующим образом:

Также изменим код IndexModel в файле Index.cshtml.cs:

using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using RazorPagesApp.Models;

namespace RazorPagesApp.Pages.People
{
    public class IndexModel : PageModel
    {
        private readonly ApplicationContext _context;
        public List<Person> People { get; set; }
        public IndexModel(ApplicationContext db)
        {
            _context = db;
        }
        public void OnGet()
        {
            People = _context.People.AsNoTracking().ToList();
        }
        public async Task<IActionResult> OnPostDeleteAsync(int id)
        {
            var person = await _context.People.FindAsync(id);

            if (person != null)
            {
                _context.People.Remove(person);
                await _context.SaveChangesAsync();
            }

            return RedirectToPage();
        }
    }
}

По сравнению с кодом из прошлой темы здесь добавлен обработчик OnPostDeleteAsync, который обрабатывает запросы post и который принимает id объекта на удаление. Затем, если объект найден, производится его удаление. Хотя также можно было бы для удаления создать отдельную страницу, но в данном случае это будет избыточно.

И также изменим файл Index.cshtml:

@page
@model RazorPagesApp.Pages.People.IndexModel

@{
    ViewData["Title"] = "Список пользователей";
}
<h2>@ViewData["Title"]</h2>

<p><a asp-page="Create">Добавить пользователя</a></p>
<table class="table">
    <thead>
        <tr><th>Имя</th><th>Возраст</th><th></th></tr>
    </thead>
    <tbody>
        @foreach (var person in Model.People)
        {
        <tr>
            <td>@person.Name</td>
            <td>@person.Age</td>
            <td>
                <form method="post">
                    <a asp-page="Edit" asp-route-id="@person.Id">Изменить</a>
                    <button type="submit" asp-page-handler="delete" asp-route-id="@person.Id">
                        Удалить
                    </button>
                </form>
            </td>
        </tr>
    }
	</tbody>
</table>

В форму в отдельном столбце помещены ссылка на редактирование и кнопка, по нажатию на которую будет идти post-запрос к обработчику delete (OnPostDeleteAsync) на текущей странице.

В итоге страница со списком пользователей будет выглядеть следующим образом:

По нажатию на кнопку объект будет удален, а по нажатию на ссылку приложение перейдет к странице редактирования: