Запуск Blazor ASP.NET Core

Статья
02/09/2024

Примечание.

Это не последняя версия этой статьи. В текущем выпуске см . версию .NET 8 этой статьи.

Внимание

Эта информация относится к предварительному выпуску продукта, который может быть существенно изменен до его коммерческого выпуска. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.

В текущем выпуске см . версию .NET 8 этой статьи.

В этой статье объясняется Blazor конфигурация запуска приложения.

Общие рекомендации по настройке приложений ASP.NET Core для разработки на стороне сервера см. в разделе "Конфигурация" в ASP.NET Core.

Процесс запуска и настройка

Процесс Blazor запуска является автоматическим и асинхронным с помощью скрипта Blazor (blazor.*.js), где * заполнитель:

webBlazor для веб-приложения
serverBlazor Server для приложения
webassemblyBlazor WebAssembly для приложения

serverBlazor Server для приложения
webassemblyBlazor WebAssembly для приложения

Сведения о расположении скрипта см. в разделе ASP.NET Структура проекта CoreBlazor.

Чтобы запустить Blazorвручную:

Blazor Веб-приложение:

autostart="false" Добавьте атрибут и значение в Blazor<script> тег.
Разместите скрипт, который вызывает Blazor.start(), после тега Blazor<script> и внутри закрывающего тега </body>.
Поместите параметры отрисовки на стороне сервера (статический ssr SSR) в свойство.
Размещение сервера на стороне Blazorсервера —SignalR параметры канала в свойстве circuit .
Поместите параметры WebAssembly на стороне webAssembly клиента в свойство.

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  ...
  Blazor.start({
    ssr: {
      ...
    },
    circuit: {
      ...
    },
    webAssembly: {
      ...
    }
  });
  ...
</script>

Автономный Blazor WebAssembly и Blazor Server:

autostart="false" Добавьте атрибут и значение в Blazor<script> тег.
Разместите скрипт, который вызывает Blazor.start(), после тега Blazor<script> и внутри закрывающего тега </body>.
Дополнительные параметры можно указать в параметре Blazor.start() .

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  ...
  Blazor.start({
    ...
  });
  ...
</script>

В предыдущем примере {BLAZOR SCRIPT} заполнитель — это путь к скрипту Blazor и имя файла. Сведения о расположении скрипта см. в разделе ASP.NET Структура проекта CoreBlazor.

Инициализаторы JavaScript

Инициализаторы JavaScript (JS) выполняют логику до и после загрузки приложения Blazor. Инициализаторы JS полезны в следующих сценариях:

Настройка загрузки приложения Blazor.
Инициализация библиотек перед запуском Blazor.
Настройка параметров Blazor.

JS инициализаторы обнаруживаются в процессе сборки и импортируются автоматически. При использовании инициализаторов JS часто не приходится вручную активировать функции скриптов из приложения, если используются библиотеки классов Razor (RCL).

Чтобы определить инициализатор JS, добавьте в проект модуль JS с именем {NAME}.lib.module.js, где заполнитель {NAME} — это имя сборки, имя библиотеки или идентификатор пакета. Поместите файл в корневой каталог проекта. Обычно это папка wwwroot.

Для Blazor веб-приложения:

beforeWebStart(options): вызывается до Blazor запуска веб-приложения. Например, beforeWebStart используется для настройки процесса загрузки, уровня ведения журнала и других параметров. Blazor Получает веб-параметры (options).
afterWebStarted(blazor): Вызывается после разрешения всех beforeWebStart обещаний. Например, afterWebStarted можно использовать для регистрации Blazor прослушивателей событий и пользовательских типов событий. Экземпляр Blazor передается в afterWebStarted качестве аргумента (blazor).
beforeServerStart(options, extensions): вызывается до запуска первой среды выполнения сервера. SignalR Получает параметры запуска канала () и любые расширения (optionsextensions), добавленные во время публикации.
afterServerStarted(blazor): вызывается после запуска первой интерактивной среды выполнения сервера.
beforeWebAssemblyStart(options, extensions): вызывается до запуска интерактивной среды выполнения WebAssembly. Blazor Получает параметры () и любые расширения (optionsextensions), добавленные во время публикации. Например, параметры могут определять использование настраиваемого загрузчика ресурсов.
afterWebAssemblyStarted(blazor): вызывается после запуска интерактивной среды выполнения WebAssembly.

Примечание.

Устаревшие инициализаторы (,) не вызываются по умолчанию в Blazor веб-приложении. afterStartedbeforeStartJS Вы можете включить устаревшие инициализаторы для запуска с enableClassicInitializers помощью параметра. Однако выполнение инициализатора прежних версий непредсказуемо.

<script>
  Blazor.start({ enableClassicInitializers: true });
</script>

Для Blazor Server, Blazor WebAssemblyи Blazor Hybrid приложений:

beforeStart(options, extensions): вызывается до запуска Blazor. Например, beforeStart используется для настройки процесса загрузки, уровня ведения журнала и других параметров, относящихся к модели размещения.
- beforeStart Клиент получает Blazor параметры () и любые расширения (optionsextensions), добавленные во время публикации. Например, параметры могут определять использование настраиваемого загрузчика ресурсов.
- Серверная сторона beforeStart получает SignalR параметры запуска канала (options).
- BlazorWebViewВ окне без параметров не передаются.
afterStarted(blazor): вызывается после того, как Blazor будет готов к получению вызовов из JS. Например, afterStarted используется для инициализации библиотек путем выполнения вызовов взаимодействия сJS и регистрации пользовательских элементов. Экземпляр Blazor передается в afterStarted качестве аргумента (blazor).

Дополнительные обратные вызовы среды выполнения .NET WebAssembly:

onRuntimeConfigLoaded(config): вызывается при загрузке конфигурации загрузки. Позволяет приложению изменять параметры (конфигурацию) перед запуском среды выполнения (параметр из MonoConfigdotnet.d.ts):
```
export function onRuntimeConfigLoaded(config) {
  // Sample: Enable startup diagnostic logging when the URL contains 
  // parameter debug=1
  const params = new URLSearchParams(location.search);
  if (params.get("debug") == "1") {
    config.diagnosticTracing = true;
  }
}
```

onRuntimeReady({ getAssemblyExports, getConfig }): вызывается после запуска среды выполнения .NET WebAssembly (параметр из RuntimeAPIdotnet.d.ts):

export function onRuntimeReady({ getAssemblyExports, getConfig }) {
  // Sample: After the runtime starts, but before Main method is called, 
  // call [JSExport]ed method.
  const config = getConfig();
  const exports = await getAssemblyExports(config.mainAssemblyName);
  exports.Sample.Greet();
}

Оба обратных вызова могут возвращать Promise, и обещание ожидается до продолжения запуска.

Имя файла:

JS Если инициализаторы используются в качестве статического ресурса в проекте, используйте формат{ASSEMBLY NAME}.lib.module.js, в котором {ASSEMBLY NAME} заполнитель — имя сборки приложения. Например, назовите файл BlazorSample.lib.module.js для проекта с именем сборки BlazorSample. Поместите файл в папку wwwroot приложения.
JS Если инициализаторы используются из RCL, используйте формат{LIBRARY NAME/PACKAGE ID}.lib.module.js, в котором {LIBRARY NAME/PACKAGE ID} заполнитель является именем библиотеки проекта или идентификатором пакета. Например, присвойте файлу имя RazorClassLibrary1.lib.module.js для RCL с идентификатором пакета RazorClassLibrary1. Поместите файл в папку wwwroot библиотеки.

Для Blazor веб-приложения:

В следующем примере показаны JS инициализаторы, которые загружают пользовательские скрипты до и после Blazor запуска веб-приложения, добавляя их в <head>beforeWebStart и afterWebStarted:

export function beforeWebStart() {
  var customScript = document.createElement('script');
  customScript.setAttribute('src', 'beforeStartScripts.js');
  document.head.appendChild(customScript);
}

export function afterWebStarted() {
  var customScript = document.createElement('script');
  customScript.setAttribute('src', 'afterStartedScripts.js');
  document.head.appendChild(customScript);
}

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

Для Blazor Server, Blazor WebAssemblyи Blazor Hybrid приложений:

В следующем примере показаны JS инициализаторы, которые загружают пользовательские скрипты до и после Blazor запуска, добавляя их в <head>beforeStart и afterStarted:

export function beforeStart(options, extensions) {
  var customScript = document.createElement('script');
  customScript.setAttribute('src', 'beforeStartScripts.js');
  document.head.appendChild(customScript);
}

export function afterStarted(blazor) {
  var customScript = document.createElement('script');
  customScript.setAttribute('src', 'afterStartedScripts.js');
  document.head.appendChild(customScript);
}

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

Примечание.

Приложения MVC и Razor Pages не загружают инициализаторы JS автоматически. Однако код разработчика может включать сценарий для выборки манифеста приложения и запуска загрузки инициализаторов JS.

Примеры инициализаторов JS см. в следующих ресурсах:

ASP.NET Core Blazor JavaScript со статическим отображением на стороне сервера (статический SSR)
Использование Razor компонентов в приложениях JavaScript и платформах SPA (quoteContainer2 пример)
ASP.NET Обработка событий Core Blazor (пример события пользовательской вставки буфера обмена)
Включение создания QR-кода для приложений проверки подлинности TOTP в ASP.NET Core Blazor Web App
Базовое тестовое приложение в репозитории GitHub ASP.NET Core (BasicTestApp.lib.module.js)

Использование Razor компонентов в приложениях JavaScript и платформах SPA (quoteContainer2 пример)
ASP.NET Обработка событий Core Blazor (пример события пользовательской вставки буфера обмена)
Макет развертывания для размещенных Blazor WebAssembly приложений ASP.NET Core
Базовое тестовое приложение в репозитории GitHub ASP.NET Core (BasicTestApp.lib.module.js)

Примечание.

По ссылкам в документации на справочные материалы по .NET обычно загружается ветвь репозитория по умолчанию, которая представляет текущую разработку для следующего выпуска .NET. Чтобы выбрать тег для определенного выпуска, используйте раскрывающийся список Switch branches or tags (Переключение ветвей или тегов). Дополнительные сведения см. в статье Выбор тега версии исходного кода ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Убедитесь, что библиотеки загружаются в определенном порядке

Добавьте пользовательские скрипты в <head> и afterStartedbeforeStart в том порядке, в который они должны загружаться.

Следующий пример загружается script1.js до script2.js и script3.js до script4.js:

export function beforeStart(options, extensions) {
    var customScript1 = document.createElement('script');
    customScript1.setAttribute('src', 'script1.js');
    document.head.appendChild(customScript1);

    var customScript2 = document.createElement('script');
    customScript2.setAttribute('src', 'script2.js');
    document.head.appendChild(customScript2);
}

export function afterStarted(blazor) {
    var customScript1 = document.createElement('script');
    customScript1.setAttribute('src', 'script3.js');
    document.head.appendChild(customScript1);

    var customScript2 = document.createElement('script');
    customScript2.setAttribute('src', 'script4.js');
    document.head.appendChild(customScript2);
}

Импорт дополнительных модулей

Используйте инструкции верхнего уровня import в JS файле инициализаторов для импорта дополнительных модулей.

additionalModule.js:

export function logMessage() {
  console.log('logMessage is logging');
}

JS В файле инициализаторов (.lib.module.js):

import { logMessage } from "/additionalModule.js";

export function beforeStart(options, extensions) {
  ...

  logMessage();
}

Карта импорта

Карты импорта поддерживаются ASP.NET Core и Blazor.

Инициализация Blazor при готовности документа

Следующий пример запускает Blazor, когда документ готов к работе.

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    Blazor.start();
  });
</script>

Связывание с `Promise` в результате запуска вручную

Для выполнения дополнительных задач, таких как инициализация взаимодействия JS, используйте then для привязки к объекту Promise, полученному в результате запуска приложения Blazor вручную.

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start().then(function () {
    ...
  });
</script>

Примечание.

Чтобы библиотека автоматически выполняла дополнительные задачи после Blazor запуска, используйте инициализатор JavaScript. JS Использование инициализатора не требует, чтобы потребитель библиотеки цепочки JS вызовов запуска Blazorвручную.

Загрузка ресурсов загрузки на стороне клиента

Когда приложение загружается в браузере, приложение загружает ресурсы загрузки с сервера:

Код JavaScript для начальной загрузки приложения
Среда выполнения и сборки .NET
Данные определенного языкового стандарта

Настройте способ загрузки этих загрузочных ресурсов с помощью API loadBootResource. Функция loadBootResource переопределяет встроенный механизм загрузки загрузочных ресурсов. Используйте loadBootResource в следующих сценариях.

При загрузке статических ресурсов, таких как данные о часовом поясе или dotnet.wasm, из сети CDN.
Загрузить сжатые сборки с помощью HTTP-запроса и распаковать их на клиенте для узлов, которые не поддерживают получение сжатого содержимого с сервера.
Создать псевдоним ресурсов, выбрав другое имя путем перенаправления каждого запроса fetch на новое имя.

Примечание.

Внешние источники должны возвращать необходимые заголовки Общего доступа к ресурсам независимо от источника (CORS) для браузеров, чтобы разрешить загрузку ресурсов между источниками. По умолчанию CDN обычно предоставляют необходимые заголовки.

Параметры loadBootResource приведены в следующей таблице.

Параметр	Описание
`type`	Тип ресурса. Допустимые типы: `assembly`, `pdb`, `dotnetjs`, `dotnetwasm`и `timezonedata`. Необходимо указать только типы для пользовательских поведений. Типы, не указанные в `loadBootResource`, загружаются платформой в соответствии с поведением при загрузке по умолчанию. `dotnetjs` Ресурс загрузки (`dotnet.*.js`) должен возвращать `null` поведение загрузки по умолчанию или универсальный код ресурса (URI) для источника ресурса `dotnetjs` загрузки.
`name`	Имя ресурса.
`defaultUri`	Относительный или абсолютный URI ресурса.
`integrity`	Строка целостности, представляющая ожидаемое содержимое в ответе.

Функция loadBootResource может вернуть строку URI для переопределения процесса загрузки. В следующем примере файлы из bin/Release/{TARGET FRAMEWORK}/wwwroot/_framework обслуживаются из сети CDN в https://cdn.example.com/blazorwebassembly/{VERSION}/:

dotnet.*.js
dotnet.wasm
Данные часового пояса

Заполнитель {TARGET FRAMEWORK} — это моникер целевой платформы (например, net7.0). Заполнитель {VERSION} — это общая версия платформы (например, 7.0.0).

Blazor Веб-приложение:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    webAssembly: {
      loadBootResource: function (type, name, defaultUri, integrity) {
        console.log(`Loading: '${type}', '${name}', '${defaultUri}', '${integrity}'`);
        switch (type) {
          case 'dotnetjs':
          case 'dotnetwasm':
          case 'timezonedata':
            return `https://cdn.example.com/blazorwebassembly/{VERSION}/${name}`;
        }
      }
    }
  });
</script>

Изолированное решение Blazor WebAssembly:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    loadBootResource: function (type, name, defaultUri, integrity) {
      console.log(`Loading: '${type}', '${name}', '${defaultUri}', '${integrity}'`);
      switch (type) {
        case 'dotnetjs':
        case 'dotnetwasm':
        case 'timezonedata':
          return `https://cdn.example.com/blazorwebassembly/{VERSION}/${name}`;
      }
    }
  });
</script>

Чтобы настроить не только URL-адреса для загрузочных ресурсов, но и другие объекты, функция loadBootResource может вызвать fetch напрямую и вернуть результат. В следующем примере в исходящие запросы добавляется пользовательский заголовок HTTP. Передайте параметр integrity в заголовке для сохранения поведения проверки целостности по умолчанию.

Blazor Веб-приложение:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    webAssembly: {
      loadBootResource: function (type, name, defaultUri, integrity) {
        if (type == 'dotnetjs') {
          return null;
        } else {
          return fetch(defaultUri, {
            cache: 'no-cache',
            integrity: integrity,
            headers: { 'Custom-Header': 'Custom Value' }
          });
        }
      }
    }
  });
</script>

Изолированное решение Blazor WebAssembly:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    loadBootResource: function (type, name, defaultUri, integrity) {
      if (type == 'dotnetjs') {
        return null;
      } else {
        return fetch(defaultUri, {
          cache: 'no-cache',
          integrity: integrity,
          headers: { 'Custom-Header': 'Custom Value' }
        });
      }
    }
  });
</script>

loadBootResource Когда функция возвращаетсяnull, Blazor использует поведение загрузки по умолчанию для ресурса. Например, предыдущий код возвращается для dotnetjs ресурса загрузки (dotnet.*.js), так как dotnetjs загрузочный ресурс должен возвращать nullnull поведение загрузки по умолчанию или URI для источника загрузочного dotnetjs ресурса.

Функция loadBootResource также может возвращать Response обещание. Пример см. в статье Размещение и развертывание ASP.NET Core Blazor WebAssembly.

Дополнительные сведения см. в разделе ASP.NET Среда выполнения .NET Core Blazor WebAssembly и кэширование пакета приложений.

Управление заголовками в коде C#

Управлять заголовками при запуске в коде C# можно с помощью следующих подходов.

В следующих примерах Политика безопасности содержимого (CSP) применяется к приложению через заголовок CSP. Заполнитель {POLICY STRING} является строкой политики CSP.

Сценарии на стороне сервера и предопределенные клиентские сценарии

Используйте по промежуточному поверх ASP.NET Core для управления коллекцией заголовков.

В файле Program:

В методе Startup.Configure в файле Startup.cs:

app.Use(async (context, next) =>
{
    context.Response.Headers.Append("Content-Security-Policy", "{POLICY STRING}");
    await next();
});

В предыдущем примере используется встроенное ПО промежуточного слоя, но вы также можете создать пользовательский класс ПО промежуточного слоя и вызвать ПО промежуточного слоя с помощью метода расширения в Program файле. Дополнительные сведения см. в разделе Создание пользовательского ПО промежуточного слоя ASP.NET Core.

Разработка на стороне клиента без предварительной подготовки

Передайте StaticFileOptions в MapFallbackToFile нее заголовки ответа на OnPrepareResponse этапе.

В серверном Program файле:

В методе Startup.Configure в файле Startup.cs:

var staticFileOptions = new StaticFileOptions
{
    OnPrepareResponse = context =>
    {
        context.Context.Response.Headers.Append("Content-Security-Policy", 
            "{POLICY STRING}");
    }
};

...

app.MapFallbackToFile("index.html", staticFileOptions);

Дополнительные сведения о CSP см. в статье Применение политики безопасности содержимого для ASP.NET Core Blazor.

Индикаторы хода загрузки на стороне клиента

Индикатор хода загрузки показывает ход загрузки приложения пользователям, указывая, что приложение загружается обычно и что пользователь должен ждать завершения загрузки.

Blazor Ход загрузки веб-приложения

Индикатор хода загрузки, используемый в приложениях, отсутствует в Blazor WebAssembly приложении, созданном Blazor из шаблона проекта веб-приложения. Обычно индикатор хода загрузки не является желательным для интерактивных компонентов WebAssembly, так как Blazor веб-приложения клиентские компоненты предварительной подготовки на сервере для быстрого начального времени загрузки. Для ситуаций в смешанном режиме отрисовки код платформы или разработчика также должен быть осторожным, чтобы избежать следующих проблем:

Отображение нескольких индикаторов загрузки на одной отрисованной странице.
Непреднамеренно отключается карта предварительно созданное содержимое во время загрузки среды выполнения WebAssembly.

Будущий выпуск .NET может предоставить индикатор хода загрузки на основе платформы. В то же время можно добавить в веб-приложение пользовательский индикатор Blazor хода загрузки.

LoadingProgress Создайте компонент в .Client приложении, который вызываетOperatingSystem.IsBrowser:

При falseпоявлении индикатора хода загрузки во время Blazor скачивания пакета и перед Blazor активацией среды выполнения на клиенте.
Когда trueотрисуйте содержимое запрошенного компонента.

В следующей демонстрации используется индикатор хода загрузки, найденный в приложениях, созданных на основе Blazor WebAssembly шаблона, включая изменение стилей, которые предоставляет шаблон. Стили загружаются в содержимое приложения <head> компонентом HeadContent . Дополнительные сведения см. в статье Управление содержимым head в приложениях ASP.NET Core Blazor.

LoadingProgress.razor:

@if (!OperatingSystem.IsBrowser())
{
    <HeadContent>
        <style>
            .loading-progress {
                position: relative;
                display: block;
                width: 8rem;
                height: 8rem;
                margin: 20vh auto 1rem auto;
            }

                .loading-progress circle {
                    fill: none;
                    stroke: #e0e0e0;
                    stroke-width: 0.6rem;
                    transform-origin: 50% 50%;
                    transform: rotate(-90deg);
                }

                    .loading-progress circle:last-child {
                        stroke: #1b6ec2;
                        stroke-dasharray: 
                            calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 
                            500%;
                        transition: stroke-dasharray 0.05s ease-in-out;
                    }

            .loading-progress-text {
                position: relative;
                text-align: center;
                font-weight: bold;
                top: -90px;
            }

                .loading-progress-text:after {
                    content: var(--blazor-load-percentage-text, "Loading");
                }

            code {
                color: #c02d76;
            }
        </style>
    </HeadContent>
    <svg class="loading-progress">
        <circle r="40%" cx="50%" cy="50%" />
        <circle r="40%" cx="50%" cy="50%" />
    </svg>
    <div class="loading-progress-text"></div>
}
else
{
    @ChildContent
}

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

В компоненте, который использует интерактивную отрисовку WebAssembly, обтекайте разметку компонента Razor компонентом LoadingProgress . В следующем примере демонстрируется подход с Counter компонентом приложения, созданного Blazor на основе шаблона проекта веб-приложения.

Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveWebAssembly

<PageTitle>Counter</PageTitle>

<LoadingProgress>
    <h1>Counter</h1>

    <p role="status">Current count: @currentCount</p>

    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</LoadingProgress>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Blazor WebAssembly Ход загрузки приложения

Шаблон проекта содержит индикаторы масштабируемой векторной графики (SVG) и текстовые индикаторы, показывающие ход загрузки приложения.

Индикаторы хода выполнения реализуются с помощью HTML и каскадных таблиц стилей (CSS) с использованием двух настраиваемых свойств CSS (переменных), которые предоставляются с помощью Blazor:

--blazor-load-percentage — процент загруженных файлов приложения.
--blazor-load-percentage-text — процент загруженных файлов приложения, округленный до ближайшего целого числа.

Переменные каскадных таблицы стилей выше позволяют создавать пользовательские индикаторы хода выполнения согласно стилю приложения.

В следующем примере :

resourcesLoaded — это текущее число ресурсов, загруженных во время запуска приложения.
totalResources — общее количество ресурсов для загрузки.

const percentage = resourcesLoaded / totalResources * 100;
document.documentElement.style.setProperty(
  '--blazor-load-percentage', `${percentage}%`);
document.documentElement.style.setProperty(
  '--blazor-load-percentage-text', `"${Math.floor(percentage)}%"`);

Индикатор хода выполнения по умолчанию реализуется в HTML-файле wwwroot/index.html :

<div id="app">
    <svg class="loading-progress">
        <circle r="40%" cx="50%" cy="50%" />
        <circle r="40%" cx="50%" cy="50%" />
    </svg>
    <div class="loading-progress-text"></div>
</div>

Разметку шаблона проекта и стили для индикаторов хода выполнения по умолчанию см. в справочном ресурсе по ASP.NET Core:

Примечание.

Вместо использования индикатора хода выполнения по умолчанию в следующем примере показано, как реализовать линейный индикатор хода выполнения.

Добавьте следующие стили wwwroot/css/app.css:

.linear-progress {
    background: silver;
    width: 50vw;
    margin: 20% auto;
    height: 1rem;
    border-radius: 10rem;
    overflow: hidden;
    position: relative;
}

.linear-progress:after {
    content: '';
    position: absolute;
    inset: 0;
    background: blue;
    scale: var(--blazor-load-percentage, 0%) 100%;
    transform-origin: left top;
    transition: scale ease-out 0.5s;
}

Переменная CSS (var(...)) используется для передачи значения --blazor-load-percentagescale свойству синего псевдо-элемента, указывающего ход загрузки файлов приложения. По мере загрузки приложения обновляется автоматически, --blazor-load-percentage что динамически изменяет визуальное представление индикатора хода выполнения.

В wwwroot/index.htmlудалите индикатор <div id="app">...</div> раунда SVG по умолчанию и замените его следующим разметкой:

<div class="linear-progress"></div>

Настройка среды выполнения .NET WebAssembly

В расширенных сценариях configureRuntime программирования функция с dotnet построителем узлов среды выполнения используется для настройки среды выполнения .NET WebAssembly. Например, задает переменную среды, dotnet.withEnvironmentVariable которая:

Настраивает среду выполнения .NET WebAssembly.
Изменяет поведение библиотеки C.

Функцию configureRuntime также можно использовать для включения интеграции с профилировщиком браузера.

В следующих примерах, которые задают переменную среды:

Заполнитель {BLAZOR SCRIPT} — это путь к скрипту Blazor и имя файла. Сведения о расположении скрипта см. в разделе ASP.NET Структура проекта CoreBlazor.
Заполнитель {NAME} — это имя переменной среды.
Заполнитель {VALUE} — это значение переменной среды.

Blazor Веб-приложение:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    webAssembly: {
      configureRuntime: dotnet => {
        dotnet.withEnvironmentVariable("{NAME}", "{VALUE}");
      }
    }
  });
</script>

Изолированное решение Blazor WebAssembly:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    configureRuntime: dotnet => {
      dotnet.withEnvironmentVariable("{NAME}", "{VALUE}");
    }
  });
</script>

Примечание.

Доступ к экземпляру Blazor WebAssembly среды выполнения .NET можно получить с помощью API среды выполнения (Blazor.runtime). Например, конфигурацию сборки приложения можно получить с помощью Blazor.runtime.runtimeBuildInfo.buildConfiguration.

Дополнительные сведения о конфигурации среды выполнения .NET WebAssembly см . в файле определения TypeScript среды выполнения (dotnet.d.ts) в dotnet/runtime репозитории GitHub.

Примечание.

Этот раздел относится к Blazor веб-приложения.

Чтобы отключить расширенную навигацию и обработку форм, установите для параметра disableDomPreservationtrue .Blazor.start

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  Blazor.start({
    ssr: { disableDomPreservation: true }
  });
</script>

Запуск Blazor ASP.NET Core

Процесс запуска и настройка

Инициализаторы JavaScript

Убедитесь, что библиотеки загружаются в определенном порядке

Импорт дополнительных модулей

Карта импорта

Инициализация Blazor при готовности документа

Связывание с `Promise` в результате запуска вручную

Загрузка ресурсов загрузки на стороне клиента

Управление заголовками в коде C#

Сценарии на стороне сервера и предопределенные клиентские сценарии

Разработка на стороне клиента без предварительной подготовки

Индикаторы хода загрузки на стороне клиента

Blazor Ход загрузки веб-приложения

Blazor WebAssembly Ход загрузки приложения

Настройка среды выполнения .NET WebAssembly

Отключение расширенной навигации и обработки форм

Дополнительные ресурсы

Обратная связь

Дополнительные ресурсы

Запуск Blazor ASP.NET Core

Процесс запуска и настройка

Инициализаторы JavaScript

Убедитесь, что библиотеки загружаются в определенном порядке

Импорт дополнительных модулей

Карта импорта

Инициализация Blazor при готовности документа

Связывание с Promise в результате запуска вручную

Загрузка ресурсов загрузки на стороне клиента

Управление заголовками в коде C#

Сценарии на стороне сервера и предопределенные клиентские сценарии

Разработка на стороне клиента без предварительной подготовки

Индикаторы хода загрузки на стороне клиента

Blazor Ход загрузки веб-приложения

Blazor WebAssembly Ход загрузки приложения

Настройка среды выполнения .NET WebAssembly

Отключение расширенной навигации и обработки форм

Дополнительные ресурсы

Обратная связь

Дополнительные ресурсы

Связывание с `Promise` в результате запуска вручную