Запустите Blazor WASM как Blazor на стороне сервера

ПРИМЕЧАНИЕ. Это сообщение в стиле "Поделитесь своими знаниями - вопросы и ответы". Я, вероятно, получил отрицательный голос, потому что кто-то неверно истолковал контекст этого поста :(

Проблема

Blazor WASM можно было бы легко предпочесть Blazor Server-Side без его недостатков с точки зрения разработки. В настоящее время Blazor WASM не поддерживает полнофункциональную отладку и запускается очень медленно. Это замедляет разработку намного больше, чем с серверной частью Blazor. Хотя я, честно говоря, лично считаю, что отладка замедляет разработку гораздо больше, чем медленный запуск.

Предложенное решение

ПРИМЕЧАНИЕ. Я включил предложенное слово, потому что я не уверен в недостатках, которые может вызвать это решение, поэтому не стесняйтесь комментировать мой ответ ниже.

Решение состоит в том, чтобы просто создать дополнительный серверный проект Blazor, а затем связать проект Blazor WASM с серверным проектом Blazor. После этого добавьте некоторые настройки в Startup и _Host.cshtml серверной части Blazor, чтобы правильно использовать файлы бритвы Blazor WASM и файлы wwwroot. См. Предлагаемый мной ответ ниже для пошагового объяснения этого решения.

Проще говоря, это решение просто добавляет и настраивает проект Blazor на стороне сервера без внесения каких-либо изменений и значительного дублирования кода в Blazor WASM. проект.


c# blazor blazor-webassembly blazor-server-side
person DaaWaan    schedule 06.09.2020    source источник

Ответы (1)


arrow_upward
9
arrow_downward

ПРИМЕЧАНИЕ. В этом примере я использую Visual Studio 2019 16.7.2, а текущая версия шаблонов - 3.1.8.

  1. Создайте проект Blazor WASM. Как вариант ASP.NET Core Hosted, так и вариант Standalone будут работать нормально, но они будут иметь разные конфигурации, которые будут обсуждаться позже. Остальные варианты ни на что не повлияют. В этом примере я выберу ASP.NET Core Hosted, чтобы позже объяснить наличие контроллеров API. Также впоследствии создайте серверный проект Blazor.

    Создать проект WASM Blazor, размещенный на ASP.NET Core Создать серверный проект Blazor

  1. На данный момент структура вашего проекта должна быть похожа на первый снимок экрана ниже.

    Удалите выделенные элементы в серверном проекте Blazor, показанном на втором снимке экрана ниже.

    введите описание изображения здесь Элементы для удаления из серверного проекта Blazor

  1. Свяжите проект Blazor WASM с серверным проектом Blazor.

    • ASP.NET Core Hosted - Reference both the BlazorWasm.Client & BlazorWasm.Server project.
    • Автономный: укажите отдельный проект Blazor WASM как есть.

  1. Перейдите к классу Startup серверного проекта Blazor. В ConfigureServices() удалите WeatherForecastService вместе с пространством имен BlazorServer.Data, затем добавьте службу для HttpClient, которая будет использоваться файлами бритвы из проекта Blazor WASM.

    services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(sp.GetRequiredService<NavigationManager>().BaseUri) });

    ПРИМЕЧАНИЕ. В производственной среде я не предлагаю создавать экземпляр HttpClient. Вместо этого используйте IHttpClientFactory. Посетите эту статью Используйте IHttpClientFactory для реализации устойчивых HTTP-запросов.

    Для проектов WASM ASP.NET Core

    В Configure() сопоставьте конечные точки контроллеров. Это будет использовать контроллеры в проекте _12 _ / _ 13_.

    app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    ...
});

  1. Перейдите к _Host.cshtml в папке / Pages серверного проекта Blazor. Измените ссылку css/site.css на css/app.css, поскольку имена файлов для основного файла css для проекта Blazor WASM отличаются.

    <link href="css/site.css" rel="stylesheet" /> <!-- Previous -->
<link href="css/app.css" rel="stylesheet" /> <!-- New -->

  1. Наконец, измените App в атрибуте type тега component и обратитесь к файлу класса бритвы App в проекте Blazor WASM. В этом примере класс App находится в проекте BlazorWasm.Client:

    <component type="typeof(App)" render-mode="ServerPrerendered" /> <!-- Previous -->
<component type="typeof(BlazorWasm.Client.App)" render-mode="ServerPrerendered" /> <!-- New -->

Вот и все! Когда вы запускаете серверный проект Blazor, он должен загружаться без текста «Загрузка ...».

  • В проект (ы) Blazor WASM не было внесено никаких изменений и не было сделано значительного дублирования кода.
  • Единственное, что нужно изменить, это ссылки и launchSettings.json & appsettings.json.
  • Что касается конфигураций в Startup для серверной стороны Blazor, вы можете просто создать методы расширения в проектах Blazor WASM и использовать их в проекте Blazor на стороне сервера.

ПРИМЕЧАНИЕ. Я честно считаю, что это идеально (?) только для отладки во время разработки, поскольку файлы бритвы WASM не будут полностью использовать возможности истинной серверной стороны Blazor, потому что они все равно будут использовать HTTP-запросы.

Проект Blazor WASM, работающий на стороне сервера Blazor

Надеемся на отзывы внизу! : DD

person DaaWaan    schedule 06.09.2020
comment
Как в этом случае справиться с аутентификацией? - person Mihaimyh; 10.09.2020
comment
Спасибо! Это работает приятно и определенно делает процесс разработки гораздо более приятным. Стандартный запуск / отладка WASM занимает много времени и в основном непригоден для использования, но опять же, я использую только Core i7, поэтому, надеюсь, MS скоро исправит это. - person Gordon Rudman; 12.09.2020
comment
@ Гордон Рудман Верно. Хотя релиз .NET 5 уже близок и мы надеемся, что в процессе разработки есть улучшения, тем временем мы можем это сделать. - person DaaWaan; 12.09.2020
comment
@Mihaimyh Простите за поздний ответ, я не думаю, что запуск Blazor WASM на стороне сервера Blazor повлияет на аутентификацию. Обучите меня, если я что-то упускаю. - person DaaWaan; 12.09.2020