Spuštění ASP.NET Core Blazor

Článek
03/05/2024

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

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

Obecné pokyny k ASP.NET konfiguraci aplikace Core pro vývoj na straně serveru najdete v tématu Konfigurace v ASP.NET Core.

Proces spuštění a konfigurace

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

web pro webovou Blazor aplikaci
serverBlazor Server pro aplikaci
webassemblyBlazor WebAssembly pro aplikaci

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

serverBlazor Server pro aplikaci
webassemblyBlazor WebAssembly pro aplikaci

Umístění skriptu najdete v tématu ASP.NET Blazor Základní struktura projektu.

Ruční spuštění Blazor:

Blazor Webová aplikace:

autostart="false" Přidejte do značky Blazor<script> atribut a hodnotu.
Umístěte skript, který volá Blazor.start() za Blazor<script> značku a uvnitř uzavírací </body> značky.
Do vlastnosti umístěte možnosti ssr statického vykreslování na straně serveru (static SSR).
Umístěte serverovou stranu Blazor–SignalR možnosti okruhu circuit do vlastnosti.
Umístěte možnosti WebAssembly na straně klienta do webAssembly vlastnosti.

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

Blazor WebAssembly Samostatné aBlazor Server:

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

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

V předchozím příkladu {BLAZOR SCRIPT} je Blazor zástupný symbol cesta ke skriptu a název souboru. Umístění skriptu najdete v tématu ASP.NET Blazor Základní struktura projektu.

Inicializátory JavaScriptu

Inicializátory JavaScriptu (JS) spouští logiku před načtením aplikace Blazor a po jejím načtení. Inicializátory JS jsou užitečné v následujících scénářích:

Přizpůsobení způsobu načítání aplikace Blazor
Inicializace knihoven, než se spustí Blazor
Konfigurace nastavení pro Blazor

JS Inicializátory se detekují jako součást procesu sestavení a importují se automaticky. Použití inicializátorů JS často eliminuje potřebu ručně aktivovat funkce skriptu z aplikace při použití knihoven tříd Razor (RCL).

Pokud chcete definovat inicializátor JS, přidejte do projektu modul JS s názvem {NAME}.lib.module.js, kde zástupný symbol {NAME} je název sestavení, název knihovny nebo identifikátor balíčku. Umístěte tento soubor do webového kořenového adresáře projektu, což je obvykle složka wwwroot.

Pro Blazor Web Apps:

beforeWebStart(options): Volá se před spuštěním Blazor webové aplikace. Slouží například beforeWebStart k přizpůsobení procesu načítání, úrovně protokolování a dalších možností. Blazor Přijme webové možnosti (options).
afterWebStarted(blazor): Volal po všech beforeWebStart slibech vyřešit. Můžete například afterWebStarted použít k registraci Blazor naslouchacích procesů událostí a vlastních typů událostí. Instance Blazor se předá afterWebStarted jako argument (blazor).
beforeServerStart(options, extensions): Volá se před spuštěním prvního modulu runtime serveru. SignalR Přijímá možnosti spuštění okruhu (options) a všechna rozšíření (extensions) přidaná během publikování.
afterServerStarted(blazor): Volá se po spuštění prvního modulu runtime interaktivního serveru.
beforeWebAssemblyStart(options, extensions): Volá se před spuštěním modulu runtime Interactive WebAssembly. Blazor Obdrží možnosti (options) a všechna rozšíření (extensions) přidaná během publikování. Možnosti mohou například určit použití vlastního spouštěcího zavaděče prostředků.
afterWebAssemblyStarted(blazor): Volá se po spuštění interaktivního modulu runtime WebAssembly.

Poznámka:

Starší JS inicializátory (beforeStart, afterStarted) se ve výchozím nastavení ve Blazor webové aplikaci nevyvolávají. Pomocí této možnosti můžete povolit spouštění enableClassicInitializers starších inicializátorů. Spouštění starší verze inicializátoru je však nepředvídatelné.

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

Pro Blazor Serveraplikace a Blazor WebAssemblyBlazor Hybrid aplikace:

beforeStart(options, extensions): Volá se před spuštěním architektury Blazor. Příklad: beforeStart k slouží přizpůsobení procesu načítání, úrovně protokolování a dalších možností specifických pro model hostování.
- Na straně beforeStart klienta obdrží Blazor možnosti (options) a všechna rozšíření (extensions) přidaná během publikování. Možnosti mohou například určit použití vlastního spouštěcího zavaděče prostředků.
- Na straně beforeStart serveru přijímá možnosti spuštění okruhu SignalR (options).
- V parametru a BlazorWebViewnejsou předány žádné možnosti.
afterStarted(blazor): Volá se, když je Blazor připravený přijímat volání z JS. Příklad: afterStarted slouží k inicializaci knihoven tím, že provádí volání zprostředkovatele komunikace JS a registraci vlastních elementů. Instance Blazor se předá afterStarted jako argument (blazor).

Další zpětná volání modulu runtime .NET WebAssembly:

onRuntimeConfigLoaded(config): Volá se při stažení konfigurace spouštění. Umožňuje aplikaci upravit parametry (konfigurace) před spuštěním modulu 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á se po spuštění modulu runtime .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();
}

Obě zpětná volání mohou vrátit Promisea příslib je očekáván před pokračováním spuštění.

Název souboru:

JS Pokud jsou inicializátory spotřebovány jako statický prostředek v projektu, použijte formát {ASSEMBLY NAME}.lib.module.js, kde {ASSEMBLY NAME} zástupný symbol je název sestavení aplikace. Například u projektu s názvem sestavení BlazorSample pojmenujte tento soubor BlazorSample.lib.module.js. Umístěte soubor do složky wwwroot aplikace.
JS Pokud jsou inicializátory spotřebovány z seznamu RCL, použijte formát {LIBRARY NAME/PACKAGE ID}.lib.module.js, kde {LIBRARY NAME/PACKAGE ID} zástupný symbol je název knihovny projektu nebo identifikátor balíčku. Například u knihovny RCL s identifikátorem balíčku RazorClassLibrary1 pojmenujte tento soubor RazorClassLibrary1.lib.module.js. Umístěte soubor do složky wwwroot knihovny.

Pro Blazor Web Apps:

Následující příklad ukazuje JS inicializátory, které načítají vlastní skripty před a po Blazor spuštění webové aplikace jejich připojením k in beforeWebStart a <head>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í beforeWebStart příklad zaručuje, že se vlastní skript načte před Blazor spuštěním. Nezaručuje, že očekávané přísliby ve skriptu se před spuštěním dokončí Blazor .

Pro Blazor Serveraplikace a Blazor WebAssemblyBlazor Hybrid aplikace:

Následující příklad ukazuje JS inicializátory, které načítají vlastní skripty před a po Blazor spuštění jejich připojením k in <head>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í beforeStart příklad zaručuje, že se vlastní skript načte před Blazor spuštěním. Nezaručuje, že očekávané přísliby ve skriptu se před spuštěním dokončí Blazor .

Poznámka:

Aplikace MVC a Razor Pages automaticky nenačítají inicializátory JS. Kód vývojáře ale může obsahovat skript pro načtení manifestu aplikace a aktivaci načtení inicializátorů JS.

Příklady JS inicializátorů najdete v následujících zdrojích informací:

ASP.NET Core Blazor JavaScript se statickým vykreslováním na straně serveru (statické SSR)
Použití Razor komponent v javascriptových aplikacích a architekturách SPA (quoteContainer2 příklad)
zpracování událostí ASP.NET Core Blazor (příklad události vložení vlastní schránky)
Povolení generování kódu QR pro ověřovací aplikace TOTP ve webové aplikaci ASP.NET Core Blazor
Základní testovací aplikace v úložišti ASP.NET Core na GitHubu (BasicTestApp.lib.module.js)

Použití Razor komponent v javascriptových aplikacích a architekturách SPA (quoteContainer2 příklad)
zpracování událostí ASP.NET Core Blazor (příklad události vložení vlastní schránky)
Rozložení nasazení pro hostované Blazor WebAssembly aplikace ASP.NET Core
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 příští verzi .NET. Pokud chcete vybrat značku pro konkrétní verzi, použijte rozevírací seznam pro přepnutí větví nebo značek. Další informace najdete v tématu Jak vybrat značku verze zdrojového kódu ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Ujistěte se, že jsou knihovny načtené v určitém pořadí.

Připojte vlastní skripty k objektu <head> in beforeStart a afterStarted v pořadí, v jakém by se měly načíst.

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

Import dalších modulů

K importu JS dalších modulů použijte příkazy nejvyšší úrovně import v souboru inicializátorů.

additionalModule.js:

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

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

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

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

  logMessage();
}

Importovat mapu

Mapy importu podporují ASP.NET Core a Blazor.

Inicializace 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 {BLAZOR SCRIPT} je Blazor zástupný symbol cesta ke skriptu a název souboru. Umístění skriptu najdete v tématu ASP.NET Blazor Základní struktura projektu.

Zřetězte ho `Promise` z ručního spuštění.

Pokud chcete provést další úlohy, jako JS je inicializace zprostředkovatele komunikace, použijte then řetězení výsledků Promise ruční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 {BLAZOR SCRIPT} je Blazor zástupný symbol cesta ke skriptu a název souboru. Umístění skriptu najdete v tématu ASP.NET Blazor Základní struktura projektu.

Poznámka:

Aby knihovna po spuštění automaticky spustila další úlohyBlazor, použijte inicializátor JavaScriptu. JS Použití inicializátoru nevyžaduje, aby příjemce knihovny zřetězil JS volání na Blazorruční spuštění.

Načtení spouštěcích prostředků na straně klienta

Když se aplikace načte v prohlížeči, aplikace stáhne spouštěcí prostředky ze serveru:

JavaScriptový kód pro spuštění aplikace
Modul runtime a sestavení .NET
Data specifická pro národní prostředí

Přizpůsobte, jak se tyto spouštěcí prostředky načítají pomocí loadBootResource rozhraní API. Funkce loadBootResource přepíše integrovaný mechanismus načítání spouštěcích prostředků. Použijte loadBootResource pro následující scénáře:

Načtěte statické prostředky, jako jsou data časového pásma nebo dotnet.wasm, z CDN.
Načtěte komprimovaná sestavení pomocí požadavku HTTP a dekomprimujte je v klientovi pro hostitele, kteří nepodporují načítání komprimovaného obsahu ze serveru.
Alias resources to a different name by redirecting each fetch request to a new name.

Poznámka:

Externí zdroje musí vracet požadovaná hlavičky SDÍLENÍ prostředků mezi zdroji (CORS), aby prohlížeče umožňovaly načítání prostředků mezi zdroji. Sítě CDN obvykle ve výchozím nastavení poskytují požadované hlavičky.

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

Parametr	Popis
`type`	Typ prostředku. Mezi přípustné typy patří: `assembly`, `pdb`, `dotnetjs`, `dotnetwasm`a `timezonedata`. Pro vlastní chování stačí zadat pouze typy. Typy, které nejsou zadány, jsou `loadBootResource` načteny architekturou podle jejich výchozího chování načítání. Spouštěcí `dotnetjs` prostředek (`dotnet.*.js`) musí buď vrátit `null` výchozí chování načítání, nebo identifikátor URI pro zdroj spouštěcího `dotnetjs` prostředku.
`name`	Název prostředku.
`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 https://cdn.example.com/blazorwebassembly/{VERSION}/obsluhují následující soubory:

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

Zástupný {TARGET FRAMEWORK} symbol je moniker cílové architektury (například net7.0). Zástupný {VERSION} symbol je verze sdílené architektury (například 7.0.0).

Blazor Webová aplikace:

<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 {BLAZOR SCRIPT} je Blazor zástupný symbol cesta ke skriptu a název souboru. Umístění skriptu najdete v tématu ASP.NET Blazor Základní struktura projektu.

Pokud chcete přizpůsobit více než jen adresy URL pro spouštěcí prostředky, loadBootResource může funkce volat fetch přímo a vrátit výsledek. Následující příklad přidá vlastní hlavičku HTTP do odchozích požadavků. Pokud chcete zachovat výchozí chování kontroly integrity, předejte integrity parametr.

Blazor Webová aplikace:

<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 {BLAZOR SCRIPT} je Blazor zástupný symbol cesta ke skriptu a název souboru. Umístění skriptu najdete v tématu ASP.NET Blazor Základní struktura projektu.

loadBootResource Když funkce vrátínull, Blazor použije výchozí chování při načítání prostředku. Například předchozí kód se vrátí null pro dotnetjs spouštěcí prostředek (dotnet.*.js), protože dotnetjs spouštěcí prostředek musí buď vrátit null výchozí chování načítání, nebo identifikátor URI pro zdroj spouštěcího dotnetjs prostředku.

Funkce loadBootResource může také vrátit Response příslib. Příklad najdete v tématu Hostitel a nasazení ASP.NET Core Blazor WebAssembly.

Další informace najdete v tématu ASP.NET Modulu runtime .NET Core Blazor WebAssembly a ukládání do mezipaměti sady aplikací.

Záhlaví ovládacích prvků v kódu jazyka C#

Pomocí následujících přístupů můžete řídit hlavičky při spuštění v kódu jazyka C#.

V následujících příkladech se zásady zabezpečení obsahu (CSP) aplikují na aplikaci prostřednictvím hlavičky CSP. Zástupný {POLICY STRING} symbol je řetězec zásad CSP.

Scénáře na straně serveru a předem připraveného klienta

K řízení kolekce hlaviček použijte middleware ASP.NET Core.

V souboru Program:

In Startup.Configure of Startup.cs:

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 můžete také vytvořit vlastní middlewarovou třídu a volat middleware s rozšiřující metodou v Program souboru. Další informace najdete v tématu Psaní vlastního middlewaru ASP.NET Core.

Vývoj na straně klienta bez předkreslování

Předejte StaticFileOptions to MapFallbackToFile , které určuje hlavičky odpovědi ve OnPrepareResponse fázi.

V souboru na straně Program serveru:

In Startup.Configure of Startup.cs:

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

...

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

Další informace o CSP naleznete v tématu Vynucení zásad zabezpečení obsahu pro ASP.NET Core Blazor.

Indikátory průběhu načítání na straně klienta

Indikátor průběhu načítání ukazuje průběh načítání aplikace uživatelům, který označuje, že se aplikace načítá normálně a že by uživatel měl počkat, než se načítání dokončí.

Blazor Průběh načítání webové aplikace

Indikátor průběhu načítání použitý v Blazor WebAssembly aplikacích není v aplikaci vytvořené ze Blazor šablony projektu webové aplikace. Indikátor průběhu načítání obvykle není žádoucí pro interaktivní komponenty WebAssembly, protože Blazor komponenty webové aplikace jsou na serveru předem připravené 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ě zahodíte předem vyřazený obsah při načítání modulu runtime WebAssembly.

Budoucí verze .NET může poskytnout indikátor průběhu načítání založeného na rozhraní. Do té doby můžete do webové aplikace přidat vlastní indikátor Blazor průběhu načítání.

Vytvořte v aplikaci komponentu LoadingProgress.Client , která volá OperatingSystem.IsBrowser:

Po falsezobrazení indikátoru průběhu načítání během Blazor stahování sady a před aktivací Blazor modulu runtime v klientovi.
Když truevykreslíte obsah požadované komponenty.

Následující ukázka používá indikátor průběhu načítání nalezený v aplikacích vytvořených ze Blazor WebAssembly šablony, včetně změny stylů, které šablona poskytuje. Styly se načtou do obsahu aplikace <head> komponentou HeadContent . Další informace najdete v tématu Řízení hlavního obsahu v aplikacích ASP.NET CoreBlazor.

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

V komponentě, která přijímá interaktivní vykreslování WebAssembly, zabalte kód komponenty Razor do LoadingProgress komponenty. Následující příklad ukazuje přístup s Counter komponentou aplikace vytvořené ze Blazor šablony projektu webové aplikace.

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 průběh načítání aplikace

Šablona projektu obsahuje formát SVG (Scalable Vector Graphics) a indikátory textu, které ukazují průběh načítání aplikace.

Indikátory průběhu jsou implementovány s HTML a CSS pomocí dvou vlastních vlastností CSS (proměnných), které Blazorposkytuje:

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

Pomocí předchozích proměnných CSS můžete vytvořit vlastní indikátory průběhu, které odpovídají stylu vaší aplikace.

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

resourcesLoaded je okamžitý počet prostředků načtených během spouštění aplikace.
totalResources je celkový počet prostředků, které se mají načíst.

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í indikátor průběhu zaokrouhlení se implementuje v HTML v 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>

Pokud chcete zkontrolovat značky šablony projektu a styly výchozích indikátorů průběhu, přečtěte si referenční zdroj ASP.NET Core:

Poznámka:

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

Přidejte následující styly: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-percentagescale vlastnosti modré pseudo-elementu, který označuje průběh načítání souborů aplikace. Při načítání --blazor-load-percentage aplikace se aktualizuje automaticky, což dynamicky mění vizuální znázornění indikátoru průběhu.

Odeberte wwwroot/index.htmlvýchozí indikátor <div id="app">...</div> zaokrouhlení SVG a nahraďte ho následujícím kódem:

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

Konfigurace modulu runtime .NET WebAssembly

V pokročilých programovacích scénářích configureRuntime se funkce s dotnet tvůrcem hostitele modulu runtime používá ke konfiguraci modulu runtime WebAssembly runtime .NET. Například nastaví proměnnou prostředí, dotnet.withEnvironmentVariable která:

Nakonfiguruje modul runtime .NET WebAssembly.
Změní chování knihovny jazyka C.

Funkci configureRuntime lze také použít k povolení integrace s profilerem prohlížeče.

V následujících příkladech, které nastavily proměnnou prostředí:

Zástupný {BLAZOR SCRIPT} symbol je Blazor cesta ke skriptu a název souboru. Umístění skriptu najdete v tématu ASP.NET Blazor Základní struktura projektu.
Zástupný {NAME} symbol je název proměnné prostředí.
Zástupný {VALUE} symbol je hodnota proměnné prostředí.

Blazor Webová aplikace:

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

K instanci modulu runtime .NET je možné přistupovat pomocí Blazor WebAssembly rozhraní API modulu runtime (Blazor.runtime). Například konfiguraci sestavení aplikace lze získat pomocí Blazor.runtime.runtimeBuildInfo.buildConfiguration.

Další informace o konfiguraci modulu runtime .NET WebAssembly najdete v definičním souboru TypeScript modulu runtime (dotnet.d.ts) v dotnet/runtime úložišti GitHub.

Poznámka:

Tato část platí pro Blazor Web Apps.

Chcete-li zakázat vylepšenou navigaci a zpracování formulářů, nastavte hodnotu disableDomPreservationtrue for Blazor.start.

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

V předchozím příkladu {BLAZOR SCRIPT} je Blazor zástupný symbol cesta ke skriptu a název souboru. Umístění skriptu najdete v tématu ASP.NET Blazor Základní struktura projektu.

Sdílet prostřednictvím

Spuštění ASP.NET Core Blazor

Proces spuštění a konfigurace

Inicializátory JavaScriptu

Ujistěte se, že jsou knihovny načtené v určitém pořadí.

Import dalších modulů

Importovat mapu

Inicializace Blazor , když je dokument připravený

Zřetězte ho `Promise` z ručního spuštění.

Načtení spouštěcích prostředků na straně klienta

Záhlaví ovládacích prvků v kódu jazyka C#

Scénáře na straně serveru a předem připraveného klienta

Vývoj na straně klienta bez předkreslování

Indikátory průběhu načítání na straně klienta

Blazor Průběh načítání webové aplikace

Blazor WebAssembly průběh načítání aplikace

Konfigurace modulu runtime .NET WebAssembly

Zakázání rozšířené navigace a zpracování formulářů

Další materiály

Váš názor

Další materiály

Sdílet prostřednictvím

Spuštění ASP.NET Core Blazor

Proces spuštění a konfigurace

Inicializátory JavaScriptu

Ujistěte se, že jsou knihovny načtené v určitém pořadí.

Import dalších modulů

Importovat mapu

Inicializace Blazor , když je dokument připravený

Zřetězte ho Promise z ručního spuštění.

Načtení spouštěcích prostředků na straně klienta

Záhlaví ovládacích prvků v kódu jazyka C#

Scénáře na straně serveru a předem připraveného klienta

Vývoj na straně klienta bez předkreslování

Indikátory průběhu načítání na straně klienta

Blazor Průběh načítání webové aplikace

Blazor WebAssembly průběh načítání aplikace

Konfigurace modulu runtime .NET WebAssembly

Zakázání rozšířené navigace a zpracování formulářů

Další materiály

Váš názor

Další materiály

Zřetězte ho `Promise` z ručního spuštění.