Введение в Razor Pages

Что такое Razor Pages. Первый проект с .NET CLI

Начиная с версии 2.0 в ASP.NET Core была добавлена такая платформа, как Razor Pages. Razor Pages предоставляют технологию, альтернативную фреймворку MVC(Model-View-Controller). В тоже время Razor Pages в плане организации считается проще чем MVC.

Приложение в Razor Pages организовано в виде страниц Razor. Каждая страница представляет пользовательский интерфейс и связанную с ним логику, причем определение пользовательского интерфейса от связанной с ним логики, что облегчает разработку приложения и его тестирование. Для определения пользовательского интерфейса применяется движок Razor, а для описания связанной со страницей логики - C#.

Для начала работы с Razor Pages создадим новый проект ASP.NET Core с .NET CLI. Для создания приложений на основе Razor Pages в .NET CLI имеется готовый шаблон - webapp, razor.

Итак, определим каталог для проекта Razor Pages. Например, в моем случае это будет каталог C:\dotnet\razorpages\helloapp. Перейдем к этому каталогу в терминале с помощью команды cd:

cd C:\dotnet\razorpages\helloapp

Затем для создания проекта в этой папке выполним команду dotnet new webapp:

C:\dotnet\razorpages\helloapp>dotnet new webapp
Шаблон "Веб-приложение ASP.NET Core" успешно создан.
Этот шаблон содержит технологии сторонних производителей, кроме Майкрософт. Дополнительные сведения см. в разделе https://aka.ms/aspnetcore/8.0-third-party-notices.

Идет обработка действий после создания...
Восстановление C:\dotnet\razorpages\helloapp\helloapp.csproj:
  Определение проектов для восстановления...
  Восстановлен C:\dotnet\razorpages\helloapp\helloapp.csproj (за 431 ms).
Восстановление выполнено.



C:\dotnet\razorpages\helloapp>

После выполнения команды будет создан следующий проект:

Частично, этот тип проекта будет повторять общую структуру проектов ASP.NET Core. Главным же отличием данного проекта от других типов проектов ASP.NET Core будет наличие папки Pages. Эта папка содержит все страницы Razor, которые есть в проекте по умолчанию. Вкратце организация проекта:

• Properties: содержит настройки проекта, в частности, файл launchSettings.json, который определяет настройки запуска проекта

• wwwroot: эта папка предназначен для хранения статических файлов. По умолчанию здесь уже есть ряд скриптов javascript и файлов css, в частности, файлы фреймворка bootstrap и библиотек валидации.

• Pages: содержит все страницы Razor. По умолчанию здесь имеются следующие файлы:

  • _Layout.cshtml: мастер-страница, в которую вставляются страницы Razor

  • _ViewStart.cshtml: задает мастер-страницу

  • _ViewImports.cshtml: определяет директивы Razor, которые добавляются на каждую страницу Razor

  • _ValidationScriptsPartial.cshtml: частичное представление, которое подключает js-скрипты валидации на стороне клиента

  • Index.cshtml, Error.cshtml и Privacy.cshtml: собственно страницы Razor, которые определяют визуальную часть страницы и логику обработки запроса.

• appsettings.Development.json: хранит конфигурацию приложения для стадии разработки

• appsettings.json: хранит конфигурацию приложения

• helloapp.csproj: главный файл проекта, который определяет его конфигурацию

• Program.cs: файл, который определяет класс Program, с которого начинается работа приложения. То есть это входная точка в приложение.

Каждая страница Razor представляет файл с расширением .cshtml и содержит смесь кода html и конструкций C#. С каждой страницей Razor связан файл отделенного кода логики на C#. Например, с файлом Index.cshtml, который определяет визуальную часть с помощью синтаксиса Razor (HTML + C#), связан файл Index.cshtml.cs, который определяет логику страницы или ее поведение с помощью кода C#.

Аналогично обстоит дело с другими страницами - Error.cshtml и Privacy.cshtml, с которыми связаны соответственно файлы кода Error.cshtml.cs и Privacy.cshtml.cs

Подключение Razor Pages

Как работают Razor Pages? Чтобы разобраться в этом, откроем файл Program.cs:

var builder = WebApplication.CreateBuilder(args);

// подключение сервисов razor pages
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Здесь надо отметить два момента. Во-первых, для использования Razor Pages необходимо подключить соответствующие сервисы:

builder.Services.AddRazorPages();

Для подключения сервисов Razor Pages применяется метод AddRazorPages.

Другим важным моментом является маршрутизация или как Razor Pages сопоставляются с запросами. В частности, в файле Program.cs также можно найти следующий вызов:

app.MapRazorPages();

Данный вызов добавляет поддержку системы маршрутизации, которая позволяет сопоставить строку запроса URL с определенной страницей Razor на основании ее расположения в проекте в папке Pages. Например, запросу /Index будет соответствовать страница /Pages/Index.cshtml. Затем на основе страницы Razor будет генерироваться html-страница, отправляемая в ответ клиенту.

Запустим проект с помощью команды

dotnet run

Консоль отобразит адрес зарущенного приложения (в моем случае это http://localhost:5183). Обратимся по этому адресу, и сработает запрос к странице Razor по умолчанию - странице Index.cshtml, на основе которой и будет сгенерирована html-страница, которую мы увидим в своем веб-браузере: