Продолжим работу с проектом из прошлой темы, где уже настроено подключение и создана база данных. Теперь определим в проекте в папке Pages новую страницу Razor, которую назовем Index.cshtml. После ее добавления в папке Pages появятся два файла: Index.cshtml и Index.cshtml.cs. Эта страница будет предназначена для вывода список пользователей из базы данных.
Изменим файл Index.cshtml.cs следующим образом:
using Microsoft.AspNetCore.Mvc.RazorPages; using Microsoft.EntityFrameworkCore; using RazorPagesApp.Models; namespace RazorPagesApp.Pages { public class IndexModel : PageModel { ApplicationContext context; public List<User> Users { get; private set; } = new(); public IndexModel(ApplicationContext db) { context = db; } public void OnGet() { Users = context.Users.AsNoTracking().ToList(); } } }
Поскольку в прошлой статье контекст данных ApplicationContext был добавлен в приложение в качестве сервиса, то в конструкторе модели страницы мы можем получить этот контекст и затем использовать его для взаимодействия с базой данных.
И изменим файл Index.cshtml для вывода списка данных:
@page @model RazorPagesApp.Pages.IndexModel <h2>Список пользователей</h2> <p><a href="/Create">Добавить пользователя</a></p> <table> <tr><th>Имя</th><th>Возраст</th></tr> @foreach (var user in Model.Users) { <tr><td>@user.Name</td><td>@user.Age</td></tr> } </table>
Сверху над таблицей эта страница будет содержать ссылку на другую страницу - Create, которая будет предназначена для добавления объектов.
Теперь аналогичным образом добавим в папку Pages еще одну страницу Razor - Create.cshtml. И вначале изменим файл Create.cshtml.cs следующим образом:
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; using RazorPagesApp.Models; namespace RazorPagesApp.Pages { [IgnoreAntiforgeryToken] public class CreateModel : PageModel { ApplicationContext context; [BindProperty] public User Person { get; set; } = new(); public CreateModel(ApplicationContext db) { context = db; } public async Task<IActionResult> OnPostAsync() { context.Users.Add(Person); await context.SaveChangesAsync(); return RedirectToPage("Index"); } } }
Класс CreateModel также через конструктор получает контекст данных для последующего добавления объекта в БД. Сам добавляемый объект определен в виде свойства Person, к которому применяется атрибут [BindProperty]. А это значит, что система автоматически будет связывать данные запроса со свойствами этого объекта.
В методе OnPostAsync() происходит добавление объекта в базу данных, после чего идет редирект на страницу Index.
И поскольку данные будут отправляться из формы в запросе Post, чтобы избежать необходимости устанавливать antiforgery-токен, к классу CreateModel применяется атрибут [IgnoreAntiforgeryToken]
А на странице Create.cshtml определим форму ввода данных:
@page @model RazorPagesApp.Pages.CreateModel <h2>Добавление нового пользователя</h2> <form method="post"> <p><label>Имя</label><br /> <input name="name" /> </p> <p> <label>Возраст:</label><br /> <input name="age" type="number" /> </p> <input type="submit" value="Отправить" /> </form>
Таким образом, у нас получится следующий проект:
Запустим проект. Вначале у нас нет объектов в бд, поэтому перейдем к странице Create.cshtml и добавим один объект:
И после добавления страница Index.cshtml отобразит добавленный объект: