Обучение
Схема обучения
Use advance techniques in canvas apps to perform custom updates and optimization - Training
Use advance techniques in canvas apps to perform custom updates and optimization
Этот браузер больше не поддерживается.
Выполните обновление до Microsoft Edge, чтобы воспользоваться новейшими функциями, обновлениями для системы безопасности и технической поддержкой.
Примечание
Для доступа к этой странице требуется авторизация. Вы можете попробовать войти или изменить каталоги.
Для доступа к этой странице требуется авторизация. Вы можете попробовать изменить каталоги.
Примечание
Это не последняя версия этой статьи. В текущем выпуске см. версию .NET 9 этой статьи.
Предупреждение
Эта версия ASP.NET Core больше не поддерживается. Дополнительные сведения см. в политике поддержки .NET и .NET Core. В текущем выпуске см. версию .NET 9 этой статьи.
Важно!
Эта информация относится к предварительному выпуску продукта, который может быть существенно изменен до его коммерческого выпуска. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.
В текущем выпуске см. версию .NET 9 этой статьи.
В этой статье объясняется Blazor конфигурация запуска приложения.
Общие рекомендации по настройке приложений ASP.NET Core для разработки на стороне сервера см. в разделе "Конфигурация" в ASP.NET Core.
Процесс запуска Blazor осуществляется автоматически и асинхронно с помощью скрипта Blazor (blazor.*.js
), где плейсхолдер *
:
web
для a Blazor Web Appserver
Blazor Server для приложенияwebassembly
Blazor WebAssembly для приложенияПроцесс запуска Blazor осуществляется автоматически и асинхронно с помощью скрипта Blazor (blazor.*.js
), где плейсхолдер *
:
server
Blazor Server для приложенияwebassembly
Blazor WebAssembly для приложенияСведения о расположении скрипта см. в разделе Blazor проекта Core.
Чтобы запустить Blazorвручную:
Blazor Web App:
autostart="false"
Добавьте атрибут и значение в Blazor<script>
тег.Blazor.start()
, после тега Blazor<script>
и внутри закрывающего тега </body>
.ssr
.circuit
.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. Сведения о расположении скрипта см. в разделе Blazor проекта Core.
Инициализаторы JavaScript (JS) выполняют логику до и после загрузки приложения Blazor. Инициализаторы JS полезны в следующих сценариях:
JS инициализаторы обнаруживаются в процессе сборки и импортируются автоматически. Использование инициализаторов JS часто удаляет необходимость вручную активировать функции скриптов из приложения при использовании Razor библиотек классов (RCLs).
Чтобы определить инициализатор JS, добавьте в проект модуль JS с именем {NAME}.lib.module.js
, где заполнитель {NAME}
— это имя сборки, имя библиотеки или идентификатор пакета. Поместите файл в корневой каталог проекта. Обычно это папка wwwroot
.
Для Blazor Web Apps:
beforeWebStart(options)
: вызывается перед началом Blazor Web App. Например, beforeWebStart
используется для настройки процесса загрузки, уровня ведения журнала и других параметров.
Blazor Получает веб-параметры (options
).afterWebStarted(blazor)
: Вызывается после разрешения всех beforeWebStart
обещаний. Например, afterWebStarted
можно использовать для регистрации прослушивателей событий Blazor и настраиваемых типов событий. Экземпляр Blazor передается в качестве аргумента afterWebStarted
(blazor
).beforeServerStart(options, extensions)
: вызывается до запуска первой среды выполнения сервера.
SignalR Получает параметры запуска канала () и любые расширения (options
extensions
), добавленные во время публикации.afterServerStarted(blazor)
: вызывается после запуска первой интерактивной среды выполнения сервера.beforeWebAssemblyStart(options, extensions)
: Вызывается до запуска среды выполнения WebAssembly в интерактивном режиме. Получает Blazor параметры (options
) и любые расширения (extensions
), добавленные во время публикации. Например, параметры могут указывать использование пользовательского загрузчика ресурсов загрузки.afterWebAssemblyStarted(blazor)
: вызывается после запуска интерактивной среды выполнения WebAssembly.Примечание
Устаревшие инициализаторы JS (beforeStart
, afterStarted
) не вызываются по умолчанию в Blazor Web App. Вы можете включить устаревшие инициализаторы с помощью параметра enableClassicInitializers
, чтобы они работали. Однако выполнение инициализатора прежних версий непредсказуемо.
<script>
Blazor.start({ enableClassicInitializers: true });
</script>
Из-за ошибки платформы в .NET 8 и 9 (dotnet/aspnetcore
#54049), Blazor скрипт должен быть вручную запущен при вызове beforeWebAssemblyStart(options, extensions)
или afterWebAssemblyStarted(blazor)
. Если серверное приложение еще не запускается вручную Blazor с конфигурацией WebAssembly (webAssembly: {...}
), обновите компонент App
в серверном проекте следующим образом.
В Components/App.razor
удалите существующий Blazor<script>
тег:
- <script src="_framework/blazor.web.js"></script>
Замените <script>
тег следующей разметкой, которая начинается Blazor вручную, используя конфигурацию WebAssembly (webAssembly: {...}
).
<script src="_framework/blazor.web.js" autostart="false"></script>
<script>
Blazor.start({
webAssembly: {}
});
</script>
Для Blazor Server, Blazor WebAssemblyи Blazor Hybrid приложений:
beforeStart(options, extensions)
: вызывается до запуска Blazor. Например, beforeStart
используется для настройки процесса загрузки, уровня ведения журнала и других параметров, относящихся к модели размещения.
beforeStart
получает параметры Blazor (options
) и любые расширения (extensions
), добавленные во время публикации. Например, параметры могут указывать использование пользовательского загрузчика ресурсов загрузки.beforeStart
получает SignalR параметры запуска цепи (options
).BlazorWebView
параметры не передаются.afterStarted(blazor)
: вызывается после того, как Blazor будет готов к получению вызовов из JS. Например, afterStarted
используется для инициализации библиотек с помощью выполнения межъязыковых вызовов JS и регистрации пользовательских элементов. Экземпляр Blazor передается в качестве аргумента afterStarted
(blazor
).Дополнительные обратные вызовы среды выполнения .NET WebAssembly:
onRuntimeConfigLoaded(config)
: вызывается при получении конфигурации загрузки. Позволяет приложению изменять параметры (конфигурацию) перед запуском среды выполнения (параметр из MonoConfig
dotnet.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 (параметр RuntimeAPI
из dotnet.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
, и обещание ожидается до продолжения запуска.
Имя файла:
{ASSEMBLY NAME}.lib.module.js
, в котором {ASSEMBLY NAME}
заполнитель — имя сборки приложения. Например, назовите файл BlazorSample.lib.module.js
для проекта с именем сборки BlazorSample
. Поместите файл в папку wwwroot
приложения.{LIBRARY NAME/PACKAGE ID}.lib.module.js
плейсхолдер является именем библиотеки проекта или идентификатором пакета. Например, присвойте файлу имя RazorClassLibrary1.lib.module.js
для RCL с идентификатором пакета RazorClassLibrary1
. Поместите файл в папку wwwroot
библиотеки.Для Blazor Web Apps:
В следующем примере показаны JS инициализаторы, загружающие пользовательские скрипты до и после Blazor Web App запуска, добавляя их в <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 см. в следующих ресурсах:
quoteContainer2
пример)BasicTestApp.lib.module.js
)quoteContainer2
пример)BasicTestApp.lib.module.js
)Примечание
По ссылкам в документации на справочные материалы по .NET обычно загружается ветвь репозитория по умолчанию, которая представляет текущую разработку для следующего выпуска .NET. Чтобы выбрать тег для определенного выпуска, используйте раскрывающийся список ветвей switch или тегов . Дополнительные сведения см. в разделе "Выбор тега версии" исходного кода ASP.NET Core (dotnet/AspNetCore.Docs #26205).
Добавьте пользовательские скрипты в <head>
, beforeStart
и afterStarted
в том порядке, в каком они должны загружаться.
Пример ниже загружает 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, когда документ готов к работе.
<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
Blazor.start();
});
</script>
В предыдущем примере заполнитель {BLAZOR SCRIPT}
— это путь к скрипту и имя файла Blazor. Сведения о расположении скрипта см. в разделе Blazor проекта Core.
Для выполнения дополнительных задач, таких как инициализация взаимодействия JS, используйте then
для привязки к объекту Promise
, полученному в результате запуска приложения Blazor вручную.
<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
Blazor.start().then(function () {
...
});
</script>
В предыдущем примере заполнитель {BLAZOR SCRIPT}
— это путь к скрипту и имя файла Blazor. Сведения о расположении скрипта см. в разделе Blazor проекта Core.
Когда приложение загружается в браузере, приложение загружает ресурсы загрузки с сервера:
Настройте способ загрузки этих загрузочных ресурсов с помощью API loadBootResource
. Функция loadBootResource
переопределяет встроенный механизм загрузки загрузочных ресурсов. Используйте loadBootResource
в следующих сценариях.
dotnet.wasm
, с CDN.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 Web App:
<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>
В предыдущем примере заполнитель {BLAZOR SCRIPT}
— это путь к скрипту и имя файла Blazor. Сведения о расположении скрипта см. в разделе Blazor проекта Core.
Чтобы настроить не только URL-адреса для загрузочных ресурсов, но и другие объекты, функция loadBootResource
может вызвать fetch
напрямую и вернуть результат. В следующем примере в исходящие запросы добавляется пользовательский заголовок HTTP. Передайте параметр integrity
, чтобы сохранить поведение проверки целостности по умолчанию.
Blazor Web App:
<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>
В предыдущем примере заполнитель {BLAZOR SCRIPT}
— это путь к скрипту и имя файла Blazor. Сведения о расположении скрипта см. в разделе Blazor проекта Core.
Когда функция loadBootResource
возвращает null
, Blazor использует поведение загрузки по умолчанию для ресурса. Например, предыдущий код возвращает null
для загрузочного ресурса (dotnetjs
), так как загрузочный ресурс dotnet.*.js
должен возвращать dotnetjs
для поведения загрузки по умолчанию или URI для источника загрузочного ресурса null
.
Функция loadBootResource
также может возвращать Response
обещание. Пример см. в разделе «Хостинг и развертывание ASP.NET Core» Blazor WebAssembly.
Дополнительные сведения см. в разделе ASP.NET Кэширование пакетов .NET Core Blazor WebAssembly и сбои проверки целостности.
Управлять заголовками при запуске в коде C# можно с помощью следующих подходов.
В следующих примерах политика безопасности содержимого (CSP) применяется к приложению с помощью заголовка CSP. Заполнитель {POLICY STRING}
является строкой политики CSP. Дополнительные сведения о csps см. в разделе "Принудительное применение политики безопасности содержимого" для ASP.NET Core Blazor.
Используйте промежуточное программное обеспечение 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);
Индикатор загрузки показывает, что приложение загружается обычно и что пользователь должен ждать завершения загрузки.
Индикатор загрузки, используемый в Blazor WebAssembly приложениях, отсутствует в приложении, созданном на основе шаблона проекта Blazor Web App. Обычно, индикатор загрузки не желателен для интерактивных компонентов WebAssembly, так как Blazor Web Appклиентские компоненты предварительно отрисовываются на сервере для быстрой первоначальной загрузки. Для ситуаций в смешанном режиме отрисовки код платформы или разработчика также должен быть осторожным, чтобы избежать следующих проблем:
Будущий выпуск .NET может предоставить индикатор загрузки в рамках платформы. В то же время можно добавить настраиваемый индикатор загрузки в Blazor Web App.
Этот сценарий применяется к интерактивной отрисовке WebAssembly для каждого компонента (@rendermode InteractiveWebAssembly
применяется к отдельным компонентам).
Создайте компонент ContentLoading
в папке Layout
приложения .Client
, который вызывает OperatingSystem.IsBrowser:
false
, отображайте индикатор загрузки.true
, отрисуйте содержимое запрошенного компонента.Чтобы загрузить стили CSS для индикатора, добавьте стили внутрь содержимого <head>
, используя компонент HeadContent. Дополнительные сведения см. в разделе "Управление содержимым заголовка" в приложениях ASP.NET Core.
Layout/ContentLoading.razor
:
@if (!RendererInfo.IsInteractive)
{
<!-- OPTIONAL ...
<HeadContent>
<style>
...
</style>
</HeadContent>
-->
<progress id="loadingIndicator" aria-label="Content loading…"></progress>
}
else
{
@ChildContent
}
@code {
[Parameter]
public RenderFragment? ChildContent { get; set; }
}
@if (!OperatingSystem.IsBrowser())
{
<!-- OPTIONAL ...
<HeadContent>
<style>
...
</style>
</HeadContent>
-->
<progress id="loadingIndicator" aria-label="Content loading…"></progress>
}
else
{
@ChildContent
}
@code {
[Parameter]
public RenderFragment? ChildContent { get; set; }
}
Если у вас еще нет Layout
папки в .Client
проекте, добавьте пространство имен для Layout
папки в _Imports.razor
файл. В следующем примере пространство имен проекта является BlazorSample.Client
@using BlazorSample.Client.Layout
В компоненте, который использует интерактивную отрисовку WebAssembly, оберните разметку компонента Razor с помощью компонента ContentLoading
. В следующем примере демонстрируется подход с компонентом Counter
приложения, созданного на основе шаблона проекта Blazor Web App.
Pages/Counter.razor
:
@page "/counter"
@rendermode InteractiveWebAssembly
<PageTitle>Counter</PageTitle>
<ContentLoading>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</ContentLoading>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Этот сценарий применяется к глобальной интерактивной отрисовке WebAssembly с предварительной отрисовкой (@rendermode="InteractiveWebAssembly"
на компонентах HeadOutlet
и Routes
в компоненте App
).
Создайте компонент ContentLoading
в папке Layout
приложения .Client
, который вызывает RendererInfo.IsInteractive:
false
, отображайте индикатор загрузки.true
, отрисуйте содержимое запрошенного компонента.Чтобы загрузить стили CSS для индикатора, добавьте стили внутрь содержимого <head>
, используя компонент HeadContent. Дополнительные сведения см. в разделе "Управление содержимым заголовка" в приложениях ASP.NET Core.
Layout/ContentLoading.razor
:
@if (!RendererInfo.IsInteractive)
{
<!-- OPTIONAL ...
<HeadContent>
<style>
...
</style>
</HeadContent>
-->
<progress id="loadingIndicator" aria-label="Content loading…"></progress>
}
else
{
@ChildContent
}
@code {
[Parameter]
public RenderFragment? ChildContent { get; set; }
}
@if (!OperatingSystem.IsBrowser())
{
<!-- OPTIONAL ...
<HeadContent>
<style>
...
</style>
</HeadContent>
-->
<progress id="loadingIndicator" aria-label="Content loading…"></progress>
}
else
{
@ChildContent
}
@code {
[Parameter]
public RenderFragment? ChildContent { get; set; }
}
Если у вас еще нет Layout
папки в .Client
проекте, добавьте пространство имен для Layout
папки в _Imports.razor
файл. В следующем примере пространство имен проекта: BlazorSample.Client
@using BlazorSample.Client.Layout
В компоненте MainLayout
(Layout/MainLayout.razor
) проекта .Client
оберните свойство Body (@Body
) компонентом ContentLoading
.
В Layout/MainLayout.razor
:
+ <ContentLoading>
@Body
+ </ContentLoading>
Этот сценарий применяется к глобальной интерактивной отрисовке WebAssembly без предварительной отрисовки (@rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)"
на HeadOutlet
и Routes
компонентах в компоненте App
).
Добавьте инициализатор JavaScript в приложение. В следующем примере имени файла модуля JavaScript, заполнитель {ASSEMBLY NAME}
представляет собой имя сборки проекта сервера (например, BlazorSample
). Папка wwwroot
, в которой размещается модуль, является wwwroot
папкой в серверном проекте, а не .Client
папкой в проекте.
В следующем примере используется progress
индикатор, который не указывает фактический ход доставки клиентских ресурсов загрузки клиенту, но он служит общим подходом для дальнейшей разработки, если вы хотите, чтобы индикатор хода выполнения отображал фактический ход загрузки ресурсов загрузки приложения.
wwwroot/{ASSEMBLY NAME}.lib.module.js
:
export function beforeWebStart(options) {
var progress = document.createElement("progress");
progress.id = 'loadingIndicator';
progress.ariaLabel = 'Blazor loading…';
progress.style = 'position:absolute;top:50%;left:50%;margin-right:-50%;' +
'transform:translate(-50%,-50%);';
document.body.appendChild(progress);
}
export function afterWebAssemblyStarted(blazor) {
var progress = document.getElementById('loadingIndicator');
progress.remove();
}
Из-за ошибки платформы в .NET 8 и 9 (dotnet/aspnetcore
#54049)Blazorскрипт должен быть запущен вручную. Если серверное приложение еще не запускается вручную Blazor с конфигурацией WebAssembly (webAssembly: {...}
), обновите компонент App
в серверном проекте следующим образом.
В Components/App.razor
удалите существующий Blazor<script>
тег:
- <script src="_framework/blazor.web.js"></script>
Замените <script>
тег следующей разметкой, которая начинается Blazor вручную, используя конфигурацию WebAssembly (webAssembly: {...}
).
<script src="_framework/blazor.web.js" autostart="false"></script>
<script>
Blazor.start({
webAssembly: {}
});
</script>
Если вы заметили небольшую задержку между удалением индикатора загрузки и первой отрисовкой страницы, вы можете гарантированно удалить индикатор после отрисовки, вызвав его удаление в OnAfterRenderAsync
методе жизненного цикла компонентов MainLayout
или Routes
. Дополнительные сведения и пример кода см. в статье Задокументируйте подход для индикатора загрузки, который работает с глобальным интерактивным WebAssembly без предварительного рендеринга (dotnet/AspNetCore.Docs
#35111).
Шаблон проекта содержит индикаторы масштабируемой векторной графики (SVG) и текстовые индикаторы, показывающие ход загрузки приложения.
Индикаторы хода выполнения реализуются с помощью HTML и каскадных таблиц стилей (CSS) с использованием двух настраиваемых свойств CSS (переменных), которые предоставляются с помощью Blazor:
--blazor-load-percentage
— процент загруженных файлов приложения.--blazor-load-percentage-text
— процент загруженных файлов приложения, округленный до ближайшего целого числа.Используя вышеупомянутые переменные CSS, вы можете создать пользовательские индикаторы прогресса, соответствующие стилю вашего приложения.
В следующем примере :
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.
Примечание
По ссылкам в документации на справочные материалы по .NET обычно загружается ветвь репозитория по умолчанию, которая представляет текущую разработку для следующего выпуска .NET. Чтобы выбрать тег для определенного выпуска, используйте раскрывающийся список ветвей switch или тегов . Дополнительные сведения см. в разделе "Выбор тега версии" исходного кода ASP.NET Core (dotnet/AspNetCore.Docs #26205).
Вместо использования индикатора хода выполнения по умолчанию в следующем примере показано, как реализовать линейный индикатор хода выполнения.
Добавьте следующие стили к 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-percentage
scale
свойству синего псевдо-элемента, указывающего ход загрузки файлов приложения. В процессе загрузки приложения --blazor-load-percentage
обновляется автоматически, что динамически изменяет визуальное представление индикатора хода выполнения.
В wwwroot/index.html
удалите SVG индикатор раунда по умолчанию и замените его следующей разметкой:
<div class="linear-progress"></div>
В расширенных сценариях configureRuntime
программирования функция с dotnet
построителем узлов среды выполнения используется для настройки среды выполнения .NET WebAssembly. Например, задает переменную среды, dotnet.withEnvironmentVariable
которая:
Примечание
Запрос документации ожидается в dotnet/runtime
репозитории GitHub для получения дополнительных сведений о переменных среды, которые настраивают среду выполнения .NET WebAssembly или влияют на поведение библиотек C. Хотя запрос на документацию находится на рассмотрении, более подробная информация и перекрестные ссылки на дополнительные ресурсы доступны в запросе, вопрос/запрос относительно документации на .NET WASM runtime env vars (dotnet/runtime
#98225).
Функцию configureRuntime
также можно использовать для включения интеграции с профилировщиком браузера.
Для замещающих элементов в следующих примерах, которые устанавливают переменную среды:
{BLAZOR SCRIPT}
— это путь к скрипту Blazor и имя файла. Сведения о расположении скрипта см. в разделе Blazor проекта Core.{NAME}
— это имя переменной среды.{VALUE}
— это значение переменной среды.Blazor Web App:
<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>
Примечание
Доступ к экземпляру среды выполнения .NET можно получить с помощью API среды выполнения .NET WebAssembly (Blazor.runtime
). Например, конфигурацию сборки приложения можно получить с помощью Blazor.runtime.runtimeBuildInfo.buildConfiguration
.
Для получения дополнительной информации о конфигурации среды выполнения .NET WebAssembly см. TypeScript-файл определения среды выполнения (dotnet.d.ts
) в репозитории GitHub dotnet/runtime
.
Примечание
По ссылкам в документации на справочные материалы по .NET обычно загружается ветвь репозитория по умолчанию, которая представляет текущую разработку для следующего выпуска .NET. Чтобы выбрать тег для определенного выпуска, используйте раскрывающийся список ветвей switch или тегов . Дополнительные сведения см. в разделе "Выбор тега версии" исходного кода ASP.NET Core (dotnet/AspNetCore.Docs #26205).
Этот раздел относится к Blazor Web Apps.
Чтобы отключить расширенную навигацию и обработку форм, установите disableDomPreservation
на true
для Blazor.start
.
<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
Blazor.start({
ssr: { disableDomPreservation: true }
});
</script>
В предыдущем примере заполнитель {BLAZOR SCRIPT}
— это путь к скрипту и имя файла Blazor. Сведения о расположении скрипта см. в разделе Blazor проекта Core.
Отзыв о ASP.NET Core
ASP.NET Core — это проект с открытым исходным кодом. Выберите ссылку, чтобы оставить отзыв:
Обучение
Схема обучения
Use advance techniques in canvas apps to perform custom updates and optimization - Training
Use advance techniques in canvas apps to perform custom updates and optimization