Bagikan melalui

Mengintegrasikan komponen ASP.NET Core Razor ke dalam aplikasi ASP.NET Core

  • Artikel

Artikel ini menjelaskan Razor skenario integrasi komponen untuk aplikasi ASP.NET Core.

Razor integrasi komponen

Razor komponen dapat diintegrasikan ke dalam Razor Pages, MVC, dan jenis aplikasi ASP.NET Core lainnya. Razor komponen juga dapat diintegrasikan ke dalam aplikasi web apa pun, termasuk aplikasi yang tidak didasarkan pada ASP.NET Core, sebagai elemen HTML kustom.

Gunakan panduan di bagian berikut tergantung pada persyaratan aplikasi:

Menggunakan komponen yang tidak dapat dirutekan di halaman atau tampilan

Gunakan panduan berikut untuk mengintegrasikan Razor komponen ke dalam halaman atau tampilan Halaman atau aplikasi MVC yang ada Razor dengan Pembantu Tag Komponen.

Catatan

Jika aplikasi Anda memerlukan komponen yang dapat dirutekan secara langsung (tidak disematkan ke halaman atau tampilan), lewati bagian ini dan gunakan panduan di bagian Tambahkan Blazor dukungan ke aplikasi ASP.NET Core.

Saat pra-penyajian server digunakan dan halaman atau tampilan dirender:

  • Komponen telah dirender dengan halaman atau tampilan.
  • Status komponen awal yang digunakan untuk pra-penyajian hilang.
  • Status komponen baru dibuat ketika SignalR koneksi dibuat.

Untuk informasi selengkapnya tentang mode penyajian, termasuk penyajian komponen statis non-interaktif, lihat Pembantu Tag Komponen di ASP.NET Core. Untuk menyimpan status komponen yang telah dirender sebelumnya, lihat Mempertahankan Pembantu Razor Tag Status Komponen di ASP.NET Core.

Components Tambahkan folder ke folder akar proyek.

Tambahkan file impor ke Components folder dengan isi berikut. {APP NAMESPACE} Ubah tempat penampung ke namespace proyek.

Components/_Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components

Dalam file tata letak proyek (Pages/Shared/_Layout.cshtml di Razor aplikasi Pages atau Views/Shared/_Layout.cshtml di aplikasi MVC):

  • Tambahkan tag berikut <base> dan Bantuan Tag Komponen untuk HeadOutlet komponen ke <head> markup:

    <base href="~/" />
<component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)" 
    render-mode="ServerPrerendered" />

    Nilai href ( jalur dasar aplikasi) dalam contoh sebelumnya mengasumsikan bahwa aplikasi berada di jalur URL akar (/). Jika aplikasi adalah sub-aplikasi, ikuti panduan di bagian Jalur dasar aplikasi dari artikel Host dan sebarkan ASP.NET CoreBlazor.

    Komponen HeadOutlet ini digunakan untuk merender konten kepala (<head>) untuk judul halaman (PageTitle komponen) dan elemen kepala (HeadContent komponen) lainnya yang diatur oleh Razor komponen. Untuk informasi selengkapnya, lihat Mengontrol konten head di aplikasi ASP.NET CoreBlazor.

  • <script> Tambahkan tag untuk blazor.web.js skrip segera sebelum bagian Scripts render (@await RenderSectionAsync(...)):

    <script src="_framework/blazor.web.js"></script>

    Blazor Kerangka kerja secara otomatis menambahkan blazor.web.js skrip ke aplikasi.

Catatan

Biasanya, tata letak dimuat melalui _ViewStart.cshtml file.

Tambahkan komponen non-operasional (no-op) App ke proyek.

Components/App.razor:

@* No-op App component *@

Di mana layanan terdaftar, tambahkan layanan untuk Razor komponen dan layanan untuk mendukung penyajian komponen Server Interaktif.

Di bagian Program atas file, tambahkan using pernyataan ke bagian atas file untuk komponen proyek:

using {APP NAMESPACE}.Components;

Di baris sebelumnya, ubah {APP NAMESPACE} tempat penampung ke namespace aplikasi. Contohnya:

using BlazorSample.Components;

Program Dalam file sebelum baris yang membangun aplikasi (builder.Build()):

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Untuk informasi selengkapnya tentang menambahkan dukungan untuk komponen Interactive Server dan WebAssembly, lihat mode render ASP.NET CoreBlazor.

Program Dalam file segera setelah panggilan untuk memetakan Razor Pages (MapRazorPages) di Razor aplikasi Pages atau untuk memetakan rute pengontrol default (MapControllerRoute) di aplikasi MVC, panggil MapRazorComponents untuk menemukan komponen yang tersedia dan menentukan komponen root aplikasi (komponen pertama dimuat). Secara default, komponen akar aplikasi adalah App komponen (App.razor). Rantai panggilan ke AddInteractiveServerRenderMode untuk mengonfigurasi penyajian sisi server interaktif (SSR interaktif) untuk aplikasi:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Catatan

Jika aplikasi belum diperbarui untuk menyertakan Antiforgery Middleware, tambahkan baris berikut setelah UseAuthorization dipanggil:

app.UseAntiforgery();

Integrasikan komponen ke halaman atau tampilan apa pun. Misalnya, tambahkan EmbeddedCounter komponen ke folder proyek Components .

Components/EmbeddedCounter.razor:

<h1>Embedded Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Razor Halaman:

Di halaman Razor proyek Index aplikasi Pages, tambahkan EmbeddedCounter namespace layanan komponen dan sematkan komponen ke dalam halaman. Ketika halaman dimuat Index , EmbeddedCounter komponen telah dirender di halaman. Dalam contoh berikut, ganti {APP NAMESPACE} tempat penampung dengan namespace proyek.

Pages/Index.cshtml:

@page
@using {APP NAMESPACE}.Components
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

MVC:

Dalam tampilan proyek Index aplikasi MVC, tambahkan EmbeddedCounter namespace layanan komponen dan sematkan komponen ke dalam tampilan. Saat tampilan dimuat Index , EmbeddedCounter komponen telah dirender di halaman. Dalam contoh berikut, ganti {APP NAMESPACE} tempat penampung dengan namespace proyek.

Views/Home/Index.cshtml:

@using {APP NAMESPACE}.Components
@{
    ViewData["Title"] = "Home Page";
}

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

Menambahkan Blazor dukungan ke aplikasi ASP.NET Core

Bagian ini mencakup penambahan Blazor dukungan ke aplikasi ASP.NET Core:

Catatan

Untuk contoh di bagian ini, contoh nama dan namespace aplikasi adalah BlazorSample.

Menambahkan penyajian sisi server statis (SSR statis)

Components Tambahkan folder ke aplikasi.

Tambahkan file berikut _Imports untuk namespace layanan yang digunakan oleh Razor komponen.

Components/_Imports.razor:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using {APP NAMESPACE}
@using {APP NAMESPACE}.Components

Ubah tempat penampung namespace ({APP NAMESPACE}) ke namespace aplikasi. Contohnya:

@using BlazorSample
@using BlazorSample.Components

Blazor Tambahkan router (<Router>, Router) ke aplikasi dalam Routes komponen, yang ditempatkan di folder aplikasiComponents.

Components/Routes.razor:

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

App Tambahkan komponen ke aplikasi, yang berfungsi sebagai komponen akar, yang merupakan komponen pertama yang dimuat aplikasi.

Components/App.razor:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="@Assets["{ASSEMBLY NAME}.styles.css"]" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="{ASSEMBLY NAME}.styles.css" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

Tempat {ASSEMBLY NAME} penampung adalah nama rakitan aplikasi. Misalnya, proyek dengan nama ContosoApp rakitan menggunakan ContosoApp.styles.css nama file lembar gaya.

Pages Tambahkan folder ke Components folder untuk menyimpan komponen yang dapat dirutekanRazor.

Tambahkan komponen berikut Welcome untuk menunjukkan SSR statis.

Components/Pages/Welcome.razor:

@page "/welcome"

<PageTitle>Welcome!</PageTitle>

<h1>Welcome to Blazor!</h1>

<p>@message</p>

@code {
    private string message = 
        "Hello from a Razor component and welcome to Blazor!";
}

Dalam file proyek Program ASP.NET Core:

  • using Tambahkan pernyataan ke bagian atas file untuk komponen proyek:

    using {APP NAMESPACE}.Components;

    Di baris sebelumnya, ubah {APP NAMESPACE} tempat penampung ke namespace aplikasi. Contohnya:

    using BlazorSample.Components;

  • Tambahkan Razor layanan komponen (AddRazorComponents), yang juga secara otomatis menambahkan layanan antiforgery (AddAntiforgery). Tambahkan baris berikut sebelum baris yang memanggil builder.Build()):

    builder.Services.AddRazorComponents();

  • Tambahkan Middleware Antiforgery ke alur pemrosesan permintaan dengan UseAntiforgery. UseAntiforgery dipanggil setelah panggilan ke UseRouting. Jika ada panggilan ke UseRouting dan UseEndpoints, panggilan ke UseAntiforgery harus berada di antara mereka. Panggilan ke UseAntiforgery harus dilakukan setelah panggilan ke UseAuthentication dan UseAuthorization.

    app.UseAntiforgery();

  • Tambahkan MapRazorComponents ke alur pemrosesan permintaan aplikasi dengan App komponen (App.razor) yang ditentukan sebagai komponen akar default (komponen pertama dimuat). Tempatkan kode berikut sebelum baris yang memanggil app.Run:

    app.MapRazorComponents<App>();

Saat aplikasi dijalankan, Welcome komponen diakses di /welcome titik akhir.

Mengaktifkan penyajian sisi server interaktif (SSR interaktif)

Ikuti panduan di bagian Tambahkan penyajian sisi server statis (SSR statis).

Dalam file aplikasi Program , tambahkan panggilan ke AddInteractiveServerComponents tempat Razor layanan komponen ditambahkan dengan AddRazorComponents:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

Tambahkan panggilan ke AddInteractiveServerRenderMode tempat Razor komponen dipetakan dengan MapRazorComponents:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Tambahkan komponen berikut Counter ke aplikasi yang mengadopsi penyajian sisi server interaktif (SSR interaktif).

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Saat aplikasi dijalankan, Counter komponen diakses di /counter.

Mengaktifkan rendering otomatis interaktif (Otomatis) atau sisi klien (CSR)

Ikuti panduan di bagian Tambahkan penyajian sisi server statis (SSR statis).

Komponen yang menggunakan mode render Otomatis Interaktif awalnya menggunakan SSR interaktif. Runtime .NET dan app bundle diunduh ke klien di latar belakang dan di-cache sehingga dapat digunakan pada kunjungan mendatang. Komponen yang menggunakan mode render Interactive WebAssembly hanya merender secara interaktif pada klien setelah Blazor bundel diunduh dan Blazor runtime diaktifkan. Perlu diingat bahwa saat menggunakan mode render WebAssembly Interaktif atau Interaktif, kode komponen yang diunduh ke klien tidak bersifat privat. Untuk informasi selengkapnya, lihat mode render ASP.NET CoreBlazor.

Setelah memutuskan mode render mana yang akan diadopsi:

Tambahkan referensi paket untuk Microsoft.AspNetCore.Components.WebAssembly.Server paket NuGet ke aplikasi.

Catatan

Untuk panduan tentang menambahkan paket ke aplikasi .NET, lihat artikel di bagian Menginstal dan mengelola paket di Alur kerja konsumsi paket (dokumentasi NuGet). Konfirmasikan versi paket yang benar di NuGet.org.

Buat donor Blazor Web App untuk menyediakan aset ke aplikasi. Ikuti panduan dalam artikel Tooling for ASP.NET Core Blazor , memilih dukungan untuk fitur templat berikut saat membuat Blazor Web App.

Untuk nama aplikasi, gunakan nama yang sama dengan aplikasi ASP.NET Core, yang menghasilkan markup nama aplikasi yang cocok dalam komponen dan mencocokkan namespace dalam kode. Menggunakan nama/namespace yang sama tidak diperlukan secara ketat, karena namespace dapat disesuaikan setelah aset dipindahkan dari aplikasi donor ke aplikasi ASP.NET Core. Namun, waktu disimpan dengan mencocokkan namespace pada awal.

Visual Studio:

  • Untuk Mode render interaktif, pilih Otomatis (Server dan WebAssembly).
  • Atur lokasi Interaktivitas ke Per halaman/komponen.
  • Batal pilih kotak centang untuk Sertakan halaman sampel.

.NET CLI:

  • Gunakan -int Auto opsi tersebut.
  • Jangan gunakan opsi .-ai|--all-interactive
  • -e|--empty Berikan opsi .

Dari donor Blazor Web App, salin seluruh .Client proyek ke folder solusi aplikasi ASP.NET Core.

Penting

Jangan salin .Client folder ke folder proyek ASP.NET Core. Pendekatan terbaik untuk mengatur solusi .NET adalah menempatkan setiap proyek solusi ke dalam foldernya sendiri di dalam folder solusi tingkat atas. Jika folder solusi di atas folder proyek ASP.NET Core tidak ada, buat folder tersebut. Selanjutnya, salin .Client folder proyek dari donor Blazor Web App ke folder solusi. Struktur folder proyek akhir harus memiliki tata letak berikut:

  • BlazorSampleSolution (folder solusi tingkat atas)
    • BlazorSample (proyek ASP.NET Core asli)
    • BlazorSample.Client (.Client folder proyek dari donor Blazor Web App)

Untuk file solusi ASP.NET Core, Anda dapat membiarkannya di folder proyek ASP.NET Core. Atau, Anda dapat memindahkan file solusi atau membuat yang baru di folder solusi tingkat atas selama referensi proyek menunjuk dengan benar ke file proyek (.csproj) dari dua proyek di folder solusi.

Jika Anda menamai donor Blazor Web App saat membuat proyek donor sama dengan aplikasi ASP.NET Core, namespace yang digunakan oleh aset yang didonasikan cocok dengan yang ada di aplikasi ASP.NET Core. Anda tidak perlu mengambil langkah-langkah lebih lanjut untuk mencocokkan namespace layanan. Jika Anda menggunakan namespace layanan yang berbeda saat membuat proyek donor Blazor Web App , Anda harus menyesuaikan namespace layanan di seluruh aset yang didokumentasikan agar sesuai jika Anda ingin menggunakan rest panduan ini persis seperti yang disajikan. Jika namespace tidak cocok, sesuaikan namespace sebelum melanjutkan atau menyesuaikan namespace layanan saat Anda mengikuti panduan yang tersisa di bagian ini.

Hapus donor Blazor Web App, karena tidak memiliki penggunaan lebih lanjut dalam proses ini.

.Client Tambahkan proyek ke solusi:

  • Visual Studio: Klik kanan solusi di Penjelajah Solusi dan pilih Tambahkan>Proyek yang Sudah Ada. Navigasi ke .Client folder dan pilih file proyek (.csproj).

  • .NET CLI: Gunakan dotnet sln add perintah untuk menambahkan .Client proyek ke solusi.

Tambahkan referensi proyek dari proyek ASP.NET Core ke proyek klien:

  • Visual Studio: Klik kanan proyek ASP.NET Core dan pilih Tambahkan>Referensi Proyek. .Client Pilih proyek dan pilih OK.

  • .NET CLI: Dari folder proyek ASP.NET Core, gunakan perintah berikut:

    dotnet add reference ../BlazorSample.Client/BlazorSample.Client.csproj

    Perintah sebelumnya mengasumsikan hal berikut:

    • Nama file proyek adalah BlazorSample.Client.csproj.
    • Proyek .Client berada dalam BlazorSample.Client folder di dalam folder solusi. Folder .Client berdampingan dengan folder proyek ASP.NET Core.

    Untuk informasi selengkapnya tentang dotnet add reference perintah, lihat dotnet add reference (dokumentasi.NET).

Buat perubahan berikut pada file aplikasi Program ASP.NET Core:

  • Tambahkan layanan komponen Interactive WebAssembly dengan AddInteractiveWebAssemblyComponents tempat Razor layanan komponen ditambahkan dengan AddRazorComponents.

    Untuk penyajian Otomatis interaktif:

    builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

    Hanya untuk penyajian Interactive WebAssembly:

    builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();

  • Tambahkan mode render Interactive WebAssembly (AddInteractiveWebAssemblyRenderMode) dan rakitan tambahan untuk .Client proyek tempat komponen dipetakan Razor dengan MapRazorComponents.

    Untuk penyajian otomatis interaktif (Otomatis):

    app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);

    Hanya untuk penyajian Interactive WebAssembly:

    app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);

    Dalam contoh sebelumnya, ubah BlazorSample.Client agar sesuai dengan .Client namespace layanan proyek.

Pages Tambahkan folder ke .Client proyek.

Jika proyek ASP.NET Core memiliki komponen yang sudah ada Counter :

  • Pindahkan komponen ke Pages folder .Client proyek.
  • Hapus direktif @rendermode di bagian atas file komponen.

Jika aplikasi ASP.NET Core tidak memiliki Counter komponen, tambahkan komponen berikut Counter (Pages/Counter.razor) ke .Client proyek:

@page "/counter"
@rendermode InteractiveAuto

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Jika aplikasi hanya mengadopsi penyajian Interactive WebAssembly, hapus direktif @rendermode dan nilai:

- @rendermode InteractiveAuto

Jalankan solusi dari proyek aplikasi ASP.NET Core:

  • Visual Studio: Konfirmasikan bahwa proyek ASP.NET Core dipilih di Penjelajah Solusi saat menjalankan aplikasi.

  • .NET CLI: Jalankan proyek dari folder proyek ASP.NET Core.

Untuk memuat Counter komponen, navigasikan ke /counter.

Menerapkan Blazortata letak dan gaya

Secara opsional, tetapkan komponen tata letak default menggunakan RouteView.DefaultLayout parameter RouteView komponen.

Dalam Routes.razor, contoh berikut menggunakan MainLayout komponen sebagai tata letak default:

<RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />

Untuk informasi selengkapnya, lihat tata letak ASP.NET CoreBlazor.

Blazor tata letak templat proyek dan lembar gaya tersedia dari dotnet/aspnetcore repositori GitHub:

  • MainLayout.razor
  • MainLayout.razor.css
  • NavMenu.razor
  • NavMenu.razor.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).

Bergantung pada cara Anda mengatur file tata letak di aplikasi, Anda mungkin perlu menambahkan @using pernyataan untuk folder file tata letak di file aplikasi _Imports.razor untuk menampilkannya untuk digunakan dalam komponen aplikasi.

Tidak perlu mereferensikan lembar gaya secara eksplisit saat menggunakan isolasi CSS. Blazor Kerangka kerja secara otomatis menggabungkan lembar gaya komponen individual. Lembar gaya yang dibundel aplikasi sudah direferensikan dalam komponen aplikasi App ({ASSEMBLY NAME}.styles.css, di mana {ASSEMBLY NAME} tempat penampung adalah nama rakitan aplikasi).

RazorComponentResult Mengembalikan dari tindakan pengontrol MVC

Tindakan pengontrol MVC dapat mengembalikan komponen dengan RazorComponentResult<TComponent>.

Components/Welcome.razor:

<PageTitle>Welcome!</PageTitle>

<h1>Welcome!</h1>

<p>@Message</p>

@code {
    [Parameter]
    public string? Message { get; set; }
}

Dalam pengontrol:

public IResult GetWelcomeComponent() => 
    new RazorComponentResult<Welcome>(new { Message = "Hello, world!" });

Hanya markup HTML untuk komponen yang dirender yang dikembalikan. Tata letak dan markup halaman HTML tidak dirender secara otomatis dengan komponen. Untuk menghasilkan halaman HTML lengkap, aplikasi dapat mempertahankan Blazor tata letak yang menyediakan markup HTML untuk <html>, <head>, <body>, dan tag lainnya. Komponen mencakup tata letak dengan direktif @layoutRazor di bagian atas file definisi komponen, Welcome.razor misalnya di bagian ini. Contoh berikut mengasumsikan bahwa aplikasi memiliki tata letak bernama RazorComponentResultLayout (Components/Layout/RazorComponentResultLayout.razor):

@using BlazorSample.Components.Layout
@layout RazorComponentResultLayout

Anda dapat menghindari penempatan @using pernyataan untuk Layout folder dalam komponen individual dengan memindahkannya ke file aplikasi _Imports.razor .

Untuk informasi selengkapnya, lihat tata letak ASP.NET CoreBlazor.

Namespace komponen

Saat menggunakan folder kustom untuk menahan komponen proyek Razor , tambahkan namespace yang mewakili folder ke halaman/tampilan atau ke _ViewImports.cshtml file. Dalam contoh berikut:

  • Komponen disimpan di Components folder proyek.
  • Tempat {APP NAMESPACE} penampung adalah namespace proyek. Components mewakili nama folder.
@using {APP NAMESPACE}.Components

Contohnya:

@using BlazorSample.Components

File _ViewImports.cshtml terletak di Pages folder Razor aplikasi Pages atau Views folder aplikasi MVC.

Untuk informasi selengkapnya, lihat komponen ASP.NET CoreRazor.

Sumber Daya Tambahan:

Prarender komponen ASP.NET Core Razor