Создание и вывод из базы данных в Razor Pages

Данное руководство устарело. Актуальное руководство: Руководство по 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 отобразит добавленный объект: