Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
Nota
Ini bukan versi terbaru dari artikel ini. Untuk versi terbaru artikel ini, lihat versi .NET 7.
Artikel ini menjelaskan cara mengonfigurasi aplikasi host untuk menghosting beberapa aplikasi Blazor WebAssemblyBlazor WebAssembly.
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 Blazor WebAssembly yang dihosting ada
MultipleBlazorAppsdi folder bernamaMultipleBlazorApps. - Tiga proyek dalam solusi sebelum aplikasi klien kedua ditambahkan ada
MultipleBlazorApps.ClientdiClientfolder ,MultipleBlazorApps.ServerdiServerfolder , danMultipleBlazorApps.ShareddiSharedfolder . - Aplikasi klien awal (pertama) adalah proyek klien default dari solusi yang dibuat dari Blazor WebAssembly templat proyek.
- Aplikasi klien kedua ditambahkan ke solusi,
MultipleBlazorApps.SecondClientdi 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 host di
firstapp.com. Aplikasi klien kedua dapat diakses di browser di port 5002 atau dengan sejumlahsecondapp.com.
Dengan pilihan saat ini, artikel ini membahas penyediaan subjalur rute (misalnya, /FirstApp dan /SecondApp).
Dalam contoh berikut:
- Nama proyek aplikasi Blazor WebAssembly yang dihosting ada
MultipleBlazorAppsdi folder bernamaMultipleBlazorApps. - Tiga proyek dalam solusi sebelum aplikasi klien kedua ditambahkan ada
MultipleBlazorApps.ClientdiClientfolder ,MultipleBlazorApps.ServerdiServerfolder , danMultipleBlazorApps.ShareddiSharedfolder . - Aplikasi klien awal (pertama) adalah proyek klien default dari solusi yang dibuat dari Blazor WebAssembly templat proyek.
- Aplikasi klien kedua ditambahkan ke solusi,
MultipleBlazorApps.SecondClientdi 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.Serverfile proyekProperties/launchSettings.jsondalam nilainyaapplicationUrl. Aplikasi klien pertama dapat diakses di browser di/FirstAppsubpath. Aplikasi klien kedua dapat diakses di browser di/SecondAppsubpath.
Contoh yang ditunjukkan dalam artikel ini memerlukan konfigurasi tambahan untuk:
- Mengakses aplikasi langsung di contoh domain host,
firstapp.comdansecondapp.com. - Sertifikat untuk aplikasi klien untuk mengaktifkan keamanan TLS/HTTPS.
- Mengonfigurasi aplikasi server sebagai Razor aplikasi Pages untuk fitur berikut:
- Integrasi komponen Razor ke dalam halaman atau tampilan.
- Prarender Razor komponen.
Konfigurasi sebelumnya berada di luar cakupan artikel ini. Untuk informasi selengkapnya, lihat sumber daya berikut ini:
- Host dan terapkan ASP.NET Core
- Menerapkan HTTPS di ASP.NET Core
- Mengintegrasikan komponen ASP.NET Core Razor dengan MVC atau Razor Pages dalam solusi yang dihosting Blazor WebAssembly
Gunakan Blazor WebAssembly yang dihosting yang ada atau buat solusi baru yang dihosting Blazor WebAssembly dari templat proyek Blazor WebAssembly dengan meneruskan opsi -ho|--hosted jika menggunakan .NET CLI, atau pilih 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 opsi -ho|--hosted jika menggunakan .NET CLI, atau jangan gunakan kotak centang ASP.NET Core Hosted jika menggunakan Visual Studio.
Buat perubahan berikut pada MultipleBlazorApps.SecondClient proyek:
-
FetchDataSalin komponen (Pages/FetchData.razor) dariClient/Pagesfolder keSecondClient/Pagesfolder . Langkah ini diperlukan karena aplikasi mandiri Blazor WebAssembly tidak memanggil Server pengontrol proyek untuk data cuaca, aplikasi ini menggunakan file data statis. Dengan menyalinFetchDatakomponen ke proyek yang ditambahkan, aplikasi klien kedua juga melakukan panggilan API web ke API server untuk data cuaca. -
SecondClient/wwwroot/sample-dataHapus folder, karenaweather.jsonfile 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, proyek MultipleBlazorApps.Server juga dapat menyajikan halaman atau tampilan, seperti aplikasi halaman Razor atau MVC tradisional. Langkah-langkah untuk mengaktifkan halaman atau tampilan penyajian dibahas nanti dalam artikel ini.
Nota
Demonstrasi dalam artikel ini menggunakan nama jalur aset web statis FirstApp dari proyek MultipleBlazorApps.Client dan SecondApp dari proyek MultipleBlazorApps.SecondClient. Nama "FirstApp" dan "SecondApp" hanya untuk tujuan demonstrasi. Nama lain dapat diterima untuk membedakan aplikasi klien, seperti App1/App2, ,Client1/Client21/2 , 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.
Nota
Demonstrasi dalam artikel ini menggunakan nama jalur aset web statis FirstApp dari proyek MultipleBlazorApps.Client dan SecondApp dari proyek MultipleBlazorApps.SecondClient. Nama "FirstApp" dan "SecondApp" hanya untuk tujuan demonstrasi. Nama lain dapat diterima untuk membedakan aplikasi klien, seperti App1/App2, ,Client1/Client21/2 , 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 lain yang valid didukung, dan segmen rute tidak perlu cocok dengan 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 kemudahan 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 untuk proyek
MultipleBlazorApps.Sharedke dalam<ItemGroup>.<ItemGroup> <ProjectReference Include="..\Shared\MultipleBlazorApps.Shared.csproj" /> </ItemGroup>
Dalam file proyek aplikasi server (Server/MultipleBlazorApps.Server.csproj), buat referensi proyek untuk aplikasi klien MultipleBlazorApps.SecondClient yang ditambahkan dalam <ItemGroup>:
<ProjectReference Include="..\SecondClient\MultipleBlazorApps.SecondClient.csproj" />
Dalam file aplikasi Properties/launchSettings.json server, konfigurasikan profil applicationUrlKestrel (MultipleBlazorApps.Server) untuk mengakses aplikasi klien pada 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.
Nota
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.comuntuk pengunjung situs danadmin.contoso.comuntuk administrator. - Host tambahan dapat ditambahkan untuk aplikasi klien tambahan, dan setidaknya satu host lagi diperlukan jika aplikasi server juga merupakan aplikasi Razor Pages atau MVC yang menyajikan 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.Serverproyek) merespons permintaan di port 5000. - Respon permintaan klien pertama (
MultipleBlazorApps.Clientproyek) berada di port 5001. - Respon terhadap permintaan untuk klien kedua (
MultipleBlazorApps.SecondClientproyek) tersedia 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.comuntuk aplikasi klien pertama atausecondapp.comuntuk aplikasi klien kedua.Nota
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.comuntuk pengunjung situs danadmin.contoso.comuntuk 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 menggunakan header Host, seperti dan HttpRequest.Host, berisiko spoofing oleh klien.
Untuk mencegah spoofing host dan port, gunakan salah satu pendekatan berikut:
- Gunakan HttpContext.Connection (ConnectionInfo.LocalPort) di mana port diperiksa.
- Gunakan Pemfilteran Host.
Tambahkan middleware yang memetakan permintaan ke aplikasi klien. Contoh berikut mengonfigurasi middleware untuk dijalankan saat subpath permintaan adalah
/FirstAppuntuk aplikasi klien pertama atau/SecondAppuntuk 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 klien pertama
index.html(Client/wwwroot/index.html), perbarui nilai tag<base>untuk mencerminkan jalur sub. Garis miring berikutnya diperlukan:<base href="/FirstApp/" />Di file aplikasi klien kedua
index.html(SecondClient/wwwroot/index.html), perbarui tag nilai<base>untuk merefleksikan 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)
Nota
Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag untuk rilis tertentu, gunakan menu dropdown Ganti 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()
{
}
}
}
Nota
Halaman sebelumnya Index adalah contoh minimal murni untuk tujuan demonstrasi. Jika aplikasi memerlukan aset tambahan Razor Pages, seperti tata letak, gaya, skrip, dan impor, dapat diperoleh dari aplikasi yang dibuat dari Razor templat proyek Pages. Untuk informasi selengkapnya, lihat Razor Arsitektur dan konsep 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();
}
Nota
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 Core Razor dengan MVC atau Razor Pages dalam solusi yang dihostingBlazor WebAssembly.
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
Indexhalaman 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
Indexhalaman atau tampilan dihttps://localhost:{DEFAULT PORT}.
Dalam contoh URL sebelumnya, {DEFAULT PORT} placeholder adalah port default yang ditentukan oleh proyek file MultipleBlazorApps.Server dalam nilainya Properties/launchSettings.jsonapplicationUrl.
Penting
Saat menjalankan aplikasi dengan perintah dotnet watch (atau dotnet run) (.NET CLI), pastikan bahwa prompt perintah terbuka di folder Server solusi.
Saat menggunakan tombol mulai Visual Studio untuk menjalankan aplikasi, pastikan bahwa proyek MultipleBlazorApps.Server ditetapkan sebagai proyek awal yang 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}" />
Placeholder {PATH AND FILE NAME} adalah jalur dan nama file di bawah 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.
- Gunakan templat proyek Pustaka Kelas untuk membuat proyek.Razor Contoh di bagian ini menggunakan nama
ComponentLibrary, 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
@usingdirektif di bagian atas komponen untuk namespace RCL dan tambahkan Razor sintaks untuk komponen. Contoh berikut adalah untuk RCL dengan nama rakitanComponentLibrary:@using ComponentLibrary ... <Component1 />Berikan namespace RCL bersama dengan sintaksis Razor untuk komponen. Pendekatan ini tidak memerlukan
@usingarahan di bagian atas file komponen. Contoh berikut adalah untuk RCL dengan nama rakitanComponentLibrary:<ComponentLibrary.Component1 />
Nota
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.
Jika ada aset statis lain di folder wwwroot dalam RCL, referensikan aset statis di aplikasi klien mengikuti panduan dalam Razor:
<img alt="..." src="_content/{PACKAGE ID}/{PATH AND FILE NAME}" />
Tempat {PACKAGE ID} penampung adalah ID paket RCL. ID paket secara default akan diatur ke nama rakitan proyek jika <PackageId> tidak ditentukan dalam file proyek. Placeholder {PATH AND FILE NAME} adalah jalur dan nama file dalam wwwroot.
Contoh berikut menunjukkan markup untuk gambar Jeep (jeep-yj.png) di dalam folder vehicle dari folder RCL wwwroot. Contoh berikut adalah untuk RCL dengan nama rakitan ComponentLibrary:
<img alt="Jeep Wrangler YJ" src="_content/ComponentLibrary/vehicle/jeep-yj.png" />
Sumber daya tambahan
ASP.NET Core