Dela via

ASP.NET Core Blazor uppstart

  • Artikel

Anmärkning

Det här är inte den senaste versionen av den här artikeln. För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Varning

Den här versionen av ASP.NET Core stöds inte längre. Mer information finns i .NET och .NET Core Support Policy. För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Viktigt!

Den här informationen gäller en förhandsversionsprodukt som kan ändras avsevärt innan den släpps kommersiellt. Microsoft lämnar inga garantier, uttryckliga eller underförstådda, med avseende på den information som tillhandahålls här.

För den nuvarande utgåvan, se .NET 9-versionen av den här artikeln .

Den här artikeln beskriver Blazor appstartkonfiguration.

Allmän vägledning om ASP.NET Core-appkonfiguration för utveckling på serversidan finns i Configuration i ASP.NET Core.

Startprocess och konfiguration

Startprocessen för Blazor är automatisk och asynkron via det Blazor skriptet (blazor.*.js), där platshållaren för * är:

  • web för en Blazor Web App
  • server för en Blazor Server app
  • webassembly för en Blazor WebAssembly app

Startprocessen för Blazor är automatisk och asynkron via det Blazor skriptet (blazor.*.js), där platshållaren för * är:

  • server för en Blazor Server app
  • webassembly för en Blazor WebAssembly app

Platsen för skriptet finns i ASP.NET Core Blazor projektstruktur.

Starta Blazormanuellt:

Blazor Web App:

  • Lägg till ett autostart="false" attribut och värde i taggen Blazor<script>.
  • Placera ett skript som anropar Blazor.start() efter taggen Blazor<script> och inuti den avslutande taggen </body>.
  • Placera alternativ för statisk återgivning på serversidan (statisk SSR) i egenskapen ssr.
  • Placera kretsalternativen på serversidan Blazor-SignalR i egenskapen circuit.
  • Placera WebAssembly-alternativ på klientsidan i egenskapen webAssembly.
<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  ...
  Blazor.start({
    ssr: {
      ...
    },
    circuit: {
      ...
    },
    webAssembly: {
      ...
    }
  });
  ...
</script>

Fristående Blazor WebAssembly och Blazor Server:

  • Lägg till ett autostart="false" attribut och värde i taggen Blazor<script>.
  • Placera ett skript som anropar Blazor.start() efter taggen Blazor<script> och inuti den avslutande taggen </body>.
  • Du kan ange ytterligare alternativ i parametern Blazor.start().
<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  ...
  Blazor.start({
    ...
  });
  ...
</script>

I det föregående exemplet representerar platshållaren {BLAZOR SCRIPT} skriptsökvägen och filnamnet för Blazor. Platsen för skriptet finns i ASP.NET Core Blazor projektstruktur.

JavaScript-initierare

JavaScript-initierare (JS) kör logik både före och efter det att en applikation Blazor har laddats. JS initialiserare är användbara i följande scenarier:

  • Anpassa hur en Blazor-app laddas.
  • Initiera bibliotek innan Blazor startas.
  • Konfigurering av Blazor-inställningar.

JS initialiserare identifieras som en del av byggprocessen och importeras automatiskt. Användning av JS initierare tar ofta bort behovet av att manuellt utlösa skriptfunktioner från appen när du använder Razor klassbibliotek (RCLs).

Om du vill definiera en JS initierare lägger du till en JS-modul i projektet med namnet {NAME}.lib.module.js, där platshållaren {NAME} är sammansättningsnamn, biblioteksnamn eller paketidentifierare. Placera filen i projektets webbrot, som vanligtvis är den wwwroot mappen.

För Blazor Web Apps:

  • beforeWebStart(options): Anropas innan Blazor Web App startar. Till exempel används beforeWebStart för att anpassa inläsningsprocessen, loggningsnivån och andra alternativ. Tar emot Blazor-webbalternativen (options).
  • afterWebStarted(blazor): Anropas när alla beforeWebStart löften har lösts. Till exempel kan afterWebStarted användas för att registrera Blazor händelselyssnare och anpassade händelsetyper. Denna Blazor-instans skickas till afterWebStarted som ett argument (blazor).
  • beforeServerStart(options, extensions): Anropas innan den första serverkörningen startas. Tar emot SignalR kretsstartalternativ (options) och eventuella tillägg (extensions) som lades till under publiceringen.
  • afterServerStarted(blazor): Anropas efter att den första interaktiva serverkörningen har startats.
  • beforeWebAssemblyStart(options, extensions): Anropas innan den interaktiva WebAssembly-körningen startas. Tar emot de Blazor alternativen (options) och eventuella tillägg (extensions) som har lagts till under publiceringen. Till exempel kan alternativ ange användning av en anpassad startresursinläsare.
  • afterWebAssemblyStarted(blazor): Anropas efter att den interaktiva WebAssembly-körningen har startats.

Anmärkning

Äldre JS-initierare (beforeStart, afterStarted) anropas inte som standard i en Blazor Web App. Du kan aktivera äldre initierare så att de körs med alternativet enableClassicInitializers. Den äldre initieringskörningen är dock oförutsägbar.

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

För Blazor Server, Blazor WebAssemblyoch Blazor Hybrid appar:

  • beforeStart(options, extensions): Anropas innan Blazor startar. Till exempel används beforeStart för att anpassa inläsningsprocessen, loggningsnivån och andra alternativ som är specifika för värdmodellen.
    • På klientsidan tar beforeStart emot de Blazor alternativen (options) och eventuella tillägg (extensions) som lades till under publiceringen. Till exempel kan alternativ ange användning av en anpassad startresursinläsare.
    • På serversidan tar beforeStart emot kretsens SignalR startalternativ (options).
    • I en BlazorWebViewskickas inga alternativ.
  • afterStarted(blazor): Anropas efter att Blazor är redo att ta emot samtal från JS. Till exempel används afterStarted för att initiera bibliotek genom att göra JS interop-anrop och registrera anpassade element. Blazor-instansen skickas till afterStarted som ett argument (blazor).

Ytterligare .NET WebAssembly runtime-återanrop:

  • onRuntimeConfigLoaded(config): Anropas när startkonfigurationen laddas ned. Tillåter att appen ändrar parametrar (konfiguration) innan körningen startar (parametern är MonoConfig från 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 }): Anropas efter att .NET WebAssembly-körningen har startats (parametern är RuntimeAPI från 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();
}

Båda återanropen kan returnera en Promiseoch man väntar på att löftet ska uppfyllas innan uppstarten fortsätter.

För filnamnet:

  • Om JS initialiserare används som en statisk tillgång i projektet använder du formatet {ASSEMBLY NAME}.lib.module.js, där {ASSEMBLY NAME} platshållaren är appens sammansättningsnamn. Ge till exempel filen namnet BlazorSample.lib.module.js för ett projekt med sammansättningsnamnet BlazorSample. Placera filen i appens wwwroot mapp.
  • Om JS-initierare används från en RCL använder du formatet {LIBRARY NAME/PACKAGE ID}.lib.module.js, där platshållaren {LIBRARY NAME/PACKAGE ID} är projektets biblioteksnamn eller paketidentifierare. Ge till exempel filen namnet RazorClassLibrary1.lib.module.js för en RCL med en paketidentifierare för RazorClassLibrary1. Placera filen i bibliotekets wwwroot mapp.

För Blazor Web Apps:

I det följande exemplet demonstreras JS initialiserare som laddar in anpassade skript både före och efter att Blazor Web App har startat, genom att lägga till dem i <head> i beforeWebStart och 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);
}

Föregående beforeWebStart exempel garanterar bara att det anpassade skriptet läses in innan Blazor startar. Det garanterar inte att ofullbordade löften i skriptet slutförs innan Blazor startar.

För Blazor Server, Blazor WebAssemblyoch Blazor Hybrid appar:

I följande exempel visas JS initieringsskript som importerar anpassade skript före och efter att Blazor har startat, genom att dessa skript läggs till i <head> i beforeStart och 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);
}

Föregående beforeStart exempel garanterar bara att det anpassade skriptet läses in innan Blazor startar. Det garanterar inte att väntande löften i skriptet genomför sin exekvering innan Blazor startar.

Anmärkning

MVC- och Razor Pages-appar laddar inte automatiskt JS-initierare. Utvecklarkod kan dock innehålla ett skript för att hämta appens manifest och trigga laddningen av JS-initialiserare.

Exempel på JS initierare finns i följande källor:

Anmärkning

Dokumentationslänkar till .NET-referenskällan läser vanligtvis in lagringsplatsens standardgren, vilket representerar den aktuella utvecklingen för nästa version av .NET. Om du vill välja en tagg för en specifik version använder du listrutan Välj bland grenar eller taggar. Mer information finns i Så här väljer du en versionstagg för ASP.NET Core-källkod (dotnet/AspNetCore.Docs #26205).

Se till att bibliotek läses in i en viss ordning

Lägg till anpassade skript till <head> i beforeStart och afterStarted i den ordning de ska laddas.

I följande exempel läses script1.js in innan script2.js och script3.js innan 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);
}

Importera ytterligare moduler

Använd import-instruktioner på den översta nivån i filen JS initializers för att importera ytterligare moduler.

additionalModule.js:

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

I filen JS initieringar (.lib.module.js):

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

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

  logMessage();
}

Importkarta

Import maps stöds av ASP.NET Core och Blazor.

Initiera Blazor när dokumentet är klart

Följande exempel börjar Blazor när dokumentet är klart:

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

I det föregående exemplet representerar platshållaren {BLAZOR SCRIPT} skriptsökvägen och filnamnet för Blazor. Platsen för skriptet finns i ASP.NET Core Blazor projektstruktur.

Kedja till Promise som är resultatet av en manuell start

Om du vill utföra ytterligare uppgifter, till exempel JS interop-initiering, använder du then för att länka till Promise som är resultatet av en manuell Blazor appstart:

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

I det föregående exemplet representerar platshållaren {BLAZOR SCRIPT} skriptsökvägen och filnamnet för Blazor. Platsen för skriptet finns i ASP.NET Core Blazor projektstruktur.

Anmärkning

Om du vill att ett bibliotek ska köra ytterligare uppgifter automatiskt när Blazor har startat använder du en JavaScript-initierare. Användning av en JS-initierare kräver inte att bibliotekets konsument sammanlänkar JS-anrop till Blazor:s manuella start.

Ladda startresurser på klientsidan

När en app läses in i webbläsaren laddar appen ned startresurser från servern:

  • JavaScript-kod för att starta appen
  • .NET-körtid och samlingar
  • Platspecifika data

Anpassa hur dessa startresurser läses in med hjälp av loadBootResource-API:et. Funktionen loadBootResource åsidosätter den inbyggda mekanismen för inläsning av startresurser. Använd loadBootResource för följande scenarier:

  • Läs in statiska resurser, till exempel tidszonsdata eller dotnet.wasm, från ett CDN.
  • Läs in komprimerade sammansättningar med hjälp av en HTTP-begäran och dekomprimera dem på klienten för värdar som inte stöder hämtning av komprimerat innehåll från servern.
  • Ge resurser ett alias till ett annat namn genom att omdirigera varje förfrågan om fetch till ett nytt namn.

Anmärkning

Externa källor måste returnera de nödvändiga CORS (Cross-Origin Resource Sharing)--huvudena för att webbläsare ska tillåta laddning av resurser från olika ursprung. CDN:er tillhandahåller vanligtvis de nödvändiga rubrikerna.

loadBootResource parametrar visas i följande tabell.

Parameter Beskrivning
type Resurstypen. Tillåtna typer är: assembly, pdb, dotnetjs, dotnetwasmoch timezonedata. Du behöver bara ange typer för anpassade beteenden. Typer som inte anges för loadBootResource läses in av ramverket enligt deras standardinläsningsbeteenden. Den dotnetjs startresursen (dotnet.*.js) måste antingen returnera null för standardinläsningsbeteende eller en URI för källan till dotnetjs startresurs.
name Namnet på resursen.
defaultUri Resursens relativa eller absoluta URI.
integrity Integritetssträngen som representerar det förväntade innehållet i svaret.

Funktionen loadBootResource kan returnera en URI-sträng för att åsidosätta inläsningsprocessen. I följande exempel hanteras följande filer från bin/Release/{TARGET FRAMEWORK}/wwwroot/_framework från ett CDN på https://cdn.example.com/blazorwebassembly/{VERSION}/:

  • dotnet.*.js
  • dotnet.wasm
  • Tidszonsdata

Platshållaren {TARGET FRAMEWORK} är namnet på målramverket (till exempel net7.0). Platshållaren {VERSION} är den delade ramverksversionen (till exempel 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>

Fristående 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>

I det föregående exemplet representerar platshållaren {BLAZOR SCRIPT} skriptsökvägen och filnamnet för Blazor. Platsen för skriptet finns i ASP.NET Core Blazor projektstruktur.

Om du vill anpassa mer än bara URL:er för startresurser kan funktionen loadBootResource anropa fetch direkt och returnera resultatet. I följande exempel läggs ett anpassat HTTP-huvud till i utgående begäranden. Om du vill behålla standardbeteendet för integritetskontroll går du igenom parametern 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>

Fristående 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>

I det föregående exemplet representerar platshållaren {BLAZOR SCRIPT} skriptsökvägen och filnamnet för Blazor. Platsen för skriptet finns i ASP.NET Core Blazor projektstruktur.

När funktionen loadBootResource returnerar nullanvänder Blazor standardinläsningsbeteendet för resursen. Den föregående koden returnerar till exempel null för den dotnetjs startresursen (dotnet.*.js) eftersom dotnetjs startresursen antingen måste returnera null för standardinläsningsbeteende eller en URI för källan för den dotnetjs startresursen.

Funktionen loadBootResource kan också returnera ett Response löfte. Ett exempel finns i Hosta och distribuera ASP.NET Core Blazor WebAssembly.

Mer information finns i ASP.NET Core Blazor WebAssembly .NET Runtime och cachelagring av apppaket.

Kontrollera rubriker i C#-kod

Kontrollera sidhuvuden vid start i C#-kod med hjälp av följande metoder.

I följande exempel tillämpas en innehållssäkerhetsprincip (CSP) på appen via ett CSP-huvud. Platshållaren {POLICY STRING} är CSP-principsträngen. Mer information om CSP:er finns i Framtvinga en innehållssäkerhetsprincip för ASP.NET Core Blazor.

Scenarier på serversidan och förinstallerade scenarier på klientsidan

Använd ASP.NET Core Middleware för att styra samlingen med rubriker.

I filen Program:

I Startup.Configure av Startup.cs:

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

I föregående exempel används infogade mellanprogram, men du kan också skapa en anpassad mellanprogramsklass och anropa mellanprogrammet med en tilläggsmetod i filen Program. Mer information finns i Skriv anpassad ASP.NET Core-mellanvara.

Utveckling på klientsidan utan prerendering

Skicka StaticFileOptions till MapFallbackToFile som anger svarshuvuden i OnPrepareResponse-fasen.

I Program-filen på serversidan:

I Startup.Configure av Startup.cs:

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

...

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

Förloppsindikatorer för inläsning på klientsidan

En förloppsindikator för inläsning visar appens inläsningsstatus för användare, vilket anger att appen läses in normalt och att användaren bör vänta tills inläsningen är klar.

Blazor Web App inläsningsstatus

Förloppsindikatorn för inläsning som används i Blazor WebAssembly appar finns inte i en app som skapats från Blazor Web App-projektmallen. Vanligtvis är en inläsningsindikator inte önskvärd för interaktiva WebAssembly-komponenter eftersom Blazor Web Appförbereder klientkomponenter på serversidan för snabba laddningstider. I situationer med blandat återgivningsläge måste ramverks- eller utvecklarkoden också vara försiktig för att undvika följande problem:

  • Visar flera inläsningsindikatorer på samma renderade sida.
  • När man oavsiktligt tar bort förberenderat innehåll medan .NET WebAssembly-runtime läses in.

En framtida version av .NET kan ge en ramverksbaserad förloppsindikator för inläsning. Under tiden kan du lägga till en anpassad förloppsindikator vid laddning i en Blazor Web App.

Skapa en LoadingProgress komponent i .Client-appen som anropar OperatingSystem.IsBrowser:

  • När falsevisas, visa en laddningsindikator medan Blazor-paketet laddas ner och innan Blazor-körning aktiveras på klienten.
  • När truerenderar du den begärda komponentens innehåll.

I följande demonstration används indikatorn för inläsningsförlopp som finns i appar som skapats från mallen Blazor WebAssembly, inklusive en ändring av de formatmallar som mallen innehåller. Formatmallarna läses in i appens <head>-innehåll av komponenten HeadContent. För mer information, se Kontrollera innehållet i huvudet i ASP.NET Core Blazor appar.

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

I en komponent som implementerar interaktiv WebAssembly-återgivning omsluter du komponentens Razor-markering med komponenten LoadingProgress. I följande exempel visas metoden med den Counter komponenten i en app som skapats från Blazor Web App-projektmallen.

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 förlopp för appinläsning

Projektmallen innehåller skalbar vektorgrafik (SVG) och textindikatorer som visar appens inläsningsförlopp.

Förloppsindikatorerna implementeras med HTML och CSS med hjälp av två anpassade CSS-egenskaper (variabler) som tillhandahålls av Blazor:

  • --blazor-load-percentage: Procentandelen appfiler som läses in.
  • --blazor-load-percentage-text: Procentandelen appfiler som läses in, avrundade till närmaste heltal.

Med hjälp av de föregående CSS-variablerna kan du skapa anpassade förloppsindikatorer som matchar appens formatering.

I följande exempel:

  • resourcesLoaded är en omedelbar räkning av resurser som läses in under appstarten.
  • totalResources är det totala antalet resurser som ska laddas.
const percentage = resourcesLoaded / totalResources * 100;
document.documentElement.style.setProperty(
  '--blazor-load-percentage', `${percentage}%`);
document.documentElement.style.setProperty(
  '--blazor-load-percentage-text', `"${Math.floor(percentage)}%"`);

Standardindikatorn för cirkelrunt förlopp implementeras i HTML i filen wwwroot/index.html.

<div id="app">
    <svg class="loading-progress">
        <circle r="40%" cx="50%" cy="50%" />
        <circle r="40%" cx="50%" cy="50%" />
    </svg>
    <div class="loading-progress-text"></div>
</div>

Information om hur du granskar projektmallens markering och formatering för standardstatusindikatorerna finns i referenskällan ASP.NET Core:

Anmärkning

Dokumentationslänkar till .NET-referenskällan läser vanligtvis in lagringsplatsens standardgren, vilket representerar den aktuella utvecklingen för nästa version av .NET. Om du vill välja en tagg för en specifik version använder du listrutan Välj bland grenar eller taggar. Mer information finns i Så här väljer du en versionstagg för ASP.NET Core-källkod (dotnet/AspNetCore.Docs #26205).

I stället för att använda standardindikatorn för rundat förlopp visar följande exempel hur du implementerar en linjär förloppsindikator.

Lägg till följande formatmallar i 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;
}

En CSS-variabel (var(...)) används för att skicka värdet för --blazor-load-percentage till egenskapen scale för ett blått pseudoelement som anger inläsningsförloppet för appens filer. När appen laddas uppdateras --blazor-load-percentage automatiskt, vilket dynamiskt förändrar förloppsindikatorns utseende.

I wwwroot/index.htmltar du bort standardindikatorn för SVG-avrundning i <div id="app">...</div> och ersätter den med följande markering:

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

Konfigurera .NET WebAssembly-körtidsmiljön

I avancerade programmeringsscenarier används configureRuntime-funktionen med dotnet värdskriptskapare för att konfigurera .NET WebAssembly-runtime-miljön. Till exempel anger dotnet.withEnvironmentVariable en miljövariabel som:

  • Konfigurerar .NET WebAssembly-miljön.
  • Ändrar beteendet för ett C-bibliotek.

Anmärkning

En dokumentationsbegäran väntar på dotnet/runtime GitHub-lagringsplatsen för mer information om miljövariabler som konfigurerar .NET WebAssembly-körningen eller påverkar beteendet för C-bibliotek. Även om dokumentationsbegäran väntar finns mer information och korslänkar till ytterligare resurser i begäran , fråga/begäran om dokumentation om .NET WASM-körmiljövariabler (dotnet/runtime #98225).

Funktionen configureRuntime kan också användas för att aktivera integrering med en webbläsarprofilerare.

För platshållarna i följande exempel som anger en miljövariabel:

  • Platshållaren {BLAZOR SCRIPT} är skriptets sökväg och filnamn Blazor. Platsen för skriptet finns i ASP.NET Core Blazor projektstruktur.
  • Platshållaren {NAME} är miljövariabelns namn.
  • Platshållaren {VALUE} är miljövariabelns värde.

Blazor Web App:

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

Fristående Blazor WebAssembly:

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

Anmärkning

.NET-runtime-instansen kan nås med hjälp av .NET WebAssembly Runtime API (Blazor.runtime). Appens byggkonfiguration kan till exempel hämtas med hjälp av Blazor.runtime.runtimeBuildInfo.buildConfiguration.

Mer information om .NET WebAssembly-körningskonfigurationen finns i -körningens TypeScript-definitionsfil (dotnet.d.ts) på dotnet/runtime GitHub-lagringsplatsen.

Anmärkning

Dokumentationslänkar till .NET-referenskällan läser vanligtvis in lagringsplatsens standardgren, vilket representerar den aktuella utvecklingen för nästa version av .NET. Om du vill välja en tagg för en specifik version använder du listrutan Välj bland grenar eller taggar. Mer information finns i Så här väljer du en versionstagg för ASP.NET Core-källkod (dotnet/AspNetCore.Docs #26205).

Inaktivera förbättrad navigering och formulärhantering

Det här avsnittet gäller för Blazor Web Apps.

Om du vill inaktivera förbättrad navigerings- och formulärhanteringanger du disableDomPreservation till true för Blazor.start:

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

I det föregående exemplet representerar platshållaren {BLAZOR SCRIPT} skriptsökvägen och filnamnet för Blazor. Platsen för skriptet finns i ASP.NET Core Blazor projektstruktur.

Ytterligare resurser