Beberapa aplikasi ASP.NET Core Blazor WebAssembly yang dihosting
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.com
secondapp.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 bernamaMultipleBlazorApps
. - Tiga proyek dalam solusi sebelum aplikasi klien kedua ditambahkan ada
MultipleBlazorApps.Client
diClient
folder ,MultipleBlazorApps.Server
diServer
folder , danMultipleBlazorApps.Shared
diShared
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 bernamaSecondClient
. - 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 sejumlahsecondapp.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 bernamaMultipleBlazorApps
. - Tiga proyek dalam solusi sebelum aplikasi klien kedua ditambahkan ada
MultipleBlazorApps.Client
diClient
folder ,MultipleBlazorApps.Server
diServer
folder , danMultipleBlazorApps.Shared
diShared
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 bernamaSecondClient
. - 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 proyekProperties/launchSettings.json
dalam nilainyaapplicationUrl
. 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
dansecondapp.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:
- Menghosting dan menyebarkan artikel
- Menerapkan HTTPS di ASP.NET Core
- Mengintegrasikan komponen ASP.NET Core Razor
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
) dariClient/Pages
folder keSecondClient/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 menyalinFetchData
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, karenaweather.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
, ,Client2
2
Client1
/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
, ,Client2
2
Client1
/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 nilaiSecondApp
:<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 applicationUrl
Kestrel 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 danadmin.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 atausecondapp.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, sepertiwww.contoso.com
untuk pengunjung situs danadmin.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 dariProgram.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:
- Gunakan HttpContext.Connection (ConnectionInfo.LocalPort) tempat port diperiksa.
- Menggunakan pemfilteran Host.
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 dariProgram.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:
- Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.UseBlazorFrameworkFiles (sumber referensi)
- Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile (sumber referensi)
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 Index
Razor 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() => 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 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 dihttps://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 dihttps://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 watch
perintah (atau dotnet run
) (.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
ComponentLibrary
proyek , 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 namaComponentLibrary
rakitan :@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 namaComponentLibrary
rakitan :<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 ComponentLibrary
rakitan :
<img alt="Jeep Wrangler YJ" src="_content/ComponentLibrary/vehicle/jeep-yj.png" />
Sumber Daya Tambahan:
ASP.NET Core