startup ASP.NET Core Blazor

Artikel ini menjelaskan Blazor konfigurasi startup aplikasi.

Untuk panduan umum tentang konfigurasi aplikasi ASP.NET Core untuk pengembangan sisi server, lihat Konfigurasi di ASP.NET Core.

Proses dan konfigurasi startup

Proses Blazor startup bersifat otomatis dan asinkron melalui Blazor skrip (blazor.*.js), di mana * tempat penampung adalah:

• web untuk Blazor Web App
• serverBlazor Server untuk aplikasi
• webassemblyBlazor WebAssembly untuk aplikasi

Untuk lokasi skrip, lihat struktur proyek ASP.NET CoreBlazor.

Untuk memulai Blazorsecara manual :

Blazor Web App:

• autostart="false" Tambahkan atribut dan nilai ke Blazor<script> tag.
• Tempatkan skrip yang memanggil Blazor.start() setelah Blazor<script> tag dan di dalam tag penutup </body> .
• Tempatkan opsi penyajian sisi server statis (SSR statis) di ssr properti .
• Tempatkan sisi Blazorserver -SignalR opsi sirkuit di circuit properti .
• Tempatkan opsi WebAssembly sisi klien di webAssembly properti .

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

Blazor WebAssembly Mandiri dan Blazor Server:

• autostart="false" Tambahkan atribut dan nilai ke Blazor<script> tag.
• Tempatkan skrip yang memanggil Blazor.start() setelah Blazor<script> tag dan di dalam tag penutup </body> .
• Anda dapat memberikan opsi tambahan dalam Blazor.start() parameter .

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

Dalam contoh sebelumnya, {BLAZOR SCRIPT} tempat penampung adalah Blazor jalur skrip dan nama file. Untuk lokasi skrip, lihat struktur proyek ASP.NET CoreBlazor.

Penginisialisasi JavaScript

Penginisialisasi JavaScript (JS) menjalankan logika sebelum dan setelah aplikasi Blazor dimuat. Penginisialisasi JS berguna dalam skenario berikut:

• Menyesuaikan cara aplikasi Blazor dimuat.
• Menginisialisasi pustaka sebelum Blazor dimulai.
• Mengonfigurasi pengaturan Blazor.

JS penginisialisasi terdeteksi sebagai bagian dari proses build dan diimpor secara otomatis. Penggunaan penginisialisasi JS sering kali menghilangkan kebutuhan untuk memicu fungsi skrip secara manual dari aplikasi saat menggunakan pustaka kelas (RCL) Razor.

Untuk menentukan penginisialisasi JS, tambahkan modul JS ke proyek bernama {NAME}.lib.module.js, dengan tempat penampung {NAME} merupakan nama rakitan, nama pustaka, atau pengidentifikasi paket. Tempatkan file di akar web proyek, yang biasanya berupa folder wwwroot.

Untuk Blazor Web App:

• beforeWebStart(options): Dipanggil sebelum dimulai Blazor Web App . Misalnya, beforeWebStart digunakan untuk menyesuaikan proses pemuatan, tingkat pengelogan, dan opsi lainnya. Blazor Menerima opsi Web (options).
• afterWebStarted(blazor): Dipanggil setelah semua beforeWebStart janji diselesaikan. Misalnya, afterWebStarted dapat digunakan untuk mendaftarkan Blazor pendengar peristiwa dan jenis peristiwa kustom. Blazor Instans diteruskan ke afterWebStarted sebagai argumen (blazor).
• beforeServerStart(options, extensions): Dipanggil sebelum runtime Server pertama dimulai. SignalR Menerima opsi mulai sirkuit (options) dan ekstensi apa pun (extensions) yang ditambahkan selama penerbitan.
• afterServerStarted(blazor): Dipanggil setelah runtime Server Interaktif pertama dimulai.
• beforeWebAssemblyStart(options, extensions): Dipanggil sebelum runtime Interactive WebAssembly dimulai. Blazor Menerima opsi (options) dan ekstensi apa pun (extensions) yang ditambahkan selama penerbitan. Misalnya, opsi dapat menentukan penggunaan pemuat sumber daya boot kustom.
• afterWebAssemblyStarted(blazor): Dipanggil setelah runtime Interactive WebAssembly dimulai.

Catatan

Inisialisasi warisan JS (beforeStart, afterStarted) tidak dipanggil secara default dalam Blazor Web App. Anda dapat mengaktifkan penginisialisasi warisan untuk dijalankan dengan enableClassicInitializers opsi . Namun, eksekusi inisialisasi warisan tidak dapat diprediksi.

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

Untuk Blazor Serveraplikasi , Blazor WebAssembly, dan Blazor Hybrid :

• beforeStart(options, extensions): Dipanggil sebelum Blazor dimulai. Misalnya, beforeStart digunakan untuk menyesuaikan proses pemuatan, tingkat pengelogan, dan opsi lain yang spesifik untuk model hosting.
  • Sisi klien, beforeStart menerima opsi (options) dan ekstensi apa pun (extensions) yang ditambahkan Blazor selama penerbitan. Misalnya, opsi dapat menentukan penggunaan pemuat sumber daya boot kustom.
  • Sisi server, beforeStart menerima SignalR opsi mulai sirkuit (options).
  • BlazorWebViewDalam , tidak ada opsi yang diteruskan.
• afterStarted(blazor): Dipanggil setelah Blazor siap menerima panggilan dari JS. Misalnya, afterStarted digunakan untuk menginisialisasi pustaka dengan melakukan panggilan interop JS dan mendaftarkan elemen kustom. Blazor Instans diteruskan ke afterStarted sebagai argumen (blazor).

Panggilan balik runtime .NET WebAssembly tambahan:

• onRuntimeConfigLoaded(config): Dipanggil saat konfigurasi boot diunduh. Memungkinkan aplikasi untuk memodifikasi parameter (konfigurasi) sebelum runtime dimulai (parameter berasal MonoConfig dari 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 }): Dipanggil setelah runtime .NET WebAssembly dimulai (parameternya adalah RuntimeAPI dari 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();
  }
  

Kedua panggilan balik dapat mengembalikan Promise, dan janji ditunggu sebelum startup berlanjut.

Untuk nama file:

• Jika penginisialisasi JS digunakan sebagai aset statis dalam proyek, gunakan format {ASSEMBLY NAME}.lib.module.js, di mana {ASSEMBLY NAME} tempat penampung adalah nama rakitan aplikasi. Misalnya, beri nama file BlazorSample.lib.module.js untuk proyek dengan nama rakitan BlazorSample. Tempatkan file di folder wwwroot aplikasi.
• Jika penginisialisasi JS digunakan dari RCL, gunakan format {LIBRARY NAME/PACKAGE ID}.lib.module.js, di mana {LIBRARY NAME/PACKAGE ID} tempat penampung adalah nama pustaka proyek atau pengidentifikasi paket. Misalnya, beri nama file RazorClassLibrary1.lib.module.js untuk RCL dengan pengidentifikasi paket RazorClassLibrary1. Tempatkan file di folder wwwroot pustaka.

Untuk Blazor Web App:

Contoh berikut menunjukkan JS penginisialisasi yang memuat skrip kustom sebelum dan sesudah Blazor Web App dimulai dengan menambahkannya ke <head> dalam beforeWebStart dan 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);
}

Contoh sebelumnya beforeWebStart hanya menjamin bahwa skrip kustom dimuat sebelum Blazor dimulai. Ini tidak menjamin bahwa janji yang ditunggu dalam skrip menyelesaikan eksekusi mereka sebelum Blazor dimulai.

Untuk Blazor Serveraplikasi , Blazor WebAssembly, dan Blazor Hybrid :

Contoh berikut menunjukkan JS penginisialisasi yang memuat skrip kustom sebelum dan sesudah Blazor telah dimulai dengan menambahkannya ke <head> dalam beforeStart dan 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);
}

Contoh sebelumnya beforeStart hanya menjamin bahwa skrip kustom dimuat sebelum Blazor dimulai. Ini tidak menjamin bahwa janji yang ditunggu dalam skrip menyelesaikan eksekusi mereka sebelum Blazor dimulai.

Catatan

MVC dan Aplikasi Halaman Razor tidak memuat penginisialisasi JS secara otomatis. Namun, kode pengembang dapat menyertakan skrip untuk mengambil manifes aplikasi dan memicu pemuatan penginisialisasi JS.

Untuk contoh JS penginisialisasi, lihat sumber daya berikut:

• ASP.NET Core Blazor JavaScript dengan penyajian sisi server statis (SSR statis)
• Menggunakan Razor komponen dalam aplikasi JavaScript dan kerangka kerja SPA (quoteContainer2 contoh)
• penanganan peristiwa ASP.NET Core Blazor (Contoh peristiwa tempel clipboard kustom)
• Mengaktifkan pembuatan kode QR untuk aplikasi pengautentikasi TOTP di ASP.NET Core Blazor Web App
• Aplikasi Pengujian Dasar di repositori ASP.NET Core GitHub (BasicTestApp.lib.module.js)

Catatan

Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag rilis tertentu, gunakan daftar dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Pastikan pustaka dimuat dalam urutan tertentu

Tambahkan skrip kustom ke <head> dalam beforeStart dan afterStarted dalam urutan yang harus dimuat.

Contoh berikut dimuat script1.js sebelum script2.js dan script3.js sebelum 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);
}

Mengimpor modul tambahan

Gunakan pernyataan tingkat import atas dalam JS file penginisialisasi untuk mengimpor modul tambahan.

additionalModule.js:

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

JS Dalam file penginisialisasi (.lib.module.js):

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

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

  logMessage();
}

Impor peta

Peta impor didukung oleh ASP.NET Core dan Blazor.

Inisialisasi Blazor ketika dokumen siap

Contoh berikut dimulai Blazor ketika dokumen siap:

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

Dalam contoh sebelumnya, {BLAZOR SCRIPT} tempat penampung adalah Blazor jalur skrip dan nama file. Untuk lokasi skrip, lihat struktur proyek ASP.NET CoreBlazor.

Rantai ke hasil tersebut Promise dari awal manual

Untuk melakukan tugas tambahan, seperti JS inisialisasi interop, gunakan then untuk menautkan ke hasil tersebut Promise dari mulai aplikasi manual Blazor :

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

Dalam contoh sebelumnya, {BLAZOR SCRIPT} tempat penampung adalah Blazor jalur skrip dan nama file. Untuk lokasi skrip, lihat struktur proyek ASP.NET CoreBlazor.

Catatan

Agar pustaka dapat menjalankan tugas tambahan secara otomatis setelah Blazor dimulai, gunakan penginisialisasi JavaScript. Penggunaan penginisialisasi JS tidak mengharuskan konsumen pustaka untuk menautkan JS panggilan ke Blazorawal manual.

Memuat sumber daya boot sisi klien

Saat aplikasi dimuat di browser, aplikasi mengunduh sumber daya boot dari server:

• Kode JavaScript untuk bootstrap aplikasi
• Runtime dan rakitan .NET
• Lokalkan data tertentu

Sesuaikan bagaimana sumber daya boot ini dimuat menggunakan loadBootResource API. Fungsi ini loadBootResource mengambil alih mekanisme pemuatan sumber daya boot bawaan. Gunakan loadBootResource untuk skenario berikut:

• Muat sumber daya statis, seperti data zona waktu atau dotnet.wasm, dari CDN.
• Muat rakitan terkompresi menggunakan permintaan HTTP dan dekompresi pada klien untuk host yang tidak mendukung pengambilan konten terkompresi dari server.
• Sumber daya alias ke nama yang berbeda dengan mengalihkan setiap fetch permintaan ke nama baru.

Catatan

Sumber eksternal harus mengembalikan header Cross-Origin Resource Sharing (CORS) yang diperlukan untuk browser untuk memungkinkan pemuatan sumber daya lintas asal. CDN biasanya menyediakan header yang diperlukan.

loadBootResource parameter muncul dalam tabel berikut.

Parameter	Deskripsi
type	Jenis sumber daya. Jenis yang diizinkan meliputi: assembly, , pdb, dotnetjs, dotnetwasmdan timezonedata. Anda hanya perlu menentukan jenis untuk perilaku kustom. Jenis yang tidak ditentukan untuk loadBootResource dimuat oleh kerangka kerja sesuai perilaku pemuatan defaultnya. Sumber dotnetjs daya boot (dotnet.*.js) harus kembali null untuk perilaku pemuatan default atau URI untuk sumber dotnetjs daya boot.
name	Nama sumber daya.
defaultUri	URI relatif atau absolut sumber daya.
integrity	String integritas yang mewakili konten yang diharapkan dalam respons.

Fungsi loadBootResource ini dapat mengembalikan string URI untuk mengambil alih proses pemuatan. Dalam contoh berikut, file berikut dari bin/Release/{TARGET FRAMEWORK}/wwwroot/_framework disajikan dari CDN di https://cdn.example.com/blazorwebassembly/{VERSION}/:

• dotnet.*.js
• dotnet.wasm
• Data zona waktu

Tempat {TARGET FRAMEWORK} penampung adalah moniker kerangka kerja target (misalnya, net7.0). Tempat {VERSION} penampung adalah versi kerangka kerja bersama (misalnya, 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>

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

Dalam contoh sebelumnya, {BLAZOR SCRIPT} tempat penampung adalah Blazor jalur skrip dan nama file. Untuk lokasi skrip, lihat struktur proyek ASP.NET CoreBlazor.

Untuk menyesuaikan lebih dari sekadar URL untuk sumber daya boot, loadBootResource fungsi dapat memanggil fetch secara langsung dan mengembalikan hasilnya. Contoh berikut menambahkan header HTTP kustom ke permintaan keluar. Untuk mempertahankan perilaku pemeriksaan integritas default, lewati integrity parameter .

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>

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

Dalam contoh sebelumnya, {BLAZOR SCRIPT} tempat penampung adalah Blazor jalur skrip dan nama file. Untuk lokasi skrip, lihat struktur proyek ASP.NET CoreBlazor.

loadBootResource Saat fungsi mengembalikan null, Blazor menggunakan perilaku pemuatan default untuk sumber daya. Misalnya, kode sebelumnya kembali null untuk dotnetjs sumber daya boot (dotnet.*.js) karena dotnetjs sumber daya boot harus kembali null untuk perilaku pemuatan default atau URI untuk sumber dotnetjs daya boot.

Fungsi ini loadBootResource juga dapat mengembalikan Response janji. Misalnya, lihat Host dan sebarkan ASP.NET Core Blazor WebAssembly.

Untuk informasi selengkapnya, lihat ASP.NET runtime Core Blazor WebAssembly .NET dan penembolokan bundel aplikasi.

Mengontrol header dalam kode C#

Kontrol header saat startup dalam kode C# menggunakan pendekatan berikut.

Dalam contoh berikut, Kebijakan Keamanan Konten (CSP) diterapkan ke aplikasi melalui header CSP. Tempat {POLICY STRING} penampung adalah string kebijakan CSP.

Skenario sisi server dan sisi klien yang telah dirender sebelumnya

Gunakan ASP.NET Core Middleware untuk mengontrol koleksi header.

Dalam file Program:

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

Contoh sebelumnya menggunakan middleware sebaris, tetapi Anda juga dapat membuat kelas middleware kustom dan memanggil middleware dengan metode ekstensi dalam Program file. Untuk informasi selengkapnya, lihat Menulis middleware ASP.NET Core kustom.

Untuk informasi selengkapnya tentang CSP, lihat Menerapkan Kebijakan Keamanan Konten untuk ASP.NET Core Blazor.

Indikator kemajuan pemuatan sisi klien

Indikator kemajuan pemuatan menunjukkan kemajuan pemuatan aplikasi kepada pengguna, menunjukkan bahwa aplikasi dimuat secara normal dan bahwa pengguna harus menunggu hingga pemuatan selesai.

Blazor Web App kemajuan pemuatan

Indikator kemajuan pemuatan yang digunakan dalam Blazor WebAssembly aplikasi tidak ada di aplikasi yang dibuat dari Blazor Web App templat proyek. Biasanya, indikator kemajuan pemuatan tidak diinginkan untuk komponen WebAssembly interaktif karena Blazor Web Appkomponen sisi klien prerender di server untuk waktu muat awal yang cepat. Untuk situasi mode mixed-render, kerangka kerja atau kode pengembang juga harus berhati-hati untuk menghindari masalah berikut:

• Memperlihatkan beberapa indikator pemuatan pada halaman yang dirender yang sama.
• Secara tidak sengaja membuang konten yang telah dirender sebelumnya saat runtime .NET WebAssembly sedang dimuat.

Rilis .NET di masa mendatang mungkin menyediakan indikator kemajuan pemuatan berbasis kerangka kerja. Sementara itu, Anda dapat menambahkan indikator kemajuan pemuatan kustom ke Blazor Web App.

Buat LoadingProgress komponen di .Client aplikasi yang memanggil OperatingSystem.IsBrowser:

• Saat false, tampilkan indikator kemajuan pemuatan saat Blazor bundel diunduh dan sebelum Blazor runtime diaktifkan pada klien.
• Saat true, render konten komponen yang diminta.

Demonstrasi berikut menggunakan indikator kemajuan pemuatan yang ditemukan di aplikasi yang dibuat dari Blazor WebAssembly templat, termasuk modifikasi gaya yang disediakan templat. Gaya dimuat ke dalam konten aplikasi <head> oleh HeadContent komponen. Untuk informasi selengkapnya, lihat Mengontrol konten head di aplikasi 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; }
}

Dalam komponen yang mengadopsi rendering Interactive WebAssembly, bungkus markup komponen Razor dengan LoadingProgress komponen . Contoh berikut menunjukkan pendekatan dengan Counter komponen aplikasi yang dibuat dari Blazor Web App templat proyek.

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 kemajuan pemuatan aplikasi

Templat proyek berisi indikator Grafik Vektor (SVG) dan teks yang dapat diskalakan yang menunjukkan kemajuan pemuatan aplikasi.

Indikator kemajuan diimplementasikan dengan HTML dan CSS menggunakan dua properti kustom (variabel) CSS yang disediakan oleh Blazor:

• --blazor-load-percentage: Persentase file aplikasi yang dimuat.
• --blazor-load-percentage-text: Persentase file aplikasi yang dimuat, dibulatkan ke bilangan bulat terdekat.

Dengan menggunakan variabel CSS sebelumnya, Anda dapat membuat indikator kemajuan kustom yang cocok dengan gaya aplikasi Anda.

Dalam contoh berikut:

• resourcesLoaded adalah jumlah seketika dari sumber daya yang dimuat selama pengaktifan aplikasi.
• totalResources adalah jumlah total sumber daya yang akan dimuat.

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

Indikator kemajuan putaran default diimplementasikan dalam HTML dalam wwwroot/index.html file:

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

Untuk meninjau markup dan gaya templat proyek untuk indikator kemajuan default, lihat sumber referensi ASP.NET Core:

• wwwroot/index.html
• app.css

Catatan

Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag rilis tertentu, gunakan daftar dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Alih-alih menggunakan indikator kemajuan putaran default, contoh berikut menunjukkan cara mengimplementasikan indikator kemajuan linier.

Tambahkan gaya berikut ke 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;
}

Variabel CSS (var(...)) digunakan untuk meneruskan nilai --blazor-load-percentage ke scale properti elemen pseudo biru yang menunjukkan kemajuan pemuatan file aplikasi. Saat aplikasi dimuat, --blazor-load-percentage diperbarui secara otomatis, yang secara dinamis mengubah representasi visual indikator kemajuan.

Di wwwroot/index.html, hapus indikator putaran SVG default di <div id="app">...</div> dan ganti dengan markup berikut:

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

Mengonfigurasi runtime .NET WebAssembly

Dalam skenario pemrograman tingkat lanjut, configureRuntime fungsi dengan dotnet pembangun host runtime digunakan untuk mengonfigurasi runtime .NET WebAssembly. Misalnya, dotnet.withEnvironmentVariable mengatur variabel lingkungan yang:

• Mengonfigurasi runtime .NET WebAssembly.
• Mengubah perilaku pustaka C.

Catatan

Permintaan dokumentasi tertunda di dotnet/runtime repositori GitHub untuk informasi selengkapnya tentang variabel lingkungan yang mengonfigurasi runtime .NET WebAssembly atau memengaruhi perilaku pustaka C. Meskipun permintaan dokumentasi tertunda, informasi lebih lanjut dan tautan silang ke sumber daya tambahan tersedia dalam permintaan, Pertanyaan/permintaan untuk dokumentasi pada runtime .NET WASM env vars (dotnet/runtime #98225).

Fungsi ini configureRuntime juga dapat digunakan untuk mengaktifkan integrasi dengan profiler browser.

Untuk tempat penampung dalam contoh berikut yang mengatur variabel lingkungan:

• Tempat {BLAZOR SCRIPT} penampung adalah Blazor jalur skrip dan nama file. Untuk lokasi skrip, lihat struktur proyek ASP.NET CoreBlazor.
• Tempat {NAME} penampung adalah nama variabel lingkungan.
• Tempat {VALUE} penampung adalah nilai variabel lingkungan.

Blazor Web App:

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

Mandiri Blazor WebAssembly:

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

Catatan

Instans runtime .NET dapat diakses menggunakan .NET WebAssembly Runtime API (Blazor.runtime). Misalnya, konfigurasi build aplikasi dapat diperoleh menggunakan Blazor.runtime.runtimeBuildInfo.buildConfiguration.

Untuk informasi selengkapnya tentang konfigurasi runtime .NET WebAssembly, lihat file definisi TypeScript runtime (dotnet.d.ts) di dotnet/runtime repositori GitHub.

Catatan

Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag rilis tertentu, gunakan daftar dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Menonaktifkan navigasi dan penanganan formulir yang disempurnakan

Bagian ini berlaku untuk Blazor Web Apps.

Untuk menonaktifkan navigasi dan penanganan formulir yang disempurnakan, atur disableDomPreservation ke true untuk Blazor.start:

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

Dalam contoh sebelumnya, {BLAZOR SCRIPT} tempat penampung adalah Blazor jalur skrip dan nama file. Untuk lokasi skrip, lihat struktur proyek ASP.NET CoreBlazor.

Sumber Daya Tambahan:

• Lingkungan: Mengatur lingkungan aplikasi
• SignalR (termasuk bagian pada SignalR konfigurasi startup)
• Globalisasi dan pelokalan: Secara statis mengatur budaya dengan Blazor.start() (hanya sisi klien)
• Host dan sebarkan: Blazor WebAssembly: Kompresi