uruchamianie ASP.NET Core Blazor

Artykuł
09/23/2024

Uwaga

Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z bieżącą wersją, zapoznaj się z wersją tego artykułu platformy .NET 8.

Ostrzeżenie

Ta wersja ASP.NET Core nie jest już obsługiwana. Aby uzyskać więcej informacji, zobacz .NET i .NET Core Support Policy (Zasady obsługi platformy .NET Core). Aby zapoznać się z bieżącą wersją, zapoznaj się z wersją tego artykułu platformy .NET 8.

Ważne

Te informacje odnoszą się do produktu w wersji wstępnej, który może zostać znacząco zmodyfikowany, zanim zostanie wydany komercyjnie. Firma Microsoft nie udziela żadnych gwarancji, jawnych lub domniemanych, w odniesieniu do informacji podanych w tym miejscu.

Aby zapoznać się z bieżącą wersją, zapoznaj się z wersją tego artykułu platformy .NET 8.

W tym artykule opisano Blazor konfigurację uruchamiania aplikacji.

Aby uzyskać ogólne wskazówki dotyczące konfiguracji aplikacji ASP.NET Core na potrzeby tworzenia aplikacji po stronie serwera, zobacz Konfiguracja w programie ASP.NET Core.

Proces uruchamiania i konfiguracja

Proces uruchamiania Blazor jest automatyczny i asynchroniczny za pośrednictwem skryptu Blazor (blazor.*.js), gdzie * symbol zastępczy to:

web dla Blazor Web App
serverBlazor Server dla aplikacji
webassemblyBlazor WebAssembly dla aplikacji

Proces uruchamiania Blazor jest automatyczny i asynchroniczny za pośrednictwem skryptu Blazor (blazor.*.js), gdzie * symbol zastępczy to:

serverBlazor Server dla aplikacji
webassemblyBlazor WebAssembly dla aplikacji

Aby uzyskać informacje o lokalizacji skryptu, zobacz ASP.NET Core project structure (Struktura projektu ASP.NET CoreBlazor).

Aby ręcznie uruchomić program Blazor:

Blazor Web App:

autostart="false" Dodaj atrybut i wartość do taguBlazor<script>.
Umieść skrypt wywołujący Blazor.start() po tagu Blazor<script> i wewnątrz tagu zamykającego </body> .
Umieść opcje renderowania statycznego po stronie serwera (statyczne SSR) we ssr właściwości .
Umieść po stronie Blazorserwera —SignalR opcje obwodu circuit we właściwości .
Umieść opcje zestawu WebAssembly po stronie klienta we webAssembly właściwości .

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

Autonomiczne Blazor WebAssembly i Blazor Server:

autostart="false" Dodaj atrybut i wartość do taguBlazor<script>.
Umieść skrypt wywołujący Blazor.start() po tagu Blazor<script> i wewnątrz tagu zamykającego </body> .
Możesz podać dodatkowe opcje w parametrze Blazor.start() .

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

W poprzednim przykładzie {BLAZOR SCRIPT} symbol zastępczy to ścieżka skryptu Blazor i nazwa pliku. Aby uzyskać informacje o lokalizacji skryptu, zobacz ASP.NET Core project structure (Struktura projektu ASP.NET CoreBlazor).

Inicjatory języka JavaScript

Inicjatory języka JavaScript (JS) wykonują logikę przed załadowaniem aplikacji platformy Blazor i po nim. Inicjatory języka JS są przydatne w następujących scenariuszach:

Dostosowywanie sposobu ładowania aplikacji platformy Blazor.
Inicjowanie bibliotek przed uruchomieniem platformy Blazor.
Konfigurowanie ustawień platformy Blazor.

JS Inicjatory są wykrywane w ramach procesu kompilacji i importowane automatycznie. Użycie inicjatorów języka JS często eliminuje potrzebę ręcznego wyzwalania funkcji skryptu z aplikacji podczas korzystania z bibliotek klas Razor (RCL).

Aby zdefiniować inicjator języka JS, dodaj moduł języka JS do projektu o nazwie {NAME}.lib.module.js, gdzie symbol zastępczy {NAME} jest nazwą zestawu, nazwą biblioteki lub identyfikatorem pakietu. Umieść plik w katalogu głównym sieci Web projektu, który jest zazwyczaj folderem wwwroot.

Dla Blazor Web Apps:

beforeWebStart(options): wywoływana przed rozpoczęciem Blazor Web App . Na przykład beforeWebStart służy do dostosowywania procesu ładowania, poziomu rejestrowania i innych opcji. Blazor Odbiera opcje sieci Web (options).
afterWebStarted(blazor): Wywoływane po wszystkich beforeWebStart obietnicach rozwiąż. Na przykład afterWebStarted można użyć do rejestrowania Blazor odbiorników zdarzeń i niestandardowych typów zdarzeń. Wystąpienie Blazor jest przekazywane jako afterWebStarted argument (blazor).
beforeServerStart(options, extensions): wywoływana przed uruchomieniem pierwszego środowiska uruchomieniowego serwera. Odbiera SignalR opcje uruchamiania obwodu (options) i wszelkie rozszerzenia (extensions) dodane podczas publikowania.
afterServerStarted(blazor): wywoływany po uruchomieniu pierwszego środowiska uruchomieniowego interactive server.
beforeWebAssemblyStart(options, extensions): wywoływana przed uruchomieniem środowiska uruchomieniowego Interactive WebAssembly. Blazor Odbiera opcje (options) i wszelkie rozszerzenia (extensions) dodane podczas publikowania. Na przykład opcje mogą określać użycie niestandardowego modułu ładującego zasób rozruchowy.
afterWebAssemblyStarted(blazor): Wywoływana po uruchomieniu środowiska uruchomieniowego Interactive WebAssembly.

Uwaga

Starsze JS inicjatory (beforeStart, afterStarted) nie są domyślnie wywoływane w obiekcie Blazor Web App. Za pomocą enableClassicInitializers opcji możesz włączyć starsze inicjatory. Jednak starsze wykonywanie inicjatora jest nieprzewidywalne.

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

W przypadku Blazor Serveraplikacji , Blazor WebAssemblyi Blazor Hybrid :

beforeStart(options, extensions): Wywoływana przed uruchomieniem platformy Blazor. Na przykład funkcja beforeStart służy do dostosowywania procesu ładowania, poziomu rejestrowania i innych opcji specyficznych dla modelu hostingu.
- Po stronie beforeStart klienta są odbierane Blazor opcje (options) i wszelkie rozszerzenia (extensions) dodane podczas publikowania. Na przykład opcje mogą określać użycie niestandardowego modułu ładującego zasób rozruchowy.
- Po stronie beforeStart serwera odbiera SignalR opcje uruchamiania obwodu (options).
- W pliku BlazorWebViewnie są przekazywane żadne opcje.
afterStarted(blazor): Wywoływana po tym, jak platforma Blazor jest gotowa do odbierania wywołań z języka JS. Na przykład funkcja afterStarted jest używana do inicjowania bibliotek przez wykonywanie wywołań współdziałania języka JS i rejestrowanie elementów niestandardowych. Wystąpienie Blazor jest przekazywane jako afterStarted argument (blazor).

Dodatkowe wywołania zwrotne środowiska uruchomieniowego zestawu WebAssembly platformy .NET:

onRuntimeConfigLoaded(config): wywoływany po pobraniu konfiguracji rozruchu. Umożliwia aplikacji modyfikowanie parametrów (config) przed uruchomieniem środowiska uruchomieniowego (parametr pochodzi 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 }): Wywoływana po uruchomieniu środowiska uruchomieniowego zestawu webAssembly platformy .NET (parametr pochodzi RuntimeAPI z dotnet.d.tselementu ):

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

Oba wywołania zwrotne mogą zwrócić Promisewartość , a obietnica jest oczekiwana przed kontynuowaniem uruchamiania.

Jako nazwę pliku:

JS Jeśli inicjatory są używane jako element zawartości statycznej w projekcie, użyj formatu {ASSEMBLY NAME}.lib.module.js, gdzie {ASSEMBLY NAME} symbol zastępczy to nazwa zestawu aplikacji. Na przykład nadaj plikowi nazwę BlazorSample.lib.module.js w przypadku projektu z nazwą zestawu BlazorSample. Umieść plik w folderze wwwroot aplikacji.
JS Jeśli inicjatory są używane z listy RCL, użyj formatu {LIBRARY NAME/PACKAGE ID}.lib.module.js, gdzie {LIBRARY NAME/PACKAGE ID} symbol zastępczy jest nazwą biblioteki projektu lub identyfikatorem pakietu. Na przykład nadaj plikowi nazwę RazorClassLibrary1.lib.module.js w przypadku biblioteki RCL z identyfikatorem pakietu RazorClassLibrary1. Umieść plik w folderze biblioteki wwwroot.

Dla Blazor Web Apps:

W poniższym przykładzie pokazano JS inicjatory, które ładują niestandardowe skrypty przed rozpoczęciem i po Blazor Web App nim, dołączając je do <head> elementu in beforeWebStart i 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);
}

beforeWebStart Powyższy przykład gwarantuje, że skrypt niestandardowy ładuje się przed Blazor rozpoczęciem. Nie gwarantuje, że oczekujące obietnice w skrycie zakończą wykonywanie przed Blazor rozpoczęciem.

W przypadku Blazor Serveraplikacji , Blazor WebAssemblyi Blazor Hybrid :

W poniższym przykładzie pokazano JS inicjatory, które ładują niestandardowe skrypty przed rozpoczęciem i po Blazor nim, dołączając je do <head> elementu in beforeStart i 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);
}

beforeStart Powyższy przykład gwarantuje, że skrypt niestandardowy ładuje się przed Blazor rozpoczęciem. Nie gwarantuje, że oczekujące obietnice w skrycie zakończą wykonywanie przed Blazor rozpoczęciem.

Uwaga

Aplikacje MVC i Razor Pages nie ładują automatycznie inicjatorów języka JS. Jednak kod dewelopera może zawierać skrypt służący do pobierania manifestu aplikacji i wyzwalania obciążenia inicjatorów języka JS.

JS Przykłady inicjatorów można znaleźć w następujących zasobach:

ASP.NET Core Blazor JavaScript ze statycznym renderowaniem po stronie serwera (statycznym usługą SSR)
Używanie Razor składników w aplikacjach JavaScript i strukturach SPA (quoteContainer2 przykład)
obsługa zdarzeń ASP.NET Core Blazor (przykład zdarzenia wklejania niestandardowego schowka)
Włączanie generowania kodu QR dla aplikacji uwierzytelniającego TOTP w ASP.NET Core Blazor Web App
Podstawowa aplikacja testowa w repozytorium GitHub platformy ASP.NET Core (BasicTestApp.lib.module.js)

Używanie Razor składników w aplikacjach JavaScript i strukturach SPA (quoteContainer2 przykład)
obsługa zdarzeń ASP.NET Core Blazor (przykład zdarzenia wklejania niestandardowego schowka)
Układ wdrażania dla aplikacji hostowanych Blazor WebAssembly ASP.NET Core
Podstawowa aplikacja testowa w repozytorium GitHub platformy ASP.NET Core (BasicTestApp.lib.module.js)

Uwaga

Linki dokumentacji do źródła referencyjnego platformy .NET zwykle ładują domyślną gałąź repozytorium, która odzwierciedla bieżące programowanie dla następnej wersji platformy .NET. Aby wybrać tag dla określonej wersji, użyj listy rozwijanej Przełącz gałęzie lub tagi. Aby uzyskać więcej informacji, zobacz Jak wybrać tag wersji kodu źródłowego platformy ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Upewnij się, że biblioteki są ładowane w określonej kolejności

Dołącz skrypty niestandardowe do <head> elementu in beforeStart i afterStarted w kolejności, w której powinny zostać załadowane.

Poniższy przykład jest ładowany script1.js przed script2.js i script3.js przed 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);
}

Importowanie dodatkowych modułów

Użyj instrukcji najwyższego JS poziomu import w pliku inicjatorów, aby zaimportować dodatkowe moduły.

additionalModule.js:

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

JS W pliku inicjatorów (.lib.module.js):

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

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

  logMessage();
}

Importowanie mapy

Mapy importu są obsługiwane przez ASP.NET Core i Blazor.

Inicjowanie Blazor , gdy dokument jest gotowy

Poniższy przykład rozpoczyna się Blazor , gdy dokument jest gotowy:

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

Łączenie łańcucha z `Promise` wynikami z ręcznego uruchamiania

Aby wykonać dodatkowe zadania, takie jak JS inicjowanie międzyoperacyjne, użyj polecenia then , aby połączyć Promise je z wynikami z ręcznego Blazor uruchamiania aplikacji:

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

Uwaga

Aby biblioteka automatycznie wykonywała dodatkowe zadania po Blazor rozpoczęciu, użyj inicjatora języka JavaScript. JS Użycie inicjatora nie wymaga, aby odbiorca biblioteki łączyć JS wywołania Blazordo ręcznego uruchamiania.

Ładowanie zasobów rozruchowych po stronie klienta

Gdy aplikacja zostanie załadowana w przeglądarce, aplikacja pobiera zasoby rozruchowe z serwera:

Kod JavaScript do uruchamiania aplikacji
Środowisko uruchomieniowe i zestawy platformy .NET
Dane specyficzne dla ustawień regionalnych

Dostosuj sposób ładowania tych zasobów rozruchowych przy użyciu interfejsu loadBootResource API. Funkcja loadBootResource zastępuje wbudowany mechanizm ładowania zasobów rozruchowych. Użyj loadBootResource w następujących scenariuszach:

Załaduj zasoby statyczne, takie jak dane strefy czasowej lub dotnet.wasm, z sieci CDN.
Załaduj skompresowane zestawy przy użyciu żądania HTTP i zdekompresuj je na kliencie dla hostów, które nie obsługują pobierania skompresowanej zawartości z serwera.
Alias zasobów do innej nazwy, przekierowując każde fetch żądanie do nowej nazwy.

Uwaga

Źródła zewnętrzne muszą zwracać wymagane nagłówki współużytkowania zasobów między źródłami (CORS), aby przeglądarki zezwalały na ładowanie zasobów między źródłami. Sieci CDN zwykle udostępniają wymagane nagłówki.

loadBootResource parametry są wyświetlane w poniższej tabeli.

Parametr	Opis
`type`	Typ zasobu. Dozwolone typy obejmują: `assembly`, , `pdbdotnetjs`, `dotnetwasm`, i `timezonedata`. Wystarczy określić typy zachowań niestandardowych. Typy, do `loadBootResource` których nie określono, są ładowane przez strukturę zgodnie z ich domyślnymi zachowaniami ładowania. Zasób rozruchowy `dotnetjs` (`dotnet.*.js`) musi zwracać `null` domyślne zachowanie ładowania lub identyfikator URI źródła zasobu rozruchowego `dotnetjs` .
`name`	Nazwa zasobu.
`defaultUri`	Względny lub bezwzględny identyfikator URI zasobu.
`integrity`	Ciąg integralności reprezentujący oczekiwaną zawartość w odpowiedzi.

Funkcja loadBootResource może zwrócić ciąg identyfikatora URI, aby zastąpić proces ładowania. W poniższym przykładzie następujące pliki z bin/Release/{TARGET FRAMEWORK}/wwwroot/_framework usługi są obsługiwane z sieci CDN pod adresem https://cdn.example.com/blazorwebassembly/{VERSION}/:

dotnet.*.js
dotnet.wasm
Dane strefy czasowej

Symbol {TARGET FRAMEWORK} zastępczy to nazwa platformy docelowej (na przykład net7.0). Symbol {VERSION} zastępczy to wersja platformy udostępnionej (na przykład 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>

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

Aby dostosować więcej niż tylko adresy URL dla zasobów rozruchowych, loadBootResource funkcja może wywołać fetch bezpośrednio i zwrócić wynik. Poniższy przykład dodaje niestandardowy nagłówek HTTP do żądań wychodzących. Aby zachować domyślne zachowanie sprawdzania integralności, przekaż integrity parametr .

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>

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

loadBootResource Gdy funkcja zwraca nullwartość , Blazor używa domyślnego zachowania ładowania dla zasobu. Na przykład powyższy kod zwraca null zasób rozruchowy dotnetjs (dotnet.*.js), ponieważ dotnetjs zasób rozruchowy musi zwrócić null domyślne zachowanie ładowania lub identyfikator URI źródła zasobu rozruchowego dotnetjs .

Funkcja loadBootResource może również zwrócić obietnicęResponse. Aby zapoznać się z przykładem, zobacz Host and deploy ASP.NET Core ( Host and deploy ASP.NET Core Blazor WebAssembly).

Aby uzyskać więcej informacji, zobacz ASP.NET Core Blazor WebAssembly środowisko uruchomieniowe platformy .NET i buforowanie pakietów aplikacji.

Nagłówki kontrolek w kodzie języka C#

Steruj nagłówkami podczas uruchamiania w kodzie języka C#, korzystając z poniższych metod.

W poniższych przykładach zasady zabezpieczeń zawartości (CSP) są stosowane do aplikacji za pośrednictwem nagłówka CSP. Symbol {POLICY STRING} zastępczy to ciąg zasad dostawcy usług kryptograficznych.

Scenariusze po stronie serwera i wstępnie obsługiwane po stronie klienta

Użyj oprogramowania pośredniczącego ASP.NET Core, aby kontrolować kolekcję nagłówków.

W pliku Program:

W Startup.Configure pliku :Startup.cs

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

W poprzednim przykładzie użyto wbudowanego oprogramowania pośredniczącego, ale można również utworzyć niestandardową klasę oprogramowania pośredniczącego i wywołać oprogramowanie pośredniczące za pomocą metody rozszerzenia w Program pliku. Aby uzyskać więcej informacji, zobacz Pisanie niestandardowego oprogramowania pośredniczącego ASP.NET Core.

Programowanie po stronie klienta bez prerenderingu

Przekaż StaticFileOptions do MapFallbackToFile tego, który określa nagłówki odpowiedzi na OnPrepareResponse etapie.

W pliku po stronie Program serwera:

W Startup.Configure pliku :Startup.cs

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

...

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

Aby uzyskać więcej informacji na temat dostawców CSP, zobacz Wymuszanie zasad zabezpieczeń zawartości dla ASP.NET Core Blazor.

Wskaźniki postępu ładowania po stronie klienta

Wskaźnik postępu ładowania pokazuje postęp ładowania aplikacji dla użytkowników, wskazując, że aplikacja jest ładowana normalnie i że użytkownik powinien poczekać na zakończenie ładowania.

Blazor Web App postęp ładowania

Wskaźnik postępu ładowania używany w Blazor WebAssembly aplikacjach nie jest obecny w aplikacji utworzonej na podstawie szablonu Blazor Web App projektu. Zazwyczaj wskaźnik postępu ładowania nie jest pożądany w przypadku interaktywnych składników zestawu WebAssembly, ponieważ Blazor Web Appskładniki po stronie klienta prerender na serwerze na potrzeby szybkich początkowych czasów ładowania. W przypadku sytuacji trybu mieszanego renderowania struktura lub kod dewelopera muszą być również ostrożne, aby uniknąć następujących problemów:

Wyświetlanie wielu wskaźników ładowania na tej samej renderowanej stronie.
Przypadkowo odrzucanie wstępnie wstępnie obsługiwanej zawartości podczas ładowania środowiska uruchomieniowego zestawu WebAssembly platformy .NET.

Przyszłe wydanie platformy .NET może zapewnić oparty na strukturze wskaźnik postępu ładowania. W międzyczasie można dodać niestandardowy wskaźnik postępu ładowania do elementu Blazor Web App.

Utwórz składnik w .Client aplikacji, który wywołuje metodę :LoadingProgress OperatingSystem.IsBrowser

Gdy falseprogram wyświetla wskaźnik postępu ładowania podczas Blazor pobierania pakietu i przed Blazor aktywowaniem środowiska uruchomieniowego na kliencie.
Gdy trueprogram renderuje zawartość żądanego składnika.

W poniższej demonstracji użyto wskaźnika postępu ładowania znalezionego Blazor WebAssembly w aplikacjach utworzonych na podstawie szablonu, w tym modyfikacji stylów, które udostępnia szablon. Style są ładowane do zawartości aplikacji <head> przez HeadContent składnik. Aby uzyskać więcej informacji, zobacz Control head content in ASP.NET Core apps (Kontrolowanie zawartości głównej w aplikacjach platformy 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; }
}

W składniku, który przyjmuje renderowanie Interactive WebAssembly, opakowuje znaczniki składnika Razor za pomocą LoadingProgress składnika. W poniższym przykładzie pokazano podejście ze Counter składnikiem aplikacji utworzonej na podstawie szablonu Blazor Web App 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 postęp ładowania aplikacji

Szablon projektu zawiera wskaźniki skalowalnej grafiki wektorowej (SVG) i tekstowe, które pokazują postęp ładowania aplikacji.

Wskaźniki postępu są implementowane przy użyciu kodu HTML i CSS przy użyciu dwóch właściwości niestandardowych CSS (zmiennych) dostarczanych przez program Blazor:

--blazor-load-percentage: procent załadowanych plików aplikacji.
--blazor-load-percentage-text: procent załadowanych plików aplikacji zaokrąglony do najbliższej liczby całkowitej.

Korzystając z powyższych zmiennych CSS, można utworzyć niestandardowe wskaźniki postępu zgodne ze stylem aplikacji.

W poniższym przykładzie:

resourcesLoaded to natychmiastowa liczba zasobów załadowanych podczas uruchamiania aplikacji.
totalResources to całkowita liczba zasobów do załadowania.

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

Domyślny wskaźnik postępu rundy jest implementowany w kodzie HTML w wwwroot/index.html pliku:

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

Aby przejrzeć znaczniki i styl szablonu projektu dla domyślnych wskaźników postępu, zobacz źródło referencyjne ASP.NET Core:

Uwaga

Zamiast używać domyślnego wskaźnika postępu rundy, w poniższym przykładzie pokazano, jak zaimplementować liniowy wskaźnik postępu.

Dodaj następujące style do :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;
}

Zmienna CSS (var(...)) służy do przekazywania wartości --blazor-load-percentage do scale właściwości niebieskiego pseudo-elementu, który wskazuje postęp ładowania plików aplikacji. Podczas ładowania --blazor-load-percentage aplikacji jest automatycznie aktualizowana, co dynamicznie zmienia wizualną reprezentację wskaźnika postępu.

W wwwroot/index.htmlpliku usuń domyślny wskaźnik rundy SVG w <div id="app">...</div> pliku i zastąp go następującym znacznikiem:

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

Konfigurowanie środowiska uruchomieniowego zestawu WebAssembly platformy .NET

W zaawansowanych scenariuszach configureRuntime programowania funkcja z konstruktorem dotnet hosta środowiska uruchomieniowego służy do konfigurowania środowiska uruchomieniowego webAssembly platformy .NET. Na przykład dotnet.withEnvironmentVariable ustawia zmienną środowiskową, która:

Konfiguruje środowisko uruchomieniowe zestawu WebAssembly platformy .NET.
Zmienia zachowanie biblioteki języka C.

Uwaga

Żądanie dokumentacji oczekuje w dotnet/runtime repozytorium GitHub, aby uzyskać więcej informacji na temat zmiennych środowiskowych, które konfigurują środowisko uruchomieniowe zestawu WebAssembly platformy .NET lub wpływają na zachowanie bibliotek języka C. Mimo że żądanie dokumentacji oczekuje, więcej informacji i linków krzyżowych do dodatkowych zasobów jest dostępnych w żądaniu, pytanie/żądanie dokumentacji w środowisku uruchomieniowym WASM platformy .NET env vars (dotnet/runtime #98225).

Za configureRuntime pomocą funkcji można również włączyć integrację z profilerem przeglądarki.

Dla symboli zastępczych w następujących przykładach, które ustawiają zmienną środowiskową:

Symbol {BLAZOR SCRIPT} zastępczy to ścieżka skryptu Blazor i nazwa pliku. Aby uzyskać informacje o lokalizacji skryptu, zobacz ASP.NET Core project structure (Struktura projektu ASP.NET CoreBlazor).
Symbol {NAME} zastępczy to nazwa zmiennej środowiskowej.
Symbol {VALUE} zastępczy jest wartością zmiennej środowiskowej.

Blazor Web App:

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

Autonomiczny zestaw Blazor WebAssembly:

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

Uwaga

Dostęp do wystąpienia środowiska uruchomieniowego platformy .NET można uzyskać przy użyciu interfejsu API środowiska uruchomieniowego zestawu webassembly platformy .NET (Blazor.runtime). Na przykład konfigurację kompilacji aplikacji można uzyskać przy użyciu polecenia Blazor.runtime.runtimeBuildInfo.buildConfiguration.

Aby uzyskać więcej informacji na temat konfiguracji środowiska uruchomieniowego zestawu webAssembly platformy .NET, zobacz plik definicji TypeScript środowiska uruchomieniowego (dotnet.d.ts) w dotnet/runtime repozytorium GitHub.

Uwaga

Ta sekcja dotyczy s Blazor Web App.

Aby wyłączyć rozszerzoną nawigację i obsługę formularzy, ustaw wartość true dla elementu disableDomPreservation Blazor.start:

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

Udostępnij za pośrednictwem

uruchamianie ASP.NET Core Blazor

Proces uruchamiania i konfiguracja

Inicjatory języka JavaScript

Upewnij się, że biblioteki są ładowane w określonej kolejności

Importowanie dodatkowych modułów

Importowanie mapy

Inicjowanie Blazor , gdy dokument jest gotowy

Łączenie łańcucha z `Promise` wynikami z ręcznego uruchamiania

Ładowanie zasobów rozruchowych po stronie klienta

Nagłówki kontrolek w kodzie języka C#

Scenariusze po stronie serwera i wstępnie obsługiwane po stronie klienta

Programowanie po stronie klienta bez prerenderingu

Wskaźniki postępu ładowania po stronie klienta

Blazor Web App postęp ładowania

Blazor WebAssembly postęp ładowania aplikacji

Konfigurowanie środowiska uruchomieniowego zestawu WebAssembly platformy .NET

Wyłączanie rozszerzonej nawigacji i obsługi formularzy

Dodatkowe zasoby

Dodatkowe zasoby

Udostępnij za pośrednictwem

uruchamianie ASP.NET Core Blazor

Proces uruchamiania i konfiguracja

Inicjatory języka JavaScript

Upewnij się, że biblioteki są ładowane w określonej kolejności

Importowanie dodatkowych modułów

Importowanie mapy

Inicjowanie Blazor , gdy dokument jest gotowy

Łączenie łańcucha z Promise wynikami z ręcznego uruchamiania

Ładowanie zasobów rozruchowych po stronie klienta

Nagłówki kontrolek w kodzie języka C#

Scenariusze po stronie serwera i wstępnie obsługiwane po stronie klienta

Programowanie po stronie klienta bez prerenderingu

Wskaźniki postępu ładowania po stronie klienta

Blazor Web App postęp ładowania

Blazor WebAssembly postęp ładowania aplikacji

Konfigurowanie środowiska uruchomieniowego zestawu WebAssembly platformy .NET

Wyłączanie rozszerzonej nawigacji i obsługi formularzy

Dodatkowe zasoby

Dodatkowe zasoby

Łączenie łańcucha z `Promise` wynikami z ręcznego uruchamiania