ASP.NET Core Blazor spuštění

Tento článek vysvětluje Blazor konfiguraci spuštění aplikace.

Pro obecné pokyny ke konfiguraci aplikace ASP.NET Core pro vývoj na straně serveru si prohlédněte Konfigurace v ASP.NET Core.

Proces spuštění a konfigurace

Proces Blazor spuštění je automatický a asynchronní prostřednictvím skriptu Blazor (blazor.*.js), kde je zástupný symbol *:

• web pro Blazor Web App
• server pro Blazor Server aplikaci
• webassembly pro Blazor WebAssembly aplikaci

Viz umístění skriptu v ASP.NET Core Blazor struktuře projektu.

Chcete-li spuštění provést ručně Blazor:

Blazor Web App:

• Přidejte atribut autostart="false" a hodnotu do tagu Blazor<script>.
• Umístěte skript, který vyvolá Blazor.start() za značku Blazor<script> a dovnitř uzavírací značky </body>.
• Umístěte možnosti statického server-side renderování (statický SSR) do vlastnosti ssr.
• Umístěte možnosti okruhu na serveru Blazor–SignalR do pole vlastnosti circuit.
• Umístěte možnosti WebAssembly na straně klienta do vlastnosti webAssembly.

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

Samostatné Blazor WebAssembly a Blazor Server:

• Přidejte atribut autostart="false" a hodnotu do tagu Blazor<script>.
• Umístěte skript, který vyvolá Blazor.start() za značku Blazor<script> a dovnitř uzavírací značky </body>.
• Do parametru Blazor.start() můžete poskytnout další možnosti.

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

V předchozím příkladu je zástupný symbol {BLAZOR SCRIPT} cestou ke skriptu a názvem souboru Blazor. Viz umístění skriptu v ASP.NET Core Blazor struktuře projektu.

Inicializátory JavaScriptu

Inicializátory JavaScript (JS) provádějí logiku před a po načtení aplikace Blazor. JS inicializátory jsou užitečné v následujících scénářích:

• Přizpůsobení, jak se aplikace Blazor načítá.
• Inicializace knihoven před spuštěním Blazor.
• Konfigurace nastavení Blazor.

JS inicializátory jsou detekovány jako součást procesu sestavení a automaticky importovány. Použití inicializátorů JS často odstraňuje potřebu ručně spouštět skriptovací funkce z aplikace při používání Razor.

Chcete-li definovat inicializátor JS, přidejte do projektu modul JS pojmenovaný {NAME}.lib.module.js, kde zástupný symbol {NAME} je název sestavení, název knihovny nebo identifikátor balíčku. Umístěte soubor do webového kořene projektu, což je obvykle složka wwwroot.

Pro Blazor Web Apps:

• beforeWebStart(options): Zavolá se před spuštěním Blazor Web App. Například se beforeWebStart používá k přizpůsobení procesu načítání, úrovně protokolování a dalších možností. Přijímá Blazor webové možnosti (options).
• afterWebStarted(blazor): Voláno po vyřešení všech beforeWebStart příslibů. Například afterWebStarted lze použít k registraci posluchačů událostí Blazor a vlastních typů událostí. Instance Blazor je předána afterWebStarted jako argument (blazor).
• beforeServerStart(options, extensions): Voláno před spuštěním prvního běhového prostředí serveru. Přijímá možnosti zahájení obvodu SignalR (možnosti zahájení obvodu options) a jakékoliv rozšíření extensions přidané během publikování.
• afterServerStarted(blazor): Zavoláno po spuštění prvního běhu interaktivního serveru.
• beforeWebAssemblyStart(options, extensions): Volá se před spuštěním interaktivního webového prostředí WebAssembly. Přijímá možnosti Blazor (options) a veškeré rozšíření extensions přidané během publikování. Například možnosti mohou specifikovat použití vlastního nahrávače zdrojů při startu.
• afterWebAssemblyStarted(blazor): Voláno po spuštění interaktivní runtime WebAssembly.

Poznámka

Legacy JS inicializátory (beforeStart, afterStarted) nejsou ve výchozím nastavení vyvolávány v Blazor Web App. Můžete povolit spuštění starších inicializátorů pomocí možnosti enableClassicInitializers. Provoz inicializátoru ve starších systémech je nepředvídatelný.

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

Pro aplikace Blazor Server, Blazor WebAssembly a Blazor Hybrid:

• beforeStart(options, extensions): Zavoláno před spuštěním Blazor. Například beforeStart se používá k přizpůsobení procesu načítání, úrovně protokolování a dalších možností specifických pro hostingový model.
  • Na straně klienta, beforeStart přijímá možnosti Blazor (options) a všechna rozšíření extensions přidaná během publikování. Například možnosti mohou specifikovat použití vlastního nahrávače zdrojů při startu.
  • Na straně serveru beforeStart obdrží SignalR možnosti spuštění obvodu (options).
  • V BlazorWebView nejsou předávány žádné možnosti.
• afterStarted(blazor): Voláno poté, co je Blazor připraveno přijímat hovory od JS. Například se afterStarted používá k inicializaci knihoven pomocí JS interop volání a registrace vlastních prvků. Instance Blazor je předána afterStarted jako argument (blazor).

Dodatečné zpětné volání runtime .NET WebAssembly.

• onRuntimeConfigLoaded(config): Voláno při stažení konfigurace spouštění. Umožňuje aplikaci upravit parametry (konfigurace) před spuštěním runtime (parametr je MonoConfig z 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 }): Voláno po spuštění běhu .NET WebAssembly (parametr je RuntimeAPI z 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();
  }
  

Oba zpětné volání mohou vrátit Promise, a slib je očekáván předtím, než spuštění pokračuje.

Pro název souboru:

• Pokud jsou inicializátory JS spotřebovány jako statický prostředek v projektu, použijte formát {ASSEMBLY NAME}.lib.module.js, kde zástupný symbol {ASSEMBLY NAME} je názvem sestavy aplikace. Například pojmenujte soubor BlazorSample.lib.module.js pro projekt s názvem sestavení BlazorSample. Umístěte soubor do složky wwwroot aplikace.
• JS Pokud jsou inicializátory spotřebovány ze seznamu RCL, použijte formát {LIBRARY NAME/PACKAGE ID}.lib.module.js, kde {LIBRARY NAME/PACKAGE ID} zástupný znak je název knihovny projektu nebo identifikátor balíčku (<PackageId> hodnota v souboru projektu knihovny). Například pojmenujte soubor RazorClassLibrary1.lib.module.js, pokud má RCL identifikátor balíčku RazorClassLibrary1. Umístěte soubor do složky wwwroot knihovny.

Pro Blazor Web Apps:

Následující příklad demonstruje inicializátory JS, které načítají vlastní skripty před a po spuštění Blazor Web App tím, že je připojí do <head> v beforeWebStart a 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);
}

Předchozí příklad beforeWebStart pouze zaručuje, že vlastní skript se načte předtím, než Blazor začne. Nezaručuje to, že očekávané sliby ve skriptu dokončí svůj běh předtím, než Blazor začne.

Pro aplikace Blazor Server, Blazor WebAssembly a Blazor Hybrid:

Následující příklad demonstruje JS inicializátory, které načítají vlastní skripty před a po spuštění Blazor tím, že je připojují k <head> v beforeStart a 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);
}

Předchozí příklad beforeStart pouze zaručuje, že vlastní skript se načte předtím, než Blazor začne. Nezaručuje to, že očekávané sliby ve skriptu dokončí svůj běh předtím, než Blazor začne.

Poznámka

MVC a aplikace Stránky automaticky nenačítají inicializátory Razor. Vývojářský kód může nicméně zahrnovat skript pro získání manifestu aplikace a spustit načítání inicializátorů JS.

Pro příklady inicializátorů JS si prohlédněte následující zdroje:

• Blazor Web App indikátor načítání (globální interaktivní vykreslování WebAssembly bez příkladu předběžného vykreslování)
• ASP.NET Core Blazor JavaScript se statickým vykreslováním na straně serveru (statické SSR)
• Používejte Razor komponenty v aplikacích JavaScript a SPA frameworkech (quoteContainer2 příklad)
• Zpracování událostí ASP.NET CoreBlazor (Příklad vlastní události vkládání ze schránky)
• Povolit generaci QR kódů pro autentizační aplikace TOTP v ASP.NET Core Blazor Web App
• Základní testovací aplikace v úložišti ASP.NET Core Na GitHubu (BasicTestApp.lib.module.js)

Poznámka

Odkazy na dokumentaci k referenčnímu zdroji .NET obvykle načítají výchozí větev úložiště, která představuje aktuální vývoj pro další vydání .NET. Pro výběr značky pro konkrétní vydání použijte rozbalovací seznam Switch branches or tags. Pro více informací vizte Jak vybrat značku verze zdrojového kódu ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Ujistěte se, že knihovny jsou načteny ve specifickém pořadí.

Přidejte vlastní skripty ke <head> v beforeStart a afterStarted v pořadí, v jakém by se měly načítat.

Následující příklad načte script1.js před script2.js a script3.js před 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);
}

Importovat další moduly

Použijte příkazy úrovně import nejvyšší úrovně ve JS inicializačním souboru pro import dalších modulů.

additionalModule.js:

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

V souboru inicializátorů JS (.lib.module.js):

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

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

  logMessage();
}

Importní mapa

Import mapy jsou podporovány v ASP.NET Core a Blazor.

Inicializovat Blazor když je dokument připraven.

Následující příklad se spustí Blazor, když je dokument připraven:

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

V předchozím příkladu je zástupný symbol {BLAZOR SCRIPT} cestou ke skriptu a názvem souboru Blazor. Viz umístění skriptu v ASP.NET Core Blazor struktuře projektu.

Řetěz k Promise, který vyplývá z ručního spuštění

K provedení dalších úkolů, jako je JS inicializace interoperability, použijte then k propojení s Promise, který vyplývá z manuálního Blazor spuštění aplikace:

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

V předchozím příkladu je zástupný symbol {BLAZOR SCRIPT} cestou ke skriptu a názvem souboru Blazor. Viz umístění skriptu v ASP.NET Core Blazor struktuře projektu.

Poznámka

Aby knihovna automaticky provedla další úlohy po spuštění Blazor, použijte inicializátor JavaScriptu. Použití inicializátoru JS nevyžaduje, aby uživatel knihovny řetězil volání JS k ručnímu spuštění Blazor.

Načíst klientské zdrojové soubory pro zavádění systému

Když se aplikace načte v prohlížeči, stáhne bootovací zdroje ze serveru.

• JavaScriptový kód pro spuštění aplikace
• .NET běhové prostředí a sestavení
• Údaje specifické pro místní nastavení

Přizpůsobte způsob, jakým jsou tyto zaváděcí prostředky načítány pomocí API loadBootResource. Funkce loadBootResource přepisuje vestavěný mechanismus načítání zdrojů při spuštění. Použijte loadBootResource pro následující scénáře:

• Načtěte statické zdroje, jako jsou data časových pásem nebo dotnet.wasm, z CDN.
• Načtěte komprimované sestavy pomocí HTTP požadavku a dekomprimujte je na klientovi pro hostitele, kteří nepodporují načítání komprimovaného obsahu ze serveru.
• Přejmenujte zdroje na jiný název přesměrováním každého požadavku fetch na nový název.

Poznámka

Externí zdroje musí vracet požadované hlavičky Cross-Origin Resource Sharing (CORS), aby prohlížeče umožnily načítání zdrojů z různých domén. CDNy obvykle poskytují potřebné hlavičky.

loadBootResource parametry se objevují v následující tabulce.

Parametr	Popis
type	Typ prostředku. Mezi přípustné typy patří: assembly, pdb, dotnetjs, dotnetwasma timezonedata. Pro vlastní chování stačí zadat pouze typy. Typy, které nejsou přímo specifikovány v loadBootResource, jsou načteny rámcem podle jejich výchozího způsobu načítání. Spouštěcí prostředek dotnetjs (dotnet.*.js) musí buď vrátit null pro výchozí chování načítání, nebo URI pro zdroj spouštěcího prostředku dotnetjs.
name	Název zdroje.
defaultUri	Relativní nebo absolutní identifikátor URI prostředku.
integrity	Řetězec integrity představující očekávaný obsah v odpovědi.

Funkce loadBootResource může vrátit řetězec identifikátoru URI, který přepíše proces načítání. V následujícím příkladu se z bin/Release/{TARGET FRAMEWORK}/wwwroot/_framework CDN servírují následující soubory z https://cdn.example.com/blazorwebassembly/{VERSION}/:

• dotnet.*.js
• dotnet.wasm
• Data časového pásma

Zástupný symbol {TARGET FRAMEWORK} představuje moniker cílového rámce (například net7.0). Zástupný symbol {VERSION} je verze sdíleného rámce (například 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>

Samostatné 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>

V předchozím příkladu je zástupný symbol {BLAZOR SCRIPT} cestou ke skriptu a názvem souboru Blazor. Viz umístění skriptu v ASP.NET Core Blazor struktuře projektu.

Pro přizpůsobení nejenom URL pro spouštěcí zdroje může funkce loadBootResource zavolat fetch přímo a vrátit výsledek. Následující příklad přidává vlastní HTTP hlavičku k odchozím požadavkům. Pro zachování výchozího chování kontroly integrity použijte parametr 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>

Samostatné 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>

V předchozím příkladu je zástupný symbol {BLAZOR SCRIPT} cestou ke skriptu a názvem souboru Blazor. Viz umístění skriptu v ASP.NET Core Blazor struktuře projektu.

Když funkce loadBootResource vrátí null, Blazor použije výchozí chování pro načítání prostředku. Například předchozí kód vrací null pro dotnetjs zdroj bootování (dotnet.*.js), protože dotnetjs zdroj bootování musí buď vrátit null pro výchozí chování načítání, nebo URI pro zdroj dotnetjs zdroje bootování.

Funkce loadBootResource může také vrátit slib Response. Příklad naleznete v Host and deploy ASP.NET Core Blazor WebAssembly.

Další informace najdete v tématu ASP.NET Core Blazor WebAssembly selhání ukládání do mezipaměti a kontrol integrity.

Ovládací hlavičky v kódu C#

Ovládejte hlavičky při spuštění v C# kódu pomocí následujících přístupů.

V následujících příkladech je na aplikaci aplikována Zásada pro zabezpečení obsahu (CSP) prostřednictvím CSP záhlaví. Zástupný symbol {POLICY STRING} je řetězec zásad CSP. Pro více informací o CSPs viz Enforce a Content Security Policy for ASP.NET Core Blazor.

Poznámka

Hlavičky nelze nastavit po spuštění odpovědi. Přístupy v této části pouze nastavují hlavičky před zahájením odpovědi, takže zde popsané přístupy jsou bezpečné. Další informace najdete v tématu IHttpContextAccessor/HttpContext v aplikacích ASP.NET CoreBlazor.

Server-side a předem vykreslené klientské scénáře

Použijte ASP.NET Core Middleware pro ovládání kolekce hlaviček.

V souboru Program:

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

Předchozí příklad používá vložené middleware, ale také můžete vytvořit vlastní třídu middleware a volat middleware pomocí rozšiřující metody v souboru Program. Pro více informací viz Write custom ASP.NET Core middleware.

Indikátory načítání na straně klienta

Indikátor načítání ukazuje, že se aplikace načítá normálně a že uživatel by měl počkat, až se načítání dokončí.

Blazor Web App indikátor načítání

Indikátor načítání použitý v Blazor WebAssembly aplikacích není v aplikaci vytvořené ze Blazor Web App šablony projektu. Indikátor načítání obvykle není žádoucí pro interaktivní komponenty WebAssembly, protože Blazor Web App klientské komponenty jsou na serveru předem renderovány pro rychlé počáteční načítání. V situacích ve smíšeném režimu vykreslování musí být architektura nebo vývojářský kód také opatrní, aby nedocházelo k následujícím problémům:

• Zobrazení více indikátorů načítání na stejné vykreslené stránce.
• Neúmyslné zahazování předem renderovaného obsahu během načítání běhového prostředí .NET WebAssembly.

Budoucí verze rozhraní .NET může poskytnout ukazatel načítání na základě architektury. Do té doby můžete přidat vlastní indikátor načítání do Blazor Web App.

Interaktivní vykreslování WebAssembly pro jednotlivé komponenty s předenderingem

Tento scénář se týká interaktivního vykreslování WebAssembly aplikovaného na jednotlivé komponenty (@rendermode InteractiveWebAssembly použité u jednotlivých komponent).

Vytvořte komponentu ContentLoading ve složce Layout aplikace .Client, která volá OperatingSystem.IsBrowser.

• Když je false, zobrazte indikátor načítání.
• Když je true, vykreslete obsah požadované komponenty.

Pokud chcete načíst styly CSS pro indikátor, přidejte styly do <head> obsahu s komponentou HeadContent . Pro více informací viz Ovládání obsahu hlavičky v aplikacích ASP.NET CoreBlazor.

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; }
}

Pokud ve složce projektu Layout ještě nemáte složku .Client, přidejte do souboru Layout obor názvů pro složku _Imports.razor. V následujícím příkladu je obor názvů projektu BlazorSample.Client:

@using BlazorSample.Client.Layout

V komponentě, která používá interaktivní vykreslování WebAssembly, obalte značku komponenty Razor pomocí komponenty ContentLoading. Následující příklad demonstruje přístup s komponentou Counter aplikace vytvořené z projektové šablony 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++;
    }
}

Globální interaktivní vykreslování WebAssembly s předběžným vykreslováním

Tento scénář platí pro globální interaktivní vykreslování WebAssembly s předrenderingem (@rendermode="InteractiveWebAssembly" na komponentách HeadOutlet a Routes v komponentě App).

Vytvořte komponentu ContentLoading ve složce Layout aplikace .Client, která volá RendererInfo.IsInteractive.

• Když je false, zobrazte indikátor načítání.
• Když je true, vykreslete obsah požadované komponenty.

Pokud chcete načíst styly CSS pro indikátor, přidejte styly do <head> obsahu s komponentou HeadContent . Pro více informací viz Ovládání obsahu hlavičky v aplikacích ASP.NET CoreBlazor.

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; }
}

Pokud ve složce projektu Layout ještě nemáte složku .Client, přidejte do souboru Layout obor názvů pro složku _Imports.razor. V následujícím příkladu je obor názvů projektu BlazorSample.Client:

@using BlazorSample.Client.Layout

Zabalte vlastnost MainLayout (Layout/MainLayout.razor) komponentou .Client v komponentě Body (@Body) projektu ContentLoading.

V Layout/MainLayout.razor:

+ <ContentLoading>
    @Body
+ </ContentLoading>

Globální interaktivní vykreslování WebAssembly bez předběžného vykreslování

Tento scénář se vztahuje na globální interaktivní vykreslování WebAssembly bez předběžného vykreslování (@rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" na HeadOutlet komponentách a Routes komponentách komponenty App ).

Přidejte do aplikace inicializátor JavaScriptu . V následujícím příkladu názvu souboru modulu JavaScriptu {ASSEMBLY NAME} zástupný symbol představuje název sestavení projektu serveru (například BlazorSample). Složka wwwroot, ve které je modul umístěn, je složka wwwroot v projektu na straně serveru, nikoli projekt .Client.

Následující příklad používá progress indikátor, který neuvádí skutečný průběh doručování spouštěcích prostředků na straně klienta klientovi, ale slouží jako obecný přístup k dalšímu vývoji, pokud chcete, aby indikátor průběhu zobrazoval skutečný průběh načítání spouštěcích prostředků aplikace.

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();
}

Blazor WebAssembly stav načítání aplikace

Šablona projektu obsahuje škálovatelné vektorové grafiky (SVG) a textové indikátory, které ukazují průběh načítání aplikace.

Ukazatele průběhu jsou implementovány pomocí HTML a CSS, přičemž jsou využity dvě vlastní vlastnosti CSS (proměnné) poskytované Blazor.

• --blazor-load-percentage: Procento načtených souborů aplikace.
• --blazor-load-percentage-text: Procento nahraných souborů aplikace, zaokrouhlené na nejbližší celé číslo.

Pomocí výše uvedených proměnných CSS můžete vytvořit vlastní ukazatele postupu, které odpovídají vzhledu vaší aplikace.

V následujícím příkladu:

• resourcesLoaded je okamžitý počet zdrojů načtených během spouštění aplikace.
• totalResources je celkový počet prostředků k načtení.

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

Výchozí kulatý indikátor průběhu je implementován v HTML ve wwwroot/index.html souboru.

<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>

Chcete-li zkontrolovat značky šablony projektu a stylování pro výchozí indikátory průběhu, podívejte se na referenční zdroj ASP.NET Core.

• wwwroot/index.html
• app.css

Poznámka

Odkazy na dokumentaci k referenčnímu zdroji .NET obvykle načítají výchozí větev úložiště, která představuje aktuální vývoj pro další vydání .NET. Pro výběr značky pro konkrétní vydání použijte rozbalovací seznam Switch branches or tags. Pro více informací vizte Jak vybrat značku verze zdrojového kódu ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Namísto použití výchozího kruhového indikátoru průběhu následující příklad ukazuje, jak implementovat lineární indikátor průběhu.

Přidejte následující styly k 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;
}

Proměnná CSS (var(...)) se používá k předání hodnoty --blazor-load-percentage do vlastnosti scale modrého pseudo-elementu, který indikuje průběh načítání souborů aplikace. Jak se aplikace načítá, --blazor-load-percentage se automaticky aktualizuje, což dynamicky mění vizuální zobrazení ukazatele postupu.

V wwwroot/index.html odeberte výchozí indikátor zaokrouhlení SVG v <div id="app">...</div> a nahraďte ho následujícími značkami:

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

Konfigurace runtime .NET WebAssembly

V pokročilých scénářích programování se funkce configureRuntime s builderem hostitele za běhu dotnet používají ke konfiguraci runtime .NET WebAssembly. Například dotnet.withEnvironmentVariable nastaví proměnnou prostředí, která:

• Konfiguruje prostředí .NET WebAssembly.
• Mění chování knihovny C.

Poznámka

Žádost o dokumentaci je čekající ve dotnet/runtime GitHub repozitáři pro více informací o proměnných prostředí, které konfigurují .NET WebAssembly runtime nebo ovlivňují chování knihoven C. Ačkoli je žádost o dokumentaci stále nevyřízena, ve žádosti jsou k dispozici další informace a odkazy na další zdroje, Otázka/žádost o dokumentaci k proměnným prostředí běhového prostředí .NET WASM (dotnet/runtime #98225).

Funkce configureRuntime může být také použita k umožnění integrace s profilerem prohlížeče.

Pro zástupné symboly v následujících příkladech, které nastavují proměnnou prostředí:

• Zástupný symbol {BLAZOR SCRIPT} je cesta skriptu Blazor a název souboru. Viz umístění skriptu v ASP.NET Core Blazor struktuře projektu.
• Zástupný symbol {NAME} je název proměnné prostředí.
• Zástupný symbol {VALUE} je hodnota proměnné prostředí.

Blazor Web App:

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

Samostatné Blazor WebAssembly:

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

Poznámka

Instanci .NET runtime lze přistupovat prostřednictvím .NET WebAssembly Runtime API (Blazor.runtime). Například konfiguraci sestavení aplikace lze získat pomocí Blazor.runtime.runtimeBuildInfo.buildConfiguration.

Pro více informací o konfiguraci běhového prostředí .NET WebAssembly si prohlédněte TypeScript definici souboru běhového prostředí (dotnet.d.ts) v dotnet/runtime GitHub úložišti.

Poznámka

Odkazy na dokumentaci k referenčnímu zdroji .NET obvykle načítají výchozí větev úložiště, která představuje aktuální vývoj pro další vydání .NET. Pro výběr značky pro konkrétní vydání použijte rozbalovací seznam Switch branches or tags. Pro více informací vizte Jak vybrat značku verze zdrojového kódu ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Zakázat rozšířené navigační a formulářové zpracování

Tato sekce se vztahuje na Blazor Web Apps.

Chcete-li vypnout vylepšenou navigaci a zpracování formulářů, nastavte disableDomPreservation na true pro Blazor.start:

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

V předchozím příkladu je zástupný symbol {BLAZOR SCRIPT} cestou ke skriptu a názvem souboru Blazor. Viz umístění skriptu v ASP.NET Core Blazor struktuře projektu.

Další zdroje

• Prostředí: Nastavte prostředí aplikace
• SignalR (zahrnuje sekce o SignalR konfiguraci spouštění)
• Globalizace a lokalizace: Staticky nastavte kulturu pomocí Blazor.start() (pouze na straně klienta)
• Blazor WebAssembly komprese