Добавление RazorPages в пустой проект

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

Рассмотрим, как добавлять функциональность и страницы RazorPages в пустой проект ASP NET Core. Для этого создадим новый проект по типу Empty.

В новый проект вначале добавим папку Pages для хранения Razor Pages. Далее в эту папку Pages новую страницу Razor. Для этого нажмем на данную папку правой кнопкой мыши и выберем в контекстном меню пункт Add -> New Item. Далее среди шаблонов выберем шаблон Razor Page и назовем новый файл Index.cshtml:

После создания этой страницы в проект в папку Pages будут добавлены два файла - сама страница Index.cshtml и связаный с ней файл кода Index.cshtml.cs.

По умолчанию файл Index.cshtml выглядит следующим образом:

@page
@model EmptyRazorPagesApp.Pages.IndexModel
@{
}

Фактически это пустая страница. Директива @page указывает, что это страница Razor. А директива @model - в данном случае это класс привязанного к странице кода IndexModel. Согласно условностям класс модели называется по имени страницы плюс суффикс "Model".

А файл Index.cshtml.cs содержит простейшее определение модели IndexModel:

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

namespace EmptyRazorPagesApp.Pages
{
    public class IndexModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

Теперь добавим какую-нибудь простейшую логику. Пусть Index Razor Page принимает через запрос некоторые данные и выводит их на страницу. Допустим, мы хотим, чтобы страница принимала имя и возраст пользователя. Для этого изменим файл Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace EmptyRazorPagesApp.Pages
{
    public class IndexModel : PageModel
    {
        public string Name { get; set; }
        public int? Age { get; set; }
        public bool IsCorrect { get; set; } = true;
        public void OnGet(string name, int? age)
        {
            if (age == null || age < 1 || age > 110 || string.IsNullOrEmpty(name))
            {
                IsCorrect = false;
                return;
            }
            Age = age;
            Name = name;
        }
    }
}

Данный класс определяет три свойства: Name представляет полученное имя пользователя, а свойство Age - его возраст. IsCorrect указывает, переданы ли корректные данные.

В методе OnGet через параметры name и age мы можем получить переданные через строку запроса значения.

Также изменим код страницы Index.cshtml:

@page
@model EmptyRazorPagesApp.Pages.IndexModel

@if (Model.IsCorrect)
{
    <p>Name: <b>@Model.Name</b></p>
    <p>Age: <b>@Model.Age</b></p>
}
else
{
    <p>Переданы некорректные данные</p>
}

Через директиву @model устанавливается модель страницы. Поэтому через свойство Model мы сможем обращаться к модели страницы, в том числе к ее свойствам.

И в конце изменим класс Startup для подключения RazorPages:

using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;

namespace EmptyRazorPagesApp
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();   // добавляем сервисы Razor Pages
        }

        public void Configure(IApplicationBuilder app)
        {
            app.UseDeveloperExceptionPage();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();  // Добавляем маршрутизацию для RazorPages
            });
        }
    }
}

Запустим приложение. Если странице не переданы никакие значения (или переданы некорректные значения), то страница выведет соответствующее сообщение:

Но, к примеру, передадим какие-нибудь значения через параметры строки запроса Index?name=Tom&age=35. Приложение получит данные и выведет на страницу:

При этом как и в контроллерах MVC, параметр из строки запроса должен совпадать по названию с параметром метода OnGet.

Добавление мастер-страницы

Если у нас куча страниц Razor, то, возможно, мы столкнемся с проблемой, как установить единообразный вид для всех страниц - одни и те же стили, элементы меню и т.д. Как и в MVC, мы можем прибегнуть к мастер-страницам. Итак, добавим и установим мастер-страницу.

По умолчанию общая мастер-страница помещается в проекте в папку Shared. Но в принципе это может быть любая папка. Поэтому добавим в проект в папку Pages новый каталог Shared. А в нее поместим новое представление _Layout.cshtml со следующим кодом:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>RazorPages на Metanit.com</title>
</head>
<body>
    <div>
        <h1>Razor Pages на Metanit.com</h1>
        @RenderBody()
    </div>
	<div>© 2019 - Metanit.com</div>
</body>
</html>

Мастер-страница содержит базовый каркас html-страницы. А с помощью вызова @RenderBody() будет вставляться содержимое страницы.

Мы можем установить мастер-страницу глобально для всех RazorPages, либо же указать для каждой Razor Page по отдельности. Когда одна, две, три Razor Page, возможно, не так сложно для каждой страницы Razor задать мастер-страницу по отдельности. Но если страниц Razor много и все или большинство из них должны использовать одну и ту же мастер-страницу, то лучше воспользоваться глобальной установкой. Для этого добавим в папку Pages новое представление _ViewStart.cshtml:

@{
    Layout = "_Layout";
}

Содержимое этого файла фактически добавляется в начало каждой Razor Page.

Финальная структура проекта:

В итоге при обращении к приложению на веб-странице мы увидим в том числе содержимое, определенное на мастер-странице _Layout.cshtml: