Blazor Server официально выпущен с .NET Core 3.0, а Blazor WebAssembly все еще находится в предварительной версии (выпуск запланирован на май 2020 г.). Если у вас уже есть существующее веб-приложение ASP.NET Core и вы думаете об интеграции Blazor или медленном его внедрении, этот пост поможет вам.

Вы можете начать создавать компоненты Blazor в уже существующем веб-приложении ASP.NET Core. Таким образом, вы можете начать с небольших шагов по преобразованию существующего приложения в новейшую веб-инфраструктуру Microsoft. Это поможет вам в полной мере воспользоваться новейшими технологиями и позволит вам применить их в своем приложении.

Если вы хотите понять, что такое Blazor и как он работает, ознакомьтесь с этой статьей:



Демистификация ASP.NET Core Blazor — основные концепции и его будущее
.NET Core + Razor + WebAssembly + Browser = Blazorlevelup.gitconnected.com



Как лучше всего добавить компоненты Blazor в приложение ASP.NET Core?

  1. Создайте библиотеку классов Razor в существующем решении.
  2. Добавьте к нему соответствующие компоненты Razor.
  3. Добавьте библиотеку RCL в качестве ссылки на существующий проект ASP.NET Core MVC.
  4. Начните использовать компоненты.

Преимущества:

  1. Компоненты Razor отделены от остального кода MVC.
  2. RCL можно экспортировать в любое другое приложение Blazor, которое вы, возможно, захотите создать в будущем.
  3. Вы можете начать с маленьких шагов к самой рекомендуемой платформе Microsoft для любых новых веб-приложений.

Пошаговое руководство

Скачать пример из репозитория git

Предпосылки:

  1. .NET Core 3.0 — установить отсюда
  2. Visual Studio 2019 16.3+

Давайте начнем

  1. Создайте новое веб-приложение ASP.NET Core 3.0 MVC.
  2. Найдите класс Startup.cs и вставьте приведенный ниже код, чтобы добавить AddServerSideBlazor в коллекцию услуг.

3. Найдите класс Startup.cs и вставьте приведенную ниже строку кода, чтобы добавить конечную точку приложения.

4. Найдите _layouot.cshtm и вставьте приведенную ниже библиотеку JS. Это обеспечивает подключение SinglR к компонентам сервера Blazor.

5. Щелкните правой кнопкой мыши «решение», чтобы добавить новую библиотеку классов Razor, и назовите ее RazorComponentLibrary.

6. Щелкните правой кнопкой мыши RazorComponentLibrary, чтобы добавить новый компонент Razor и назовите его ExampleComponent.razor.

7. Добавьте приведенный ниже фрагмент кода в ExampleComponent.razor.

8. В приложении MVC Core добавьте RazorComponentLibrary в качестве ссылки

9. Теперь в приложении MVC Core найдите Index.cshtml и добавьте пример компонента бритвы.

10. Вы можете идти. Запустите приложение сейчас.