ASP.NET Core Blazor opstarten

Het Blazor opstartproces is automatisch en asynchroon via het Blazor script (blazor.*.js), waarbij de * plaatsaanduiding is:

• web voor een Blazor Web App
• server voor een Blazor Server app
• webassembly voor een Blazor WebAssembly app

Het Blazor opstartproces is automatisch en asynchroon via het Blazor script (blazor.*.js), waarbij de * plaatsaanduiding is:

• server voor een Blazor Server app
• webassembly voor een Blazor WebAssembly app

Blazor Web App:

• Voeg een autostart="false" kenmerk en waarde toe aan de Blazor<script> tag.
• Plaats een script dat Blazor.start() aanroept achter de Blazor<script>-tag en binnen de afsluitende </body>-tag.
• Plaats statische SSR-opties (rendering aan de serverzijde) in de ssr eigenschap.
• Plaats server-side Blazor-SignalR circuit opties in de circuit eigenschap.
• Plaats WebAssembly-opties aan de clientzijde in de webAssembly eigenschap.

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

Zelfstandig Blazor WebAssembly en Blazor Server:

JavaScript-initialisaties

JavaScript-initializersJS voeren logica uit voor en na het laden van een Blazor app. JS initializers zijn handig in de volgende scenario's:

• Aanpassen hoe een Blazor app wordt geladen.
• Bibliotheken initialiseren voordat Blazor wordt gestart.
• Blazor Instellingen configureren.

JS initializers worden gedetecteerd als onderdeel van het buildproces en automatisch geïmporteerd. Het gebruik van initialisatiefuncties verwijdert vaak de noodzaak om JS bij het gebruik van Razor klassebibliotheken (RCL's).

Als u een JS initialisatiefunctie wilt definiëren, voegt u een JS module toe aan het project met de naam {NAME}.lib.module.js, waarbij de {NAME} tijdelijke aanduiding de assemblynaam, bibliotheeknaam of pakket-id is. Plaats het bestand in de webhoofdmap van het project. Dit is meestal de wwwroot map.

Voor Blazor Web Appen:

• beforeWebStart(options): Geroepen voordat de Blazor Web App start. Wordt bijvoorbeeld beforeWebStart gebruikt om het laadproces, het logboekregistratieniveau en andere opties aan te passen. U ontvangt hiermee de Blazor webopties (options).
• afterWebStarted(blazor): Gebeld nadat alle beforeWebStart beloftes zijn opgelost. afterWebStarted kan bijvoorbeeld worden gebruikt om gebeurtenislisteners en aangepaste gebeurtenistypen te registreren Blazor. Het Blazor exemplaar wordt aan afterWebStarted doorgegeven als een argument (blazor).
• beforeServerStart(options, extensions): Aangeroepen voordat de eerste serverruntime wordt gestart. SignalR Ontvangt startopties voor het circuit (options) en eventuele extensies (extensions) die tijdens het publiceren zijn toegevoegd.
• afterServerStarted(blazor): Aangeroepen nadat de eerste Interactive Server-runtime is gestart.
• beforeWebAssemblyStart(options, extensions): Aangeroepen voordat de Interactive WebAssembly-runtime wordt gestart. Ontvangt de opties (Blazor) en eventuele extensies (options) die tijdens het extensions publiceren zijn toegevoegd. Met opties kunt u bijvoorbeeld het gebruik van een aangepast opstartresourcelaadprogramma opgeven.
• afterWebAssemblyStarted(blazor): Aangeroepen nadat de Interactive WebAssembly-runtime is gestart.

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

Vanwege een frameworkfout in .NET 8 en 9 (dotnet/aspnetcore #54049) moet het Blazor script handmatig worden gestart wanneer beforeWebAssemblyStart(options, extensions) of afterWebAssemblyStarted(blazor) worden aangeroepen. Als de server-app nog niet handmatig is gestart met een WebAssembly(Blazor)-configuratie, update dan de webAssembly: {...} component in het serverproject als volgt.

In Components/App.razor, verwijder de bestaande Blazor<script> tag.

- <script src="_framework/blazor.web.js"></script>

Vervang de <script> tag door de volgende opmaak die handmatig begint met Blazor, samen met een WebAssembly-configuratie (webAssembly: {...}):

<script src="_framework/blazor.web.js" autostart="false"></script>
<script>
    Blazor.start({
        webAssembly: {}
    });
</script>

Voor Blazor Server, Blazor WebAssemblyen Blazor Hybrid apps:

• beforeStart(options, extensions): Gebeld voordat Blazor begint. Wordt bijvoorbeeld beforeStart gebruikt voor het aanpassen van het laadproces, het logboekregistratieniveau en andere opties die specifiek zijn voor het hostingmodel.
  • Aan de clientzijde ontvangt beforeStart de Blazor opties (options) en eventuele extensies (extensions) die tijdens publiceren zijn toegevoegd. Met opties kunt u bijvoorbeeld het gebruik van een aangepast opstartresourcelaadprogramma opgeven.
  • Aan de serverzijde ontvangt beforeStart startopties voor het circuit SignalR (options).
  • Er worden geen opties doorgegeven in een BlazorWebView.
• afterStarted(blazor): Gebeld nadat Blazor is gereed om oproepen te ontvangen van JS. Wordt bijvoorbeeld afterStarted gebruikt om bibliotheken te initialiseren door interop-aanroepen te maken JS en aangepaste elementen te registreren. Het Blazor exemplaar wordt aan afterStarted doorgegeven als een argument (blazor).

Aanvullende callbacks voor .NET WebAssembly Runtime:

• onRuntimeConfigLoaded(config): Wordt aangeroepen wanneer de opstartconfiguratie wordt gedownload. Hiermee kan de app parameters (configuratie) wijzigen voordat de runtime wordt gestart (de parameter is MonoConfig afkomstig van 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 }): Aangeroepen nadat de .NET WebAssembly-runtime is gestart (de parameter is RuntimeAPI afkomstig van 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();
  }
  

Beide callbacks kunnen een Promise retourneren, en er wordt op de belofte gewacht voordat het opstarten doorgaat.

Voor de bestandsnaam:

• Als de JS initializers worden ingezet als een statisch asset in het project, gebruikt u het formaat {ASSEMBLY NAME}.lib.module.js, waarbij de tijdelijke aanduiding {ASSEMBLY NAME} de assemblynaam van de app vertegenwoordigt. Geef bijvoorbeeld het bestand BlazorSample.lib.module.js een naam voor een project met een assemblynaam van BlazorSample. Plaats het bestand in de map van wwwroot de app.
• Als de JS initialisatieprogramma's worden gebruikt vanuit een RCL, gebruikt u de indeling {LIBRARY NAME/PACKAGE ID}.lib.module.js, waarbij de tijdelijke aanduiding de {LIBRARY NAME/PACKAGE ID} bibliotheeknaam of pakket-id van het project is (<PackageId> waarde in het projectbestand van de bibliotheek). Geef bijvoorbeeld het bestand RazorClassLibrary1.lib.module.js een naam voor een RCL met een pakket-id van RazorClassLibrary1. Plaats het bestand in de map van wwwroot de bibliotheek.

Voor Blazor Web Appen:

In het volgende voorbeeld worden JS initializers getoond die aangepaste scripts laden voor en nadat de Blazor Web App is gestart door deze toe te voegen aan de <head> in beforeWebStart en 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);
}

In het voorgaande beforeWebStart voorbeeld wordt alleen gegarandeerd dat het aangepaste script wordt geladen voordat Blazor het wordt gestart. Het garandeert niet dat beloften die op vervulling wachten in het script zijn afgerond voordat Blazor start.

Voor Blazor Server, Blazor WebAssemblyen Blazor Hybrid apps:

In het volgende voorbeeld worden initializers getoond die aangepaste scripts laden voor en nadat JS is gestart door ze toe te voegen aan de Blazor in <head> en beforeStart.

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

In het voorgaande beforeStart voorbeeld wordt alleen gegarandeerd dat het aangepaste script wordt geladen voordat Blazor het wordt gestart. Het garandeert niet dat beloften die op vervulling wachten in het script zijn afgerond voordat Blazor start.

Zie de volgende resources voor voorbeelden van JS initialisaties:

• Blazor Web App laadindicator (voorbeeld van globale interactieve WebAssembly-weergave zonder vooraf renderen)
• ASP.NET Core Blazor JavaScript met statische server-side rendering (SSR)
• Gebruik Razor componenten in JavaScript-apps en SPA-frameworks (quoteContainer2 voorbeeld)
• ASP.NET Core-evenementafhandeling Blazor (voorbeeld van aangepast klembord-plakevenement)
• Schakel het genereren van QR-codes in voor TOTP-authenticator-apps in een ASP.NET Core.
• Eenvoudige test-app in de gitHub-opslagplaats van ASP.NET Core (BasicTestApp.lib.module.js)

• Gebruik Razor componenten in JavaScript-apps en SPA-frameworks (quoteContainer2 voorbeeld)
• ASP.NET Core-evenementafhandeling Blazor (voorbeeld van aangepast klembord-plakevenement)
• Implementatie-indeling voor ASP.NET Core gehoste Blazor WebAssembly apps
• Eenvoudige test-app in de gitHub-opslagplaats van ASP.NET Core (BasicTestApp.lib.module.js)

Controleren of bibliotheken in een specifieke volgorde worden geladen

Voeg aangepaste scripts toe aan de <head> in beforeStart - en afterStarted in de volgorde waarin ze moeten worden geladen.

In het volgende voorbeeld wordt `script1.js` vóór `script2.js` geladen en `script3.js` vóór `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);
}

Aanvullende modules importeren

Gebruik instructies op het hoogste niveau import in het JS initialisatiebestand om extra modules te importeren.

additionalModule.js:

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

In het JS initialisatiebestand (.lib.module.js):

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

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

  logMessage();
}

Kaart importeren

Importkaarten worden ondersteund door ASP.NET Core en 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>

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

Zelfstandige Blazor WebAssembly:

In het bestand Program:

In Startup.Configure van Startup.cs:

Ontwikkeling aan clientzijde zonder prerendering

Geef StaticFileOptions aan MapFallbackToFile die antwoordheaders specificeert in de OnPrepareResponse fase.

In het server-side bestand Program :

In Startup.Configure van Startup.cs:

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

...

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

Indicatoren voor laden aan klantzijde

Een laadindicator geeft aan dat de app normaal wordt geladen en dat de gebruiker moet wachten totdat het laden is voltooid.

Blazor Web App laadindicator

De laadindicator die wordt gebruikt in Blazor WebAssembly apps, is niet aanwezig in een app die is gemaakt op basis van de Blazor Web App projectsjabloon. Normaal gesproken is een laadindicator niet wenselijk voor interactieve WebAssembly-onderdelen, omdat Blazor Web App client-side componenten op de server prerendert voor snelle initiële laadtijden. Voor situaties met gemengde render-modus moet het framework of de code voor ontwikkelaars ook voorzichtig zijn om de volgende problemen te voorkomen:

• Meerdere laadindicatoren weergeven op dezelfde weergegeven pagina.
• Onbedoeld verwijderen van vooraf samengestelde inhoud terwijl de .NET WebAssembly-runtime wordt geladen.

Een toekomstige release van .NET kan een op framework gebaseerde laadindicator bieden. Ondertussen kunt u een aangepaste laadindicator toevoegen aan een Blazor Web App.

Interactieve WebAssembly-rendering per onderdeel met prerendering

Dit scenario is van toepassing op interactieve webassembly-rendering per onderdeel (@rendermode InteractiveWebAssembly toegepast op afzonderlijke onderdelen).

Maak een ContentLoading onderdeel in de Layout map van de .Client app die aanroept OperatingSystem.IsBrowser:

• Wanneer false, een laadindicator weergeven.
• Wanneer true, geeft u de inhoud van het aangevraagde onderdeel weer.

Als u CSS-stijlen voor de indicator wilt laden, voegt u de stijlen toe aan <head> inhoud met het HeadContent onderdeel. Zie Hoofdinhoud beheren in ASP.NET Core-apps Blazorvoor meer informatie.

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

Als u nog geen Layout map in het .Client project hebt, voegt u de naamruimte voor de Layout map toe aan het _Imports.razor bestand. In het volgende voorbeeld is BlazorSample.Clientde naamruimte van het project:

@using BlazorSample.Client.Layout

In een component dat gebruikmaakt van Interactive WebAssembly-rendering, omwikkelt u de markup van de component met de Razor component. In het volgende voorbeeld ziet u de benadering met het Counter onderdeel van een app die is gemaakt op basis van de Blazor Web App projectsjabloon.

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

Global Interactive WebAssembly-rendering met prerendering

Dit scenario is van toepassing op globale interactieve WebAssembly-rendering met prerendering (@rendermode="InteractiveWebAssembly" op HeadOutlet en Routes componenten in de App component).

Maak een ContentLoading onderdeel in de Layout map van de .Client app die aanroept RendererInfo.IsInteractive:

• Wanneer false, een laadindicator weergeven.
• Wanneer true, geeft u de inhoud van het aangevraagde onderdeel weer.

Als u CSS-stijlen voor de indicator wilt laden, voegt u de stijlen toe aan <head> inhoud met het HeadContent onderdeel. Zie Hoofdinhoud beheren in ASP.NET Core-apps Blazorvoor meer informatie.

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

Als u nog geen Layout map in het .Client project hebt, voegt u de naamruimte voor de Layout map toe aan het _Imports.razor bestand. In het volgende voorbeeld is BlazorSample.Clientde naamruimte van het project:

@using BlazorSample.Client.Layout

In het MainLayout onderdeel (Layout/MainLayout.razor) van het .Client project wikkelt u de Body eigenschap (@Body) met het ContentLoading onderdeel:

In Layout/MainLayout.razor:

+ <ContentLoading>
    @Body
+ </ContentLoading>

Wereldwijd interactieve WebAssembly rendering zonder prerendering

Dit scenario is van toepassing op globale interactieve WebAssembly-rendering zonder vooraf renderen (@rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" op de HeadOutlet en Routes componenten in de App component).

Voeg een JavaScript-initializer toe aan de app. In het volgende voorbeeld van de JavaScript-modulebestandsnaam is de {ASSEMBLY NAME} tijdelijke aanduiding de assembly-naam van het serverproject (bijvoorbeeld BlazorSample). De wwwroot map waarin de module is geplaatst, is de wwwroot map in het project aan de serverzijde, niet het .Client project.

In het volgende voorbeeld wordt een progress-indicator gebruikt die niet de werkelijke voortgang aangeeft van het leveren van opstartbronnen aan de client, maar het dient als een algemene benadering voor verdere ontwikkeling als u wilt dat de voortgangindicator de werkelijke voortgang van het laden van de opstartbronnen van de app weergeeft.

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

Vanwege een frameworkfout in .NET 8 en 9 (dotnet/aspnetcore #54049) moet het Blazor script handmatig worden gestart. Als de server-app nog niet handmatig is gestart met een WebAssembly(Blazor)-configuratie, update dan de webAssembly: {...} component in het serverproject als volgt.

In Components/App.razor, verwijder de bestaande Blazor<script> tag.

- <script src="_framework/blazor.web.js"></script>

Vervang de <script> tag door de volgende opmaak die handmatig begint met Blazor, samen met een WebAssembly-configuratie (webAssembly: {...}):

<script src="_framework/blazor.web.js" autostart="false"></script>
<script>
    Blazor.start({
        webAssembly: {}
    });
</script>

Als u een korte vertraging ziet tussen het verwijderen van de laadindicator en de eerste paginaweergave, kunt u garanderen dat de indicator na het weergeven wordt verwijderd door aan te roepen tot verwijdering van indicator in de OnAfterRenderAsync levenscyclusmethode van de MainLayout of Routes onderdelen. Zie Document an approach for a loading indicator that works with global Interactive WebAssembly without prerendering (dotnet/AspNetCore.Docs #35111) voor meer informatie en een codevoorbeeld.

Blazor WebAssembly voortgang van het laden van apps

De projectsjabloon bevat Scalable Vector Graphics (SVG) en tekstindicatoren die de voortgang van het laden van de app tonen.

De voortgangsindicatoren worden geïmplementeerd met HTML en CSS met behulp van twee aangepaste CSS-eigenschappen (variabelen) die worden geleverd door Blazor:

• --blazor-load-percentage: Het percentage app-bestanden dat is geladen.
• --blazor-load-percentage-text: Het percentage app-bestanden dat is geladen, afgerond op het dichtstbijzijnde gehele getal.

Met behulp van de voorgaande CSS-variabelen kunt u aangepaste voortgangsindicatoren maken die overeenkomen met de stijl van uw app.

In het volgende voorbeeld:

• resourcesLoaded is een telling van de resources die onmiddellijk tijdens het opstarten van de app geladen worden.
• totalResources is het totale aantal resources dat moet worden geladen.

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

De standaardindicator voor de voortgang van de ronde wordt geïmplementeerd in HTML in het wwwroot/index.html bestand:

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

Als u de opmaak en stijl van de projectsjabloon voor de standaardvoortgangsindicatoren wilt bekijken, raadpleegt u de ASP.NET Core-referentiebron:

• wwwroot/index.html
• app.css

In plaats van de standaardindicator voor de voortgang van de ronde te gebruiken, ziet u in het volgende voorbeeld hoe u een lineaire voortgangsindicator implementeert.

Voeg de volgende stijlen toe aan 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;
}

Een CSS-variabele (var(...)) wordt gebruikt om de waarde van --blazor-load-percentage door te geven aan de scale-eigenschap van een blauw pseudo-element dat de voortgang van het laden van de bestanden van de app aangeeft. Wanneer de app wordt geladen, --blazor-load-percentage wordt deze automatisch bijgewerkt, waardoor de visuele weergave van de voortgangsindicator dynamisch wordt gewijzigd.

Verwijder wwwroot/index.htmlde standaard SVG-ronde indicator in <div id="app">...</div> en vervang deze door de volgende markeringen:

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

De .NET WebAssembly-runtime configureren

In geavanceerde programmeerscenario's wordt de configureRuntime functie met de dotnet opbouwfunctie voor runtimehosts gebruikt om de .NET WebAssembly-runtime te configureren. Stelt bijvoorbeeld dotnet.withEnvironmentVariable een omgevingsvariabele in die:

• Hiermee configureert u de .NET WebAssembly-runtime.
• Hiermee wijzigt u het gedrag van een C-bibliotheek.

De configureRuntime functie kan ook worden gebruikt om integratie met een browser profiler in te schakelen.

Voor de tijdelijke aanduidingen in de volgende voorbeelden die een omgevingsvariabele instellen:

• De plaatsaanduiding {BLAZOR SCRIPT} is het pad en de bestandsnaam van het script Blazor. Zie ASP.NET Core Blazor projectstructuurvoor de locatie van het script.
• De {NAME} tijdelijke aanduiding is de naam van de omgevingsvariabele.
• De {VALUE} tijdelijke aanduiding is de waarde van de omgevingsvariabele.

Blazor Web App:

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

Zelfstandige Blazor WebAssembly:

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

Verbeterde navigatie- en formulierafhandeling uitschakelen

Deze sectie is van toepassing op Blazor Web Apps.

Als u verbeterde navigatie- en formulierafhandeling wilt uitschakelen, stelt u disableDomPreservation in door true op Blazor.start te zetten.

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

In het voorgaande voorbeeld zijn de tijdelijke aanduidingen {BLAZOR SCRIPT} en Blazor respectievelijk het scriptpad en de bestandsnaam. Zie ASP.NET Core Blazor projectstructuurvoor de locatie van het script.