Share via

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

  • Blazor dukungan dapat ditambahkan ke aplikasi ASP.NET Core.
  • Untuk komponen interaktif yang tidak dapat dirutekan secara langsung dari permintaan pengguna, lihat bagian Menggunakan komponen yang tidak dapat dirutekan di halaman atau tampilan . Ikuti panduan ini saat aplikasi menyematkan komponen ke halaman dan tampilan yang ada dengan Pembantu Tag Komponen.
  • Untuk komponen interaktif yang dapat dirutekan secara langsung dari permintaan pengguna, lihat bagian Menggunakan komponen yang dapat dirutekan. Ikuti panduan ini ketika pengunjung harus dapat membuat permintaan HTTP di browser mereka untuk komponen dengan arahan @page .

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>

Anda dapat menyediakan tata letak default dengan RouteView.DefaultLayout parameter RouteView komponen:

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

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

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="BlazorSample.styles.css" />
    <HeadOutlet />
</head>

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

</html>

<link> Untuk elemen dalam contoh sebelumnya, ubah BlazorSample nama file lembar gaya agar sesuai dengan nama proyek aplikasi. Misalnya, proyek bernama ContosoApp menggunakan ContosoApp.styles.css nama file lembar gaya:

<link rel="stylesheet" href="ContosoApp.styles.css" />

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 Interactive Auto atau Interactive WebAssembly, 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 Aplikasi Web donor Blazor untuk menyediakan aset ke aplikasi. Ikuti panduan dalam artikel Tooling for ASP.NET Core Blazor , memilih dukungan untuk fitur templat berikut saat membuat Blazor Aplikasi Web.

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 Aplikasi Web donor Blazor , 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 Aplikasi Web donor Blazor 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 Aplikasi Web donor Blazor )

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 Aplikasi Web donor Blazor 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 Aplikasi Web donor Blazor , Anda harus menyesuaikan namespace layanan di seluruh aset yang didokumentasikan agar sesuai jika Anda ingin menggunakan sisa 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 Aplikasi Web donor Blazor , 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.

Menggunakan komponen yang tidak dapat dirutekan di halaman atau tampilan

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

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>

    Tidak perlu menambahkan blazor.web.js skrip secara manual ke aplikasi karena Blazor kerangka kerja 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 AddInteractiveInteractiveServerRenderMode 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" />

Menggunakan komponen yang dapat dirutekan

Gunakan panduan berikut untuk mengintegrasikan komponen yang dapat dirutekan RazorRazor ke dalam halaman atau aplikasi MVC yang ada.

Panduan di bagian ini mengasumsikan:

  • Judul aplikasi adalah Blazor Sample.
  • Namespace aplikasi adalah BlazorSample.

Untuk mendukung komponen yang dapat dirutekan Razor :

Components Tambahkan folder ke folder akar proyek.

Tambahkan file impor ke Components folder dengan isi berikut.

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

{APP NAMESPACE} Ubah tempat penampung ke namespace proyek. Contohnya:

@using BlazorSample
@using BlazorSample.Components

Layout Tambahkan folder ke Components folder .

Tambahkan komponen footer dan lembar gaya ke Layout folder.

Components/Layout/Footer.razor:

<footer class="border-top footer text-muted">
    <div class="container">
        &copy; 2023 - {APP TITLE} - <a href="/privacy">Privacy</a>
    </div>
</footer>

Di markup sebelumnya, atur {APP TITLE} tempat penampung ke judul aplikasi. Contohnya:

&copy; 2023 - Blazor Sample - <a href="/privacy">Privacy</a>

Components/Layout/Footer.razor.css:

.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}

Tambahkan komponen menu navigasi ke Layout folder.

Components/Layout/NavMenu.razor:

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
    <a class="navbar-brand" href="/">{APP TITLE}</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
        <ul class="navbar-nav flex-grow-1">
            <li class="nav-item">
                <a class="nav-link text-dark" href="/">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="/privacy">Privacy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-dark" href="/counter">Counter</a>
            </li>
        </ul>
    </div>
</div>
</nav>

Di markup sebelumnya, atur {APP TITLE} tempat penampung ke judul aplikasi. Contohnya:

<a class="navbar-brand" href="/">Blazor Sample</a>

Components/Layout/NavMenu.razor.css:

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a {
    color: #0077cc;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

Tambahkan komponen tata letak utama dan lembar gaya ke Layout folder.

Components/Layout/MainLayout.razor:

@inherits LayoutComponentBase

<header>
    <NavMenu />
</header>

<div class="container">
    <main role="main" class="pb-3">
        @Body
    </main>
</div>

<Footer />

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Components/Layout/MainLayout.razor.css:

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

Routes Tambahkan komponen ke Components folder dengan konten berikut.

Components/Routes.razor:

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

App Tambahkan komponen ke Components folder dengan konten berikut.

Components/App.razor:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{APP TITLE}</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
    <link rel="stylesheet" href="/{APP NAMESPACE}.styles.css" />
    <HeadOutlet />
</head>
<body>
    <Routes />
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js"></script>
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

Dalam kode sebelumnya, perbarui judul aplikasi dan nama file lembar gaya:

  • {APP TITLE} Untuk tempat penampung dalam <title> elemen , atur judul aplikasi. Contohnya:

    <title>Blazor Sample</title>

  • {APP NAMESPACE} Untuk tempat penampung dalam elemen lembar gaya<link>, atur namespace aplikasi. Contohnya:

    <link rel="stylesheet" href="/BlazorSample.styles.css" />

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 Halaman (MapRazorPages), panggil MapRazorComponents untuk menemukan komponen yang tersedia dan menentukan komponen akar aplikasi. 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();

Buat Pages folder di Components folder untuk komponen yang dapat dirutekan. Contoh berikut adalah Counter komponen berdasarkan Counter komponen dalam Blazor templat proyek.

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>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++;
    }
}

Jalankan proyek dan navigasikan ke komponen yang dapat dirutekan Counter di /counter.

Untuk informasi selengkapnya tentang namespace layanan, lihat bagian Namespace komponen .

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()
{
    return 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