Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7
Продолжим работу с проектом из прошлой темы, где уже настроено подключение и создана база данных. Теперь добавим в проект в папку Pages новый каталог People. В этот каталог добавим новую страницу Razor, которую назовем Index.cshtml:
После ее добавления в папке Pages/People появятся два файла: Index.cshtml и Index.cshtml.cs. Эта страница будет предназначена для вывода список пользователей из базы данных.
Изменим файл Index.cshtml.cs:
using System.Collections.Generic; using System.Linq; using Microsoft.AspNetCore.Mvc.RazorPages; 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(); } } }
Поскольку в классе Startup контекст данных ApplicationContext добавляется в качестве сервиса, то в конструкторе PageModel, также как и в конструкторе контроллеров MVC, мы можем получить этот контекст и затем использовать его для взаимодействия с базой данных.
И изменим файл 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></tr> </thead> <tbody> @foreach (var person in Model.People) { <tr><td>@person.Name</td><td>@person.Age</td></tr> } </tbody> </table>
Сверху над таблицей эта страница будет содержать ссылку на другую страницу - Create, которая будет предназначена для добавления объектов.
Теперь аналогичным образом добавим в папку Pages/People еще одну страницу Razor - Create.cshtml. И вначале изменим файл Create.cshtml.cs:
using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; using RazorPagesApp.Models; namespace RazorPagesApp.Pages.People { public class CreateModel : PageModel { private readonly ApplicationContext _context; [BindProperty] public Person Person { get; set; } public CreateModel(ApplicationContext db) { _context = db; } public void OnGet() { } public async Task<IActionResult> OnPostAsync() { if(ModelState.IsValid) { _context.People.Add(Person); await _context.SaveChangesAsync(); return RedirectToPage("Index"); } return Page(); } } }
В методе OnPostAsync происходит добавление объекта в базу данных, после чего идет редирект на страницу Index.
А на странице Create.cshtml определим форму ввода данных:
@page @model RazorPagesApp.Pages.People.CreateModel @{ ViewData["Title"] = "Добавление нового пользователя"; } <h2>@ViewData["Title"]</h2> <div asp-validation-summary="All"></div> <form method="POST"> <div><label>Имя</label><br /><input asp-for="Person.Name" /></div> <div><label>Возраст:</label><br /><input asp-for="Person.Age" type="number" /></div> <input type="submit" value="Отправить" /> </form>
Таким образом, у нас получится следующий проект:
Запустим проект. Вначале у нас нет объектов в бд, поэтому перейдем к странице Create.cshtml и добавим один объект:
И после добавления страница Index отобразит добавленный объект: