Spuštění ASP.NET Core Blazor

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

• web pro Blazor Web App
• 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

Blazor Web App:

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

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 Blazor Web App začátkem. 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.

<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 Web App spuštění jejich připojením k in <head> 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í 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 .

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 v ASP.NET Core Blazor Web App
• 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)

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.

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:

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:

V souboru Program:

In Startup.Configure of Startup.cs:

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

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 Web App Průběh načítání

Indikátor průběhu načítání použitý v Blazor WebAssembly aplikacích není v aplikaci vytvořené ze Blazor Web App šablony projektu. Indikátor průběhu načítání obvykle není žádoucí pro interaktivní komponenty WebAssembly, protože Blazor Web Apppředem připravené komponenty na straně klienta na serveru 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
• Nechtěně zahodíte předem uspořádaný obsah při načítání modulu runtime .NET 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 ukazatele průběhu načítání přidat vlastní indikátor Blazor Web Appprů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.142 * 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 Web App šablony projektu.

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:

• wwwroot/index.html
• app.css

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-percentage scale 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.

Zástupné symboly v následujících příkladech, které nastavují 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 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>

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

Tato část se týká Blazor Web Apps.

Chcete-li zakázat vylepšenou navigaci a zpracování formulářů, nastavte disableDomPreservation hodnotu true pro 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.