ASP.NET Core Blazor indítása

Ez a cikk az alkalmazások indítási konfigurációját ismerteti Blazor .

A ASP.NET Core-alkalmazások kiszolgálóoldali fejlesztéshez való konfigurálásának általános útmutatóját lásd: Konfiguráció a ASP.NET Core-ban.

Indítási folyamat és konfiguráció

Az Blazor indítási folyamat automatikus és aszinkron módon történik a Blazor szkripttel (blazor.*.js), ahol a * helyőrző a következő:

• web egy Blazor Web App
• server Blazor Server alkalmazáshoz
• webassembly Blazor WebAssembly alkalmazáshoz

A szkript helyéről lásd ASP.NET Core Blazor projektstruktúra.

A manuális indítás Blazor:

Blazor Web App:

• Adjon hozzá attribútumot autostart="false" és értéket a Blazor<script> címkéhez.
• Helyezzen el egy szkriptet, amely a Blazor.start()Blazor címke után és a <script> záró címkén belül meghívja a </body>-t.
• Helyezzen statikus kiszolgálóoldali renderelési (statikus SSR) beállításokat a ssr tulajdonságba.
• Helyezze el a kiszolgálóoldali Blazor-SignalR áramkör opcióit a circuit tulajdonságban.
• Helyezze el az ügyféloldali WebAssembly beállításokat a webAssembly tulajdonságban.

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

Önálló Blazor WebAssembly és Blazor Server:

• Adjon hozzá attribútumot autostart="false" és értéket a Blazor<script> címkéhez.
• Helyezzen el egy szkriptet, amely a Blazor.start()Blazor címke után és a <script> záró címkén belül meghívja a </body>-t.
• A paraméterben Blazor.start() további lehetőségeket is megadhat.

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

Az előző példában a {BLAZOR SCRIPT} helyőrző a Blazor szkript elérési útja és fájlneve. A szkript helyéről lásd ASP.NET Core Blazor projektstruktúra.

JavaScript-inicializálók

JavaScript-JSinicializálók végrehajtják a logikát egy Blazor alkalmazás betöltése előtt és után. JS Az inicializálók a következő helyzetekben hasznosak:

• Egy Blazor alkalmazás betöltési módjának testreszabása.
• A könyvtárak inicializálása mielőtt Blazor elindul.
• Blazor Beállítások konfigurálása.

JS A rendszer az inicializálókat a buildelési folyamat részeként észleli, és automatikusan importálja. JS Az inicializálók használata gyakran megszünteti a szkriptfüggvények manuális aktiválásának szükségességét az alkalmazásból azosztálykódtárak (RCL-ek) használatakorRazor.

Inicializáló definiálásához adjon hozzá egy JS modult a JS projekthez, ahol a {NAME}.lib.module.js helyőrző a szerelvény neve, a kódtár neve vagy a csomag azonosítója. Helyezze a fájlt a projekt webes gyökérkönyvtárába, amely általában a wwwroot mappa.

Az Blazor Web App-ok esetén:

• beforeWebStart(options): Mielőtt elkezdődik a Blazor Web App, felhívásra kerül. Például a beforeWebStart a betöltési folyamat, a naplózási szint és más beállítások testreszabására szolgál. Megkapja a Blazor webes beállításokat (options).
• afterWebStarted(blazor): Az összes beforeWebStart ígéret feloldása után van hívva. Például a afterWebStarted használható Blazor eseményfigyelők és egyéni eseménytípusok regisztrálására. A Blazor példányt argumentumként (afterWebStarted) adjuk át blazor-nek.
• beforeServerStart(options, extensions): Az első kiszolgálói futtatókörnyezet elindítása előtt hívható meg. Fogadja az SignalR áramkör indítási beállításait (options) és azokat a kiterjesztéseket (extensions), amelyeket a közzététel során adtak hozzá.
• afterServerStarted(blazor): Az első interaktív kiszolgálói futtatókörnyezet elindítása után hívható meg.
• beforeWebAssemblyStart(options, extensions): Az Interactive WebAssembly futtatókörnyezet elindítása előtt hívható meg. Megkapja a közzététel során hozzáadott beállításokat (Blazor) és bármilyen kiegészítőket (options, extensions). A beállítások megadhatják például az egyéni rendszerindítási erőforrás-betöltő használatát.
• afterWebAssemblyStarted(blazor): Az Interactive WebAssembly futtatókörnyezet elindítása után hívható meg.

Megjegyzés

A JS régi inicializálók (beforeStart, afterStarted) alapértelmezés szerint nem lesznek meg hívva egy Blazor Web App-ben. Engedélyezheti az örökölt inicializálók futtatását a enableClassicInitializers beállítással. Az örökölt inicializáló végrehajtása azonban kiszámíthatatlan.

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

Blazor Server, Blazor WebAssemblyés Blazor Hybrid alkalmazások esetén:

• beforeStart(options, extensions): A Blazor elkezdése előtt van hívva. Például a beforeStart a betöltési folyamat, a naplózási szint és az üzemeltetési modellre vonatkozó egyéb beállítások testreszabására szolgál.
  • Az ügyféloldalon a beforeStart megkapja a közzététel során hozzáadott Blazor lehetőségeket (options) és a bővítményeket (extensions). A beállítások megadhatják például az egyéni rendszerindítási erőforrás-betöltő használatát.
  • A kiszolgálóoldalon a beforeStart fogadja az SignalR áramkör indítási beállításait (options).
  • Egy BlazorWebView esetén nem adnak meg opciókat.
• afterStarted(blazor): Azután hívják meg, hogy Blazor készen áll a hívások fogadására JS-től. Például a afterStarted a könyvtárak inicializálására szolgál, interop-hívások kezdeményezésével és a JS egyéni elemek regisztrálásával. A Blazor példányt argumentumként (afterStarted) adjuk át blazor-nek.

További .NET WebAssembly futtatókörnyezeti visszahívások:

• onRuntimeConfigLoaded(config): A rendszerindítási konfiguráció letöltésekor hívható meg. Lehetővé teszi, hogy az alkalmazás módosítsa a paramétereket (konfigurációt) a futtatókörnyezet indítása előtt (a paraméter a következőből származik MonoConfigdotnet.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 }): A .NET WebAssembly futtatókörnyezet elindítása után hívható meg (a paraméter a következőtől származik RuntimeAPIdotnet.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();
  }
  

Mindkét visszahívás visszaadhat egy Promise, és a promise megváródik, mielőtt az indítás folytatódik.

A fájlnév:

• Ha az JS inicializálókat statikus eszközként használják a projektben, használja a formátumot {ASSEMBLY NAME}.lib.module.js, ahol a {ASSEMBLY NAME} helyőrző az alkalmazás összeszerelésének neve. Például nevezze el a fájlt BlazorSample.lib.module.js, ha a projekt szerelvényneve BlazorSample. Helyezze a fájlt az alkalmazás mappájába wwwroot .
• Ha az JS inicializálók egy RCL-ből származnak, használja a {LIBRARY NAME/PACKAGE ID}.lib.module.js formátumot, ahol a {LIBRARY NAME/PACKAGE ID} helyőrző a projekt könyvtárának neve vagy csomagazonosítója (<PackageId> érték a könyvtár projektfájljában). Adja meg például egy RCL fájljának RazorClassLibrary1.lib.module.js nevét a következő csomagazonosítóval RazorClassLibrary1: . Helyezze a fájlt a tár mappájába wwwroot .

Az Blazor Web App-ok esetén:

Az alábbi példa az JS inicializálókat szemlélteti, amelyek az egyéni szkripteket a Blazor Web App elkezdése előtt és után töltik be, úgy, hogy azokat hozzáfűzik a <head> következő részéhez beforeWebStart és 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);
}

Az előző beforeWebStart példa csak azt garantálja, hogy az egyéni szkript az Blazor előtt betöltődik. Nem garantálja, hogy a szkriptben várt ígéretek befejezik a végrehajtást, mielőtt Blazor elindul.

Blazor Server, Blazor WebAssemblyés Blazor Hybrid alkalmazások esetén:

Az alábbi példa bemutatja azokat az inicializálókat JS, amelyek betöltik az egyéni szkripteket Blazor kezdete előtt és után, és hozzáfűzik őket a <head> elemhez beforeStart és afterStarted között.

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

Az előző beforeStart példa csak azt garantálja, hogy az egyéni szkript az Blazor előtt betöltődik. Nem garantálja, hogy a szkriptben várt ígéretek befejezik a végrehajtást, mielőtt Blazor elindul.

Megjegyzés

Az MVC- és Razor a Pages-alkalmazások nem töltik be JS automatikusan az inicializálókat. A fejlesztői kód tartalmazhat azonban egy szkriptet az alkalmazás jegyzékfájljának lekéréséhez és az JS inicializálók terhelésének aktiválásához.

Példákért JS inicializálókra tekintse meg a következő forrásokat:

• Blazor Web App betöltésjelző (Globális interaktív WebAssembly renderelés előzetes renderelés nélkül)
• ASP.NET Core Blazor JavaScript statikus kiszolgálóoldali rendereléssel (statikus SSR)
• Összetevők használata Razor JavaScript-alkalmazásokban és SPA-keretrendszerekben (quoteContainer2 példa)
• ASP.NET Core Blazor eseménykezelés (egyéni vágólap-beillesztési esemény példája)
• QR-kódlétrehozás engedélyezése TOTP-hitelesítő alkalmazásokhoz egy ASP.NET Core-ban Blazor Web App
• Alapszintű tesztalkalmazás a ASP.NET Core GitHub-adattárban (BasicTestApp.lib.module.js)

Megjegyzés

A .NET referenciaforrásra mutató dokumentációs hivatkozások általában betöltik az adattár alapértelmezett ágát, amely a .NET következő kiadásának aktuális fejlesztését jelöli. Egy adott kiadás címkéjének kiválasztásához használja az Ágak vagy címkék közötti váltás legördülő listát. További információ: A ASP.NET Core-forráskód (dotnet/AspNetCore.Docs #26205) verziócímkéjének kiválasztása.

Győződjön meg arról, hogy a könyvtárak adott sorrendben vannak betöltve.

Egyéni szkriptek hozzáfűzése a <head>-hez a beforeStart és afterStarted betöltési sorrendjében.

Az alábbi példa betölti a script1.js-t script2.js előtt és a script3.js-t script4.js előtt.

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

További modulok importálása

További modulok importálásához használjon felső szintű import utasításokat az JS inicializálók fájljában.

additionalModule.js:

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

Az JS inicializálók fájljában (.lib.module.js):

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

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

  logMessage();
}

Térkép importálása

Az import térképeket az ASP.NET Core és Blazor támogatják.

Inicializálja Blazor, amikor a dokumentum készen áll

A következő példa akkor kezdődik Blazor , amikor a dokumentum készen áll:

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

Az előző példában a {BLAZOR SCRIPT} helyőrző a Blazor szkript elérési útja és fájlneve. A szkript helyéről lásd ASP.NET Core Blazor projektstruktúra.

Kapcsolat a Promise-hoz, ami manuális indításból származik

További feladatok végrehajtásához, mint például az JS interop initializálását, használja a then-t a Promise láncolásához, amely egy manuális Blazor alkalmazásindítás eredménye.

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

Az előző példában a {BLAZOR SCRIPT} helyőrző a Blazor szkript elérési útja és fájlneve. A szkript helyéről lásd ASP.NET Core Blazor projektstruktúra.

Megjegyzés

Ahhoz, hogy egy könyvtár automatikusan végrehajtsa a további feladatokat a Blazor elindítása után, használjon JavaScript inicializálót. Az JS inicializáló használata nem követeli meg a kódtár felhasználójától, hogy JS hívásokat láncoljon Blazor manuális indításához.

Ügyféloldali rendszerindítási erőforrások betöltése

Amikor egy alkalmazás betöltődik a böngészőben, az alkalmazás letölti a rendszerindító erőforrásokat a kiszolgálóról:

• JavaScript-kód az alkalmazás elindításához
• .NET-futtatókörnyezet és összetevők
• Helyspecifikus adatok

Testre szabhatja, hogyan töltik be ezeket a rendszerindító erőforrásokat az loadBootResource API használatával. A loadBootResource függvény felülbírálja a beépített rendszerindítási erőforrás-betöltési mechanizmust. A következő forgatókönyvekhez használható loadBootResource :

• Töltsön be statikus erőforrásokat, például időzóna-adatokat vagy dotnet.wasm egy CDN-ből.
• Töltse be a tömörített szerelvényeket HTTP-kéréssel, és csomagolja ki őket a kliens oldalon olyan gazdagépek esetében, amelyek nem támogatják a tömörített tartalom kiszolgálóról való lekérését.
• Az erőforrásokat nevezzük át egy másik névre azáltal, hogy minden fetch kérést új névre irányítunk át.

Megjegyzés

A külső forrásoknak vissza kell adniuk a böngészőkhöz szükséges, forrásközi erőforrásmegosztási (CORS ) fejléceket, hogy engedélyezve legyenek a forrásközi erőforrások betöltése. A CDN-k általában a szükséges fejléceket adják meg.

loadBootResource paraméterek jelennek meg az alábbi táblázatban.

Paraméter	Leírás
type	Az erőforrás típusa. A megengedett típusok a következők: assembly, pdb, dotnetjs, dotnetwasmés timezonedata. Csak az egyéni viselkedések típusait kell megadnia. A nem megadott loadBootResource típusokat a keretrendszer tölti be az alapértelmezett betöltési viselkedésük szerint. A dotnetjs rendszerindító erőforrásnak (dotnet.*.js) vissza kell adnia null az alapértelmezett betöltési viselkedést, vagy a rendszerindító erőforrás forrásának URI-ját dotnetjs .
name	Az erőforrás neve.
defaultUri	Az erőforrás relatív vagy abszolút URI-ja.
integrity	A válaszban várt tartalmat képviselő integritási sztring.

A loadBootResource függvény visszaadhat egy URI-sztringet a betöltési folyamat felülbírálásához. A következő példában a következő fájlok a bin/Release/{TARGET FRAMEWORK}/wwwroot/_framework-ról egy CDN-en keresztül kerülnek kiszolgálásra: https://cdn.example.com/blazorwebassembly/{VERSION}/

• dotnet.*.js
• dotnet.wasm
• Időzónák adatai

A {TARGET FRAMEWORK} helyőrző a cél keretrendszer megjelölése (például net7.0). A {VERSION} helyőrző a megosztott keretrendszer verziója (például 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>

Önálló 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>

Az előző példában a {BLAZOR SCRIPT} helyőrző a Blazor szkript elérési útja és fájlneve. A szkript helyéről lásd ASP.NET Core Blazor projektstruktúra.

Az URL-címeken túlmenően a rendszerindítási erőforrások más elemeinek testreszabása érdekében a loadBootResource függvény közvetlenül hívhatja meg a fetch és visszaadhatja az eredményt. Az alábbi példa egy egyéni HTTP-fejlécet ad hozzá a kimenő kérésekhez. Az alapértelmezett integritás-ellenőrzési viselkedés megőrzéséhez adja át a paramétert 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>

Önálló 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>

Az előző példában a {BLAZOR SCRIPT} helyőrző a Blazor szkript elérési útja és fájlneve. A szkript helyéről lásd ASP.NET Core Blazor projektstruktúra.

Amikor a loadBootResource függvény visszatér null, Blazor az erőforrás alapértelmezett betöltési viselkedését használja. Az előző kód például a null rendszerindító erőforráshoz (dotnetjs) ad visszadotnet.*.js, mert a rendszerindító erőforrásnak vagy az dotnetjs alapértelmezett betöltési viselkedéshez, vagy a rendszerindító erőforrás forrásához null tartozó URI-t kell visszaadniadotnetjs.

A loadBootResource függvény visszaadhat egy Response Promise-ot is. Lásd a következő példát: ASP.NET Core tárhely és telepítés Blazor WebAssembly.

További információ: ASP.NET Core Blazor WebAssembly gyorsítótárazási és integritás-ellenőrzési hibái.

Fejlécek vezérlése C#-kódban

A fejlécek vezérlése indításkor C#-kódban az alábbi módszerekkel.

Az alábbi példákban egy CSP-fejlécen keresztül egy tartalombiztonsági szabályzat (CSP) lesz alkalmazva az alkalmazásra. A {POLICY STRING} helyőrző a CSP házirend karakterlánca. További információ a CSP-ről: Tartalombiztonsági szabályzat kényszerítése ASP.NET Core-hoz Blazor.

Megjegyzés

A fejlécek nem állíthatók be a válasz elindítása után. Az ebben a szakaszban ismertetett megközelítések csak a válasz kezdete előtt állítják be a fejléceket, így az itt ismertetett megközelítések biztonságosak. További információ: IHttpContextAccessor/HttpContext a ASP.NET Core-alkalmazásokbanBlazor.

Kiszolgálóoldali és előrerendelt ügyféloldali forgatókönyvek

A fejlécgyűjtemény vezérléséhez használja ASP.NET Core Middleware-t .

A Program fájlban:

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

Az előző példa beágyazott köztes szoftvereket használ, de létrehozhat egy egyéni köztes szoftverosztályt is, és meghívhatja a köztes szoftvert egy kiterjesztési módszerrel a Program fájlban. További információért lásd: Egyéni ASP.NET Core middleware komponensírása.

Kliensoldali betöltési jelzők

A betöltési jelző azt mutatja, hogy az alkalmazás normál módon töltődik be, és hogy a felhasználónak várnia kell a betöltés befejezéséig.

Blazor Web App betöltési jelző

Az alkalmazásokban Blazor WebAssembly használt betöltési jelző nem szerepel a Blazor Web App projektsablonból létrehozott alkalmazásban. Az interaktív WebAssembly-összetevők esetében általában nem kívánatos a betöltési jelző, mivel Blazor Web App az ügyféloldali komponensek előrenderelése a kiszolgálón a gyors kezdeti betöltési időkre szolgál. Vegyes renderelési mód esetén a keretrendszernek vagy a fejlesztői kódnak is óvatosnak kell lennie a következő problémák elkerülése érdekében:

• Több betöltési mutató megjelenítése ugyanazon a renderelt oldalon.
• Véletlenül elveti az előre berendelt tartalmat, miközben a .NET WebAssembly futtatókörnyezet betöltődik.

A .NET jövőbeli kiadása keretrendszeralapú betöltési mutatót biztosíthat. Addig is hozzáadhat egy egyéni betöltési jelzőt egy Blazor Web App.

Összetevőnkénti interaktív WebAssembly-renderelés előrerendezéssel

Ez a forgatókönyv az egyes összetevőkre alkalmazott interaktív WebAssembly renderelésre@rendermode InteractiveWebAssembly vonatkozik.

Hozzon létre egy ContentLoading összetevőt a Layout mappában a .Client alkalmazás számára, amely a OperatingSystem.IsBrowser meghívást kezdeményezi:

• Amikor falseegy betöltési jelző jelenik meg.
• Amikor true, renderelje a kért összetevő tartalmát.

Ha CSS-stílusokat szeretne betölteni a mutatóhoz, adja hozzá a stílusokat a <head> tartalmához az HeadContent összetevővel. További információ: Vezérlőfej tartalma ASP.NET Core-alkalmazásokbanBlazor.

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

Ha még nincs Layout mappája a .Client projektben, adja hozzá a Layout mappa névterét a _Imports.razor fájlhoz. Az alábbi példában a projekt névtere a következő BlazorSample.Client:

@using BlazorSample.Client.Layout

Az Interaktív WebAssembly renderelést alkalmazó összetevőben csomagolja be az összetevő Razor jelölését az ContentLoading összetevővel. Az alábbi példa a Counter projektsablonból létrehozott alkalmazás Blazor Web App komponensével szemlélteti a megközelítést.

Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveWebAssembly

<PageTitle>Counter</PageTitle>

<ContentLoading>
    <h1>Counter</h1>

    <p role="status">Current count: @currentCount</p>

    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</ContentLoading>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Globális interaktív WebAssembly renderelés előrerendereléssel

Ez a forgatókönyv a globális Interaktív WebAssembly-renderelésre vonatkozik előrerendezéssel (@rendermode="InteractiveWebAssembly" a HeadOutlet és Routes összetevőkben App összetevőben).

Hozzon létre egy ContentLoading összetevőt a Layout mappában a .Client alkalmazás számára, amely a RendererInfo.IsInteractive meghívást kezdeményezi:

• Amikor falseegy betöltési jelző jelenik meg.
• Amikor true, renderelje a kért összetevő tartalmát.

Ha CSS-stílusokat szeretne betölteni a mutatóhoz, adja hozzá a stílusokat a <head> tartalmához az HeadContent összetevővel. További információ: Vezérlőfej tartalma ASP.NET Core-alkalmazásokbanBlazor.

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

Ha még nincs Layout mappája a .Client projektben, adja hozzá a Layout mappa névterét a _Imports.razor fájlhoz. Az alábbi példában a projekt névtere a következő BlazorSample.Client:

@using BlazorSample.Client.Layout

A MainLayout projekt Layout/MainLayout.razor összetevőjében (.Client) burkolja be a Body tulajdonságot (@Body) az ContentLoading összetevővel:

A Layout/MainLayout.razor:

+ <ContentLoading>
    @Body
+ </ContentLoading>

Globális interaktív WebAssembly megjelenítés előzetes megjelenítés nélkül

Ez a forgatókönyv a globális Interaktív WebAssembly-renderelésre vonatkozik előzetes berendezés nélkül (@rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)"az összetevő és HeadOutlet az RoutesApp összetevők esetében).

JavaScript-inicializáló hozzáadása az alkalmazáshoz. A következő JavaScript-modul fájlnév-példájában a {ASSEMBLY NAME} helyőrző a kiszolgálóprojekt szerelvényneve (például BlazorSample). A wwwroot modult tartalmazó mappa a wwwroot kiszolgálóoldali projekt mappája, nem pedig a .Client projekt.

Az alábbi példa egy olyan mutatót progress használ, amely nem jelzi az ügyféloldali rendszerindítási erőforrások ügyfélnek történő átadásának tényleges előrehaladását, de általános megközelítésként szolgál a további fejlesztéshez, ha azt szeretné, hogy a folyamatjelző az alkalmazás rendszerindítási erőforrásainak betöltésének tényleges előrehaladását mutassa.

wwwroot/{ASSEMBLY NAME}.lib.module.js:

export function beforeWebStart(options) {
  var progress = document.createElement("progress");
  progress.id = 'loadingIndicator';
  progress.ariaLabel = 'Blazor loading…';
  progress.style = 'position:absolute;top:50%;left:50%;margin-right:-50%;' +
    'transform:translate(-50%,-50%);';
  document.body.appendChild(progress);
}

export function afterWebAssemblyStarted(blazor) {
  var progress = document.getElementById('loadingIndicator');
  progress.remove();
}

Blazor WebAssembly alkalmazás betöltési állapota

A projektsablon méretezhető vektorgrafikát (SVG) és szövegjelzőket tartalmaz, amelyek az alkalmazás betöltési állapotát mutatják.

A folyamatjelzők html és CSS használatával vannak implementálva, két CSS egyéni tulajdonsággal (változókkal), amelyeket a Blazorkövetkezők biztosítanak:

• --blazor-load-percentage: A betöltött alkalmazásfájlok százalékos aránya.
• --blazor-load-percentage-text: A betöltött alkalmazásfájlok százalékos aránya, a legközelebbi egész számra kerekítve.

Az előző CSS-változók használatával egyéni folyamatjelzőket hozhat létre, amelyek megfelelnek az alkalmazás stílusának.

Az alábbi példában:

• resourcesLoaded az alkalmazás indításakor betöltött erőforrások azonnali száma.
• totalResources A betöltendő erőforrások teljes száma.

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

Az alapértelmezett kerek folyamatjelző HTML-ben van implementálva a wwwroot/index.html fájlban:

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

Az alapértelmezett állapotjelzők projektsablon-korrektúráinak és stílusának áttekintéséhez tekintse meg a ASP.NET Core referenciaforrást:

• wwwroot/index.html
• app.css

Megjegyzés

A .NET referenciaforrásra mutató dokumentációs hivatkozások általában betöltik az adattár alapértelmezett ágát, amely a .NET következő kiadásának aktuális fejlesztését jelöli. Egy adott kiadás címkéjének kiválasztásához használja az Ágak vagy címkék közötti váltás legördülő listát. További információ: A ASP.NET Core-forráskód (dotnet/AspNetCore.Docs #26205) verziócímkéjének kiválasztása.

Az alapértelmezett kerek folyamatjelző helyett az alábbi példa bemutatja, hogyan valósíthat meg lineáris folyamatjelzőt.

Adja hozzá a következő stílusokat: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;
}

A CSS-változó (var(...)) arra szolgál, hogy a --blazor-load-percentage értéket átadja a kék pszeudoelem scale tulajdonságának, amely az alkalmazás fájljainak betöltési állapotát jelzi. Az alkalmazás betöltésekor --blazor-load-percentage a rendszer automatikusan frissül, amely dinamikusan módosítja a folyamatjelző vizualizációját.

wwwroot/index.html Távolítsa el az alapértelmezett SVG kerek jelzőt <div id="app">...</div>-ben, és cserélje le a következő jelölésre:

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

A .NET WebAssembly futtatókörnyezet konfigurálása

Speciális programozási forgatókönyvekben a configureRuntimedotnet futtatókörnyezet-gazdagépszerkesztővel rendelkező függvény a .NET WebAssembly futtatókörnyezet konfigurálására szolgál. Beállít például egy környezeti változót, dotnet.withEnvironmentVariable amely:

• Konfigurálja a .NET WebAssembly futtatókörnyezetet.
• A C-kódtár viselkedésének módosítása.

Megjegyzés

A GitHub-adattárban függőben van egy dotnet/runtime dokumentációs kérés, amely további információt nyújt a .NET WebAssembly futtatókörnyezetet konfiguráló vagy a C-kódtárak viselkedését befolyásoló környezeti változókról. Bár a dokumentációs kérelem függőben van, további információk és további erőforrásokra mutató kereszthivatkozások érhetők el a kérelemben, kérdés/kérés a .NET WASM futtatókörnyezeti env vars (dotnet/runtime #98225) dokumentációjához.

A configureRuntime függvény a böngészőprofilozóval való integráció engedélyezésére is használható.

Az alábbi példákban lévő helyőrzők, amelyek egy környezeti változót állítanak be:

• A {BLAZOR SCRIPT} helyőrző a Blazor szkript elérési útját és fájlnevét jelöli. A szkript helyéről lásd ASP.NET Core Blazor projektstruktúra.
• A {NAME} helyőrző a környezeti változó neve.
• A {VALUE} helyőrző a környezeti változó értéke.

Blazor Web App:

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

Önálló Blazor WebAssembly:

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

Megjegyzés

A .NET futtatókörnyezet-példány a .NET WebAssembly Runtime API (Blazor.runtime) használatával érhető el. Az alkalmazás buildkonfigurációja például a következővel Blazor.runtime.runtimeBuildInfo.buildConfigurationkérhető le: .

A .NET WebAssembly futtatókörnyezet konfigurációjával kapcsolatos további információkért tekintse meg a futtatókörnyezet TypeScript-definíciós fájlját (dotnet.d.ts) a dotnet/runtime GitHub-adattárban.

Megjegyzés

A .NET referenciaforrásra mutató dokumentációs hivatkozások általában betöltik az adattár alapértelmezett ágát, amely a .NET következő kiadásának aktuális fejlesztését jelöli. Egy adott kiadás címkéjének kiválasztásához használja az Ágak vagy címkék közötti váltás legördülő listát. További információ: A ASP.NET Core-forráskód (dotnet/AspNetCore.Docs #26205) verziócímkéjének kiválasztása.

Továbbfejlesztett navigáció és űrlapkezelés letiltása

Ez a szakasz érvényes a Blazor Web Apps esetében.

A továbbfejlesztett navigáció és űrlapkezelés letiltásához állítsa be a disableDomPreservation értékét true-ra Blazor.start:

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

Az előző példában a {BLAZOR SCRIPT} helyőrző a Blazor szkript elérési útja és fájlneve. A szkript helyéről lásd ASP.NET Core Blazor projektstruktúra.

További erőforrások

• Környezetek: Az alkalmazás környezetének beállítása
• SignalR (az indítási konfiguráció szakaszait SignalR is tartalmazza)
• Globalizáció és honosítás: A kultúra Blazor.start() statikus beállítása (csak ügyféloldali)
• Blazor WebAssembly tömörítés