Данное руководство устарело. Актуальное руководство: Руководство по 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) на текущей странице.
В итоге страница со списком пользователей будет выглядеть следующим образом:
По нажатию на кнопку объект будет удален, а по нажатию на ссылку приложение перейдет к странице редактирования: