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