Share via

Beberapa aplikasi ASP.NET Core Blazor WebAssembly yang dihosting

  • Artikel

Catatan

Ini bukan versi terbaru dari artikel ini. Untuk versi terbaru artikel ini, lihat versi .NET 7.

Artikel ini menjelaskan cara mengonfigurasi aplikasi yang dihosting untuk menghosting Blazor WebAssembly beberapa Blazor WebAssembly aplikasi.

Konfigurasi

Pilih versi artikel ini yang cocok dengan persyaratan hosting Anda, baik hosting port/domain (misalnya, :5001/:5002 atau firstapp.comsecondapp.com/) atau hosting subpath rute (misalnya, /FirstApp dan )./SecondApp

Dengan pilihan hosting saat ini, artikel ini mencakup hosting port/domain (misalnya, :5001/:5002 atau ).firstapp.com/secondapp.com

Dalam contoh berikut:

  • Nama proyek aplikasi yang dihosting Blazor WebAssembly ada MultipleBlazorApps di folder bernama MultipleBlazorApps.
  • Tiga proyek dalam solusi sebelum aplikasi klien kedua ditambahkan ada MultipleBlazorApps.Client di Client folder , MultipleBlazorApps.Server di Server folder , dan MultipleBlazorApps.Shared di Shared folder .
  • Aplikasi klien awal (pertama) adalah proyek klien default dari solusi yang dibuat dari Blazor WebAssembly templat proyek.
  • Aplikasi klien kedua ditambahkan ke solusi, MultipleBlazorApps.SecondClient di folder bernama SecondClient.
  • Secara opsional, proyek server (MultipleBlazorApps.Server) dapat melayani halaman atau tampilan sebagai Razor halaman atau aplikasi MVC.
  • Aplikasi klien pertama dapat diakses di browser di port 5001 atau dengan sejumlah firstapp.com. Aplikasi klien kedua dapat diakses di browser di port 5002 atau dengan sejumlah secondapp.com.

Dengan pilihan saat ini, artikel ini membahas hosting subpath rute (misalnya, /FirstApp dan /SecondApp).

Dalam contoh berikut:

  • Nama proyek aplikasi yang dihosting Blazor WebAssembly ada MultipleBlazorApps di folder bernama MultipleBlazorApps.
  • Tiga proyek dalam solusi sebelum aplikasi klien kedua ditambahkan ada MultipleBlazorApps.Client di Client folder , MultipleBlazorApps.Server di Server folder , dan MultipleBlazorApps.Shared di Shared folder .
  • Aplikasi klien awal (pertama) adalah proyek klien default dari solusi yang dibuat dari Blazor WebAssembly templat proyek.
  • Aplikasi klien kedua ditambahkan ke solusi, MultipleBlazorApps.SecondClient di folder bernama SecondClient.
  • Secara opsional, proyek server (MultipleBlazorApps.Server) dapat melayani halaman atau tampilan sebagai Halaman formal Razor atau aplikasi MVC.
  • Kedua aplikasi klien menggunakan port default yang ditentukan oleh MultipleBlazorApps.Server file proyek Properties/launchSettings.json dalam nilainya applicationUrl . Aplikasi klien pertama dapat diakses di browser di /FirstApp subpath. Aplikasi klien kedua dapat diakses di browser di /SecondApp subpath.

Contoh yang ditunjukkan dalam artikel ini memerlukan konfigurasi tambahan untuk:

  • Mengakses aplikasi langsung di contoh domain host, firstapp.com dan secondapp.com.
  • Sertifikat untuk aplikasi klien untuk mengaktifkan keamanan TLS/HTTPS.
  • Mengonfigurasi aplikasi server sebagai Razor aplikasi Pages untuk fitur berikut:
    • Razor Integrasi komponen ke dalam halaman atau tampilan.
    • Komponen pra-penyajian Razor .

Konfigurasi sebelumnya berada di luar cakupan artikel ini. Untuk informasi selengkapnya, lihat sumber daya berikut:

Gunakan solusi yang dihosting Blazor WebAssemblyyang ada atau buat solusi baru yang dihosting Blazor WebAssembly-ho|--hosted dari Blazor WebAssembly templat proyek dengan meneruskan opsi jika menggunakan .NET CLI atau memilih kotak centang ASP.NET Core Hosted di Visual Studio saat proyek dibuat di IDE.

Gunakan folder untuk solusi bernama MultipleBlazorApps dan beri nama proyek MultipleBlazorApps.

Buat folder baru dalam solusi bernama SecondClient. Di folder baru, tambahkan aplikasi klien kedua Blazor WebAssembly bernama MultipleBlazorApps.SecondClient. Tambahkan proyek sebagai aplikasi mandiri Blazor WebAssembly . Untuk membuat aplikasi mandiri Blazor WebAssembly , jangan berikan -ho|--hosted opsi jika menggunakan .NET CLI atau jangan gunakan kotak centang ASP.NET Core Hosted jika menggunakan Visual Studio.

Buat perubahan berikut pada MultipleBlazorApps.SecondClient proyek:

  • FetchData Salin komponen (Pages/FetchData.razor) dari Client/Pages folder ke SecondClient/Pages folder . Langkah ini diperlukan karena aplikasi mandiri Blazor WebAssembly tidak memanggil Server pengontrol proyek untuk data cuaca, aplikasi ini menggunakan file data statis. Dengan menyalin FetchData komponen ke proyek yang ditambahkan, aplikasi klien kedua juga melakukan panggilan API web ke API server untuk data cuaca.
  • SecondClient/wwwroot/sample-data Hapus folder, karena weather.json file di folder tidak digunakan.

Tabel berikut ini menjelaskan folder solusi dan nama proyek setelah SecondClient folder dan MultipleBlazorApps.SecondClient proyek ditambahkan.

Folder fisik Nama proyek Deskripsi
Client MultipleBlazorApps.Client Blazor WebAssembly aplikasi klien
SecondClient MultipleBlazorApps.SecondClient Blazor WebAssembly aplikasi klien
Server MultipleBlazorApps.Server aplikasi server ASP.NET Core
Shared MultipleBlazorApps.Shared Proyek sumber daya bersama

Proyek ini MultipleBlazorApps.Server melayani dua Blazor WebAssembly aplikasi klien dan menyediakan data cuaca ke komponen aplikasi FetchData klien melalui pengontrol MVC. Secara opsional, MultipleBlazorApps.Server proyek juga dapat melayani halaman atau tampilan, sebagai halaman tradisional Razor atau aplikasi MVC. Langkah-langkah untuk mengaktifkan halaman atau tampilan penyajian dibahas nanti dalam artikel ini.

Catatan

Demonstrasi dalam artikel ini menggunakan nama FirstApp jalur aset web statis untuk MultipleBlazorApps.Client proyek dan SecondApp untuk MultipleBlazorApps.SecondClient proyek. Nama "FirstApp" dan "SecondApp" hanya untuk tujuan demonstrasi. Nama lain dapat diterima untuk membedakan aplikasi klien, seperti App1/App2, ,Client22Client1/1/ , atau skema penamaan serupa.

Saat merutekan permintaan ke aplikasi klien oleh port atau domain, "FirstApp" dan "SecondApp" digunakan secara internal untuk merutekan permintaan dan melayani respons untuk aset statis dan tidak terlihat di bilah alamat browser.

Catatan

Demonstrasi dalam artikel ini menggunakan nama FirstApp jalur aset web statis untuk MultipleBlazorApps.Client proyek dan SecondApp untuk MultipleBlazorApps.SecondClient proyek. Nama "FirstApp" dan "SecondApp" hanya untuk tujuan demonstrasi. Nama lain dapat diterima untuk membedakan aplikasi klien, seperti App1/App2, ,Client22Client1/1/ , atau skema penamaan serupa.

"FirstApp" dan "SecondApp" juga muncul di bilah alamat browser karena permintaan dirutekan ke dua aplikasi klien menggunakan nama ini. Segmen rute URL valid lainnya didukung, dan segmen rute tidak perlu mencocokkan nama yang digunakan untuk merutekan aset web statis secara internal. Menggunakan "FirstApp" dan "SecondApp" untuk perutean aset statis internal dan perutean permintaan aplikasi hanya untuk kesediaan dalam contoh artikel ini.

Dalam file proyek aplikasi klien pertama (MultipleBlazorApps.Client.csproj), tambahkan <StaticWebAssetBasePath> properti ke <PropertyGroup> dengan nilai FirstApp untuk mengatur jalur dasar untuk aset statis proyek:

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

MultipleBlazorApps.SecondClient Dalam file proyek aplikasi (MultipleBlazorApps.SecondClient.csproj):

  • <StaticWebAssetBasePath> Tambahkan properti ke <PropertyGroup> dengan nilai SecondApp:

    <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>

  • Tambahkan referensi proyek untuk proyek ke MultipleBlazorApps.Shared<ItemGroup>:

    <ItemGroup>
  <ProjectReference Include="..\Shared\MultipleBlazorApps.Shared.csproj" />
</ItemGroup>

Dalam file proyek aplikasi server (Server/MultipleBlazorApps.Server.csproj), buat referensi proyek untuk aplikasi klien yang <ItemGroup>ditambahkan MultipleBlazorApps.SecondClient di :

<ProjectReference Include="..\SecondClient\MultipleBlazorApps.SecondClient.csproj" />

Dalam file aplikasi Properties/launchSettings.json server, konfigurasikan applicationUrlKestrel profil (MultipleBlazorApps.Server) untuk mengakses aplikasi klien di port 5001 dan 5002. Jika Anda mengonfigurasi lingkungan lokal untuk menggunakan domain contoh, URL untuk applicationUrl dapat menggunakan firstapp.com dan secondapp.com dan tidak menggunakan port.

Catatan

Penggunaan port dalam demonstrasi ini memungkinkan akses ke proyek klien di browser lokal tanpa perlu mengonfigurasi lingkungan hosting lokal sehingga browser web dapat mengakses aplikasi klien melalui konfigurasi host, firstapp.com dan secondapp.com. Dalam skenario produksi, konfigurasi umumnya adalah menggunakan subdomain untuk membedakan aplikasi klien.

Contohnya:

  • Port dihilangkan dari konfigurasi demonstrasi ini.
  • Host diubah untuk menggunakan subdomain, seperti www.contoso.com untuk pengunjung situs dan admin.contoso.com untuk administrator.
  • Host tambahan dapat disertakan untuk aplikasi klien tambahan, dan setidaknya satu host lagi diperlukan jika aplikasi server juga merupakan Razor halaman atau aplikasi MVC yang melayani halaman atau tampilan.

Jika Anda berencana untuk menyajikan halaman atau tampilan dari aplikasi server, gunakan pengaturan berikut applicationUrl dalam Properties/launchSettings.json file, yang mengizinkan akses berikut:

  • Secara opsional, Razor aplikasi Pages atau MVC (MultipleBlazorApps.Server proyek) merespons permintaan di port 5000.
  • Respons terhadap permintaan untuk klien pertama (MultipleBlazorApps.Client proyek) berada di port 5001.
  • Respons terhadap permintaan untuk klien kedua (MultipleBlazorApps.SecondClient proyek) berada di port 5002.
"applicationUrl": "https://localhost:5000;https://localhost:5001;https://localhost:5002",

Jika Anda tidak merencanakan aplikasi server untuk melayani halaman atau tampilan dan hanya melayani Blazor WebAssembly aplikasi klien, gunakan pengaturan berikut, yang mengizinkan akses berikut:

  • Aplikasi klien pertama merespons pada port 5001.
  • Aplikasi klien kedua merespons pada port 5002.
"applicationUrl": "https://localhost:5001;https://localhost:5002",

Dalam file aplikasi Program.cs server, hapus kode berikut, yang muncul setelah panggilan ke UseHttpsRedirection:

  • Jika Anda berencana untuk menyajikan halaman atau tampilan dari aplikasi server, hapus baris kode berikut:

    - app.UseBlazorFrameworkFiles();

    - app.MapFallbackToFile("index.html");

  • Jika Anda merencanakan aplikasi server untuk hanya melayani Blazor WebAssembly aplikasi klien, hapus kode berikut:

    - app.UseBlazorFrameworkFiles();

...

- app.UseRouting();

- app.MapRazorPages();
- app.MapControllers();
- app.MapFallbackToFile("index.html");

    Biarkan Middleware File Statis di tempat:

    app.UseStaticFiles();

  • Tambahkan middleware yang memetakan permintaan ke aplikasi klien. Contoh berikut mengonfigurasi middleware untuk dijalankan saat port permintaan adalah 5001 untuk aplikasi klien pertama atau 5002 untuk aplikasi klien kedua, atau host permintaan adalah firstapp.com untuk aplikasi klien pertama atau secondapp.com untuk aplikasi klien kedua.

    Catatan

    Penggunaan host (firstapp.com/secondapp.com) pada sistem lokal dengan browser lokal memerlukan konfigurasi tambahan yang berada di luar cakupan artikel ini. Untuk pengujian lokal skenario ini, sebaiknya gunakan port. Aplikasi produksi umum dikonfigurasi untuk menggunakan subdomain, seperti www.contoso.com untuk pengunjung situs dan admin.contoso.com untuk administrator. Dengan konfigurasi DNS dan server yang tepat, yang berada di luar cakupan artikel ini dan tergantung pada teknologi yang digunakan, aplikasi merespons permintaan di host apa pun yang dinamai dalam kode berikut.

    Tempat Anda menghapus app.UseBlazorFrameworkFiles(); baris dari Program.cs, tempatkan kode berikut:

    app.MapWhen(ctx => ctx.Request.Host.Port == 5001 || 
    ctx.Request.Host.Equals("firstapp.com"), first =>
{
    first.Use((ctx, nxt) =>
    {
        ctx.Request.Path = "/FirstApp" + ctx.Request.Path;
        return nxt();
    });

    first.UseBlazorFrameworkFiles("/FirstApp");
    first.UseStaticFiles();
    first.UseStaticFiles("/FirstApp");
    first.UseRouting();

    first.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}", 
            "FirstApp/index.html");
    });
});

app.MapWhen(ctx => ctx.Request.Host.Port == 5002 || 
    ctx.Request.Host.Equals("secondapp.com"), second =>
{
    second.Use((ctx, nxt) =>
    {
        ctx.Request.Path = "/SecondApp" + ctx.Request.Path;
        return nxt();
    });

    second.UseBlazorFrameworkFiles("/SecondApp");
    second.UseStaticFiles();
    second.UseStaticFiles("/SecondApp");
    second.UseRouting();

    second.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}", 
            "SecondApp/index.html");
    });
});

    Peringatan

    API yang bergantung pada header Host, seperti HttpRequest.Host dan RequireHost, tunduk pada potensi spoofing oleh klien.

    Untuk mencegah spoofing host dan port, gunakan salah satu pendekatan berikut:

  • Tambahkan middleware yang memetakan permintaan ke aplikasi klien. Contoh berikut mengonfigurasi middleware untuk dijalankan saat subpath permintaan adalah /FirstApp untuk aplikasi klien pertama atau /SecondApp untuk aplikasi klien kedua.

    Tempat Anda menghapus app.UseBlazorFrameworkFiles(); baris dari Program.cs, tempatkan kode berikut:

    app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/FirstApp", 
    StringComparison.OrdinalIgnoreCase), first =>
{
    first.UseBlazorFrameworkFiles("/FirstApp");
    first.UseStaticFiles();
    first.UseStaticFiles("/FirstApp");
    first.UseRouting();

    first.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}",
            "FirstApp/index.html");
    });
});

app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/SecondApp", 
    StringComparison.OrdinalIgnoreCase), second =>
{
    second.UseBlazorFrameworkFiles("/SecondApp");
    second.UseStaticFiles();
    second.UseStaticFiles("/SecondApp");
    second.UseRouting();

    second.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}",
            "SecondApp/index.html");
    });
});

  • Atur jalur dasar di setiap aplikasi klien:

    Dalam file aplikasi index.html klien pertama (Client/wwwroot/index.html), perbarui <base> nilai tag untuk mencerminkan subpath. Garis miring berikutnya diperlukan:

    <base href="/FirstApp/" />

    Di file aplikasi index.html klien kedua (SecondClient/wwwroot/index.html), perbarui <base> nilai tag untuk mencerminkan subpath. Garis miring berikutnya diperlukan:

    <base href="/SecondApp/" />

Untuk informasi selengkapnya tentang UseStaticFiles, lihat file statis ASP.NET CoreBlazor.

Untuk informasi selengkapnya tentang UseBlazorFrameworkFiles dan MapFallbackToFile, lihat sumber daya berikut ini:

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

Permintaan dari aplikasi klien ke /WeatherForecast di API server adalah ke /FirstApp/WeatherForecast atau /SecondApp/WeatherForecast tergantung pada aplikasi klien mana yang membuat permintaan. Oleh karena itu, rute pengontrol yang mengembalikan data cuaca dari API server memerlukan modifikasi untuk menyertakan segmen jalur.

Di pengontrol prakiraan cuaca aplikasi server (Controllers/WeatherForecastController.cs), ganti rute yang ada ([Route("[controller]")]) ke WeatherForecastController dengan rute berikut, yang memperhitungkan jalur permintaan klien:

[Route("FirstApp/[controller]")]
[Route("SecondApp/[controller]")]

Jika Anda berencana untuk menyajikan halaman dari aplikasi server, tambahkan IndexRazor halaman ke Pages folder aplikasi server:

Pages/Index.cshtml:

@page
@model MultipleBlazorApps.Server.Pages.IndexModel
@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from Razor Pages!</p>
            </div>
        </div>
    </div>
</body>
</html>

Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages;

public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
}

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages
{
    public class IndexModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

Catatan

Halaman sebelumnya Index adalah contoh minimal murni untuk tujuan demonstrasi. Jika aplikasi memerlukan aset Pages tambahan Razor , seperti tata letak, gaya, skrip, dan impor, dapatkan dari aplikasi yang dibuat dari Razor templat proyek Pages. Untuk informasi selengkapnya, lihat Pengenalan Razor Halaman di ASP.NET Core.

Jika Anda berencana untuk menyajikan tampilan MVC dari aplikasi server, tambahkan Index tampilan dan Home pengontrol:

Views/Home/Index.cshtml:

@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from MVC!</p>
            </div>
        </div>
    </div>
</body>
</html>

Controllers/HomeController.cs:

using Microsoft.AspNetCore.Mvc;

namespace MultipleBlazorApps.Server.Controllers;

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

using Microsoft.AspNetCore.Mvc;

namespace MultipleBlazorApps.Server.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Catatan

Tampilan sebelumnya Index adalah contoh minimal murni untuk tujuan demonstrasi. Jika aplikasi memerlukan aset MVC tambahan, seperti tata letak, gaya, skrip, dan impor, dapatkan dari aplikasi yang dibuat dari templat proyek MVC. Untuk informasi selengkapnya, lihat Mulai menggunakan ASP.NET Core MVC.

Untuk informasi selengkapnya tentang menggunakan Razor komponen dari salah satu aplikasi klien di halaman atau tampilan aplikasi server, lihat Merender dan mengintegrasikan komponen ASP.NET CoreRazor.

Menjalankan aplikasi

Jalankan MultipleBlazorApps.Server proyek:

  • Akses aplikasi klien awal di https://localhost:5001.
  • Akses aplikasi klien yang ditambahkan di https://localhost:5002.
  • Jika aplikasi server dikonfigurasi untuk melayani halaman atau tampilan, akses Index halaman atau tampilan di https://localhost:5000.
  • Akses aplikasi klien awal di https://localhost:{DEFAULT PORT}/FirstApp.
  • Akses aplikasi klien yang ditambahkan di https://localhost:{DEFAULT PORT}/SecondApp.
  • Jika aplikasi server dikonfigurasi untuk melayani halaman atau tampilan, akses Index halaman atau tampilan di https://localhost:{DEFAULT PORT}.

Dalam contoh URL sebelumnya, {DEFAULT PORT} tempat penampung adalah port default yang ditentukan oleh MultipleBlazorApps.Server file proyek Properties/launchSettings.json dalam nilainya applicationUrl .

Penting

Saat menjalankan aplikasi dengan dotnet run perintah (.NET CLI), konfirmasikan bahwa shell perintah terbuka di Server folder solusi.

Saat menggunakan tombol mulai Visual Studio untuk menjalankan aplikasi, konfirmasikan bahwa MultipleBlazorApps.Server proyek ditetapkan sebagai proyek startup (disorot dalam Penjelajah Solusi).

Aset statis

Saat aset berada di folder aplikasi wwwroot klien, berikan jalur permintaan aset statis dalam komponen:

<img alt="..." src="{PATH AND FILE NAME}" />

Tempat penampung {PATH AND FILE NAME} adalah jalur dan nama file di bagian wwwroot.

Misalnya, sumber untuk gambar Jeep (jeep-yj.png) di vehicle folder wwwroot:

<img alt="Jeep Wrangler YJ" src="vehicle/jeep-yj.png" />

Dukungan pustaka kelas Razor (RCL)

Razor Tambahkan pustaka kelas (RCL) ke solusi sebagai proyek baru:

  • Klik kanan solusi di Penjelajah Solusi dan pilih Tambahkan>Proyek Baru.
  • Razor Gunakan templat proyek Pustaka Kelas untuk membuat proyek. Contoh di bagian ini menggunakan nama ComponentLibraryproyek , yang juga merupakan nama rakitan RCL. Jangan pilih kotak centang Halaman dukungan dan tampilan.

Untuk setiap aplikasi klien yang dihosting Blazor WebAssembly, buat referensi proyek untuk proyek RCL dengan mengklik kanan setiap proyek klien di Penjelajah Solusi dan memilih Tambahkan>Referensi Proyek.

Gunakan komponen dari RCL di aplikasi klien dengan salah satu pendekatan berikut:

  • Tempatkan @using direktif di bagian atas komponen untuk namespace RCL dan tambahkan Razor sintaks untuk komponen. Contoh berikut adalah untuk RCL dengan nama ComponentLibraryrakitan :

    @using ComponentLibrary

...

<Component1 />

  • Berikan namespace RCL bersama dengan Razor sintaks untuk komponen. Pendekatan ini tidak memerlukan @using arahan di bagian atas file komponen. Contoh berikut adalah untuk RCL dengan nama ComponentLibraryrakitan :

    <ComponentLibrary.Component1 />

Catatan

Arahan @using juga dapat ditempatkan ke dalam file setiap aplikasi _Import.razor klien, yang membuat namespace RCL tersedia secara global untuk komponen dalam proyek tersebut.

Ketika aset statis lainnya berada di wwwroot folder RCL, referensikan aset statis di aplikasi klien sesuai panduan di UI yang Dapat Digunakan Razor Kembali di pustaka kelas dengan ASP.NET Core:

<img alt="..." src="_content/{PACKAGE ID}/{PATH AND FILE NAME}" />

Tempat {PACKAGE ID} penampung adalah ID paket RCL. Default ID paket diatur ke nama rakitan proyek jika <PackageId> tidak ditentukan dalam file proyek. Tempat {PATH AND FILE NAME} penampung adalah jalur dan nama file di bawah wwwroot.

Contoh berikut menunjukkan markup untuk gambar Jeep (jeep-yj.png) di vehicle folder folder RCL wwwroot . Contoh berikut adalah untuk RCL dengan nama ComponentLibraryrakitan :

<img alt="Jeep Wrangler YJ" src="_content/ComponentLibrary/vehicle/jeep-yj.png" />

Sumber Daya Tambahan: