Microsoft недавно объявила о выпуске .NET Standard 2.0 и .NET Core 2.0. В этом выпуске ASP.NET Core MVC и Entity Framework Core было внесено немало изменений и функций.
Одна из этих функций, в частности, называется Razor Pages, которая является более ориентированной на страницы альтернативой традиционному подходу MVC. Razor Pages больше ориентированы на подход MVVM и включают в себя все основные функции, которые мы привыкли в MVC, такие как привязка модели, проверка состояния модели и помощники, но при этом все эти функции становятся проще и удобнее. В результате с помощью этой модели можно быстро и просто создать множество страниц.
Приложение Todo
Страницы Razor состоят из представления, которое представляет собой файл cshtml Razor, класса PageModel, который действует как модель представления и кода, а также ваших моделей, которые в конечном итоге будет использовать ваша страница. Когда было объявлено об этой новости, я был взволнован, узнав, как использовать эти новые функции, поэтому решил создать простое приложение, на котором можно было бы учиться. Для приложения мы будем использовать шаблон TodoMVC. Доступ к элементам задач будет осуществляться с помощью Entity Framework Core с помощью поставщика в памяти. Окончательный результат должен выглядеть примерно так.
Начиная
В Visual Studio 2017 версии 15.3 вы заметите, что для веб-приложения ASP.NET Core 2.0 было добавлено несколько новых шаблонов проектов. Вы также увидите, что шаблон веб-приложения по умолчанию теперь использует Razor Pages, а традиционный подход MVC обозначен как (Модель-Представление-Контроллер). Важно отметить, что оба этих подхода могут сосуществовать в вашем приложении и что Razor Pages встроен прямо в MVC.
Чтобы научиться всему с нуля, мы воспользуемся пустым шаблоном проекта и изучим все шаги, необходимые для запуска и запуска нашего проекта Razor Pages. Итак, давайте создадим новый проект, используя пустой шаблон проекта, и назовем его Todo.
Управление пакетами
Затем давайте взглянем на пакеты NuGet для нашего решения. Вы заметите, что в нашем проекте есть ссылки только на два пакета NuGet. С выпуском .NET Core 2.0 появилось несколько новых метапакетов, которые объявляют зависимости от всех общих сред, которые вы обычно используете, и которые автоматически устанавливают эти зависимые пакеты. Это значительно сокращает количество пакетов, которыми вы должны управлять. Мы не будем добавлять никаких дополнительных пакетов NuGet, потому что те, которые нам нужны, уже включены в Microsoft.AspNetCore.All.
Нам нужно будет добавить файл package.json, чтобы мы могли загрузить ресурсы, необходимые для нашего приложения todo. TodoMVC предоставляет два пакета npm для начала работы с их шаблоном, и мы также будем использовать jQuery. \
Модели и данные
Мы также знаем, что нам понадобится модель для хранения наших задач и способ их сохранения. Начнем с создания простого класса, представляющего задачу.
Затем мы можем сделать еще один шаг и создать наш класс контекста базы данных.
Добавление страниц Razor
Теперь давайте сосредоточимся на коде, который нам нужен для создания наших страниц Razor. Обратите внимание, что нам предоставлен файл Startup.cs, содержащий настраиваемое промежуточное ПО hello world.
Мы хотим удалить это промежуточное ПО и использовать вместо него промежуточное ПО MVC, которое по умолчанию включает поддержку Razor Pages.
Обратите внимание, что в приведенном выше коде мы создали статический путь к файлу для папки node_modules. В типичном приложении мы можем использовать что-то вроде Webpack, чтобы позаботиться об управлении, объединении и минимизации наших клиентских ресурсов, но поскольку это простое приложение, мы просто открываем папку node_modules.
Следующее, что нам нужно сделать, это создать нашу настоящую страницу Razor. Мы создадим папку под названием Pages и страницу Razor под названием Index. Visual Studio автоматически создаст для вас код Index.cshtml и Index.cshtml.cs.
Когда вы закончите, структура проекта должна выглядеть примерно так, как показано на снимке экрана моего обозревателя решений ниже.
Теперь, когда наш проект настроен, все, что нам нужно сделать, это сосредоточиться на реальной странице и логике. Если вы посмотрите файл Index.cshtml.cs, вы заметите, что он содержит следующий код по умолчанию. Вы заметите метод OnGet, который вызывается, когда HTTP-запрос GET выполняется на маршруте индекса. Точно так же метод OnPost будет вызываться, когда HTTP POST выполняется на индексном маршруте.
Я начал с копирования HTML из шаблона TodoMVC и использовал его как основу для файла Index.cshtml. Затем я добавил формы для связанных групп входных данных, чтобы их можно было отправить обратно на сервер. Для кнопок вы можете использовать помощник тега asp-page-handler, чтобы контролировать, какие методы обработчика страницы вызываются на стороне сервера. Например, нажатие следующей кнопки вызовет связанный обработчик страницы.
Полный код страницы Index.cshtml приведен ниже.
Последний этап - добавить логику в класс модели страницы. Вы заметите, что в нем есть несколько обработчиков страниц для создания, обновления и удаления задач. Код для этого ниже.
Вот и все! Я думаю, что обычно использую веб-API + SPA, но я могу оценить различные варианты, которые у нас есть сейчас при создании веб-приложений на стороне сервера. Вы можете просмотреть и скачать полный код этого проекта на GitHub.
