Mengintegrasikan komponen ASP.NET Core Razor dengan MVC atau Razor Pages
Catatan
Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.
Peringatan
Versi ASP.NET Core ini tidak lagi didukung. Untuk informasi selengkapnya, lihat Kebijakan Dukungan .NET dan .NET Core. Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.
Penting
Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.
Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.
Razor komponen dapat diintegrasikan ke dalam Razor aplikasi Pages atau MVC. Ketika halaman atau tampilan dirender, komponen dapat dirender secara bersamaan.
Penting
Perubahan kerangka kerja di seluruh rilis ASP.NET Core menyebabkan serangkaian instruksi yang berbeda dalam artikel ini. Sebelum menggunakan panduan artikel ini, konfirmasikan bahwa pemilih versi dokumen di bagian atas artikel ini cocok dengan versi ASP.NET Core yang ingin Anda gunakan untuk aplikasi Anda.
Pra-penyajian dapat meningkatkan Pengoptimalan Mesin Pencari (SEO) dengan merender konten untuk respons HTTP awal yang dapat digunakan mesin pencari untuk menghitung peringkat halaman.
Setelah mengonfigurasi proyek, gunakan panduan di bagian berikut tergantung pada persyaratan proyek:
- Untuk komponen yang dapat dirutekan secara langsung dari permintaan pengguna. Ikuti panduan ini ketika pengunjung harus dapat membuat permintaan HTTP di browser mereka untuk komponen dengan arahan
@page
. - Untuk komponen yang tidak dapat dirutekan secara langsung dari permintaan pengguna, lihat bagian Render komponen dari halaman atau tampilan . Ikuti panduan ini saat aplikasi menyematkan komponen ke halaman atau tampilan yang ada dengan Pembantu Tag Komponen.
Konfigurasi
Gunakan panduan berikut untuk mengintegrasikan Razor komponen ke dalam halaman atau tampilan Halaman atau aplikasi MVC yang ada Razor .
Tambahkan file impor ke folder akar proyek dengan konten berikut.
{APP NAMESPACE}
Ubah tempat penampung ke namespace proyek._Imports.razor
:@using System.Net.Http @using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Components.Authorization @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.JSInterop @using {APP NAMESPACE}
Dalam file tata letak proyek (
Pages/Shared/_Layout.cshtml
di Razor aplikasi Pages atauViews/Shared/_Layout.cshtml
di aplikasi MVC):Tambahkan tag dan HeadOutlet Komponen Pembantu Tag berikut
<base>
ke<head>
elemen :<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 untukblazor.server.js
skrip segera sebelum bagianScripts
render (@await RenderSectionAsync(...)
):<script src="_framework/blazor.server.js"></script>
Kerangka kerja menambahkan
blazor.server.js
skrip ke aplikasi. Tidak perlu menambahkanblazor.server.js
file skrip secara manual ke aplikasi.
Catatan
Biasanya, tata letak dimuat melalui
_ViewStart.cshtml
file.Daftarkan Blazor Server layanan tempat
Program.cs
layanan terdaftar:builder.Services.AddServerSideBlazor();
Blazor Tambahkan titik akhir Hub ke titik
Program.cs
akhir tempat rute dipetakan. Tempatkan baris berikut setelah panggilan keMapRazorPages
(Razor Pages) atauMapControllerRoute
(MVC):app.MapBlazorHub();
Integrasikan komponen ke halaman atau tampilan apa pun. Misalnya, tambahkan
Counter
komponen ke folder proyekShared
.Pages/Shared/Counter.razor
(Razor Pages) atauViews/Shared/Counter.razor
(MVC):<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++; } }
Razor Halaman:
Di halaman Razor proyek
Index
aplikasi Pages, tambahkanCounter
namespace layanan komponen dan sematkan komponen ke dalam halaman. Ketika halaman dimuatIndex
,Counter
komponen telah dirender di halaman. Dalam contoh berikut, ganti{APP NAMESPACE}
tempat penampung dengan namespace proyek.Pages/Index.cshtml
:@page @using {APP NAMESPACE}.Pages.Shared @model IndexModel @{ ViewData["Title"] = "Home page"; } <component type="typeof(Counter)" render-mode="ServerPrerendered" />
MVC:
Dalam tampilan proyek
Index
aplikasi MVC, tambahkanCounter
namespace layanan komponen dan sematkan komponen ke dalam tampilan. Saat tampilan dimuatIndex
,Counter
komponen telah dirender di halaman. Dalam contoh berikut, ganti{APP NAMESPACE}
tempat penampung dengan namespace proyek.Views/Home/Index.cshtml
:@using {APP NAMESPACE}.Views.Shared @{ ViewData["Title"] = "Home Page"; } <component type="typeof(Counter)" render-mode="ServerPrerendered" />
Untuk informasi selengkapnya, lihat bagian Render komponen dari halaman atau tampilan .
Menggunakan komponen yang dapat dirutekan di Razor aplikasi Pages
Bagian ini berkaitan dengan penambahan komponen yang dapat dirutekan secara langsung dari permintaan pengguna.
Untuk mendukung komponen yang dapat dirutekan Razor di Razor aplikasi Pages:
Ikuti panduan di bagian Konfigurasi .
App
Tambahkan komponen ke akar proyek dengan konten berikut.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(App).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <PageTitle>Not found</PageTitle> <p role="alert">Sorry, there's nothing at this address.</p> </NotFound> </Router>
_Host
Tambahkan halaman ke proyek dengan konten berikut.{APP NAMESPACE}
Ganti tempat penampung dengan namespace aplikasi.Pages/_Host.cshtml
:@page @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <component type="typeof(App)" render-mode="ServerPrerendered" />
Catatan
Contoh sebelumnya mengasumsikan bahwa HeadOutlet komponen dan Blazor skrip (
_framework/blazor.server.js
) dirender oleh tata letak aplikasi. Untuk informasi selengkapnya, lihat bagian Konfigurasi .RenderMode mengonfigurasi apakah
App
komponen:- Di-prerender ke dalam halaman.
- Dirender sebagai HTML statis di halaman atau jika menyertakan informasi yang Blazor diperlukan untuk bootstrap aplikasi dari agen pengguna.
Untuk informasi selengkapnya tentang Pembantu Tag Komponen, termasuk meneruskan parameter dan RenderMode konfigurasi, lihat Pembantu Tag Komponen di ASP.NET Core.
Program.cs
Di titik akhir, tambahkan rute berprioritas rendah untuk_Host
halaman sebagai titik akhir terakhir:app.MapFallbackToPage("/_Host");
Tambahkan komponen yang dapat dirutekan ke proyek. Contoh berikut adalah
RoutableCounter
komponen berdasarkanCounter
komponen dalam Blazor templat proyek.Pages/RoutableCounter.razor
:@page "/routable-counter" <PageTitle>Routable Counter</PageTitle> <h1>Routable 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
RoutableCounter
di/routable-counter
.
Untuk informasi selengkapnya tentang namespace layanan, lihat bagian Namespace komponen .
Menggunakan komponen yang dapat dirutekan dalam aplikasi MVC
Bagian ini berkaitan dengan penambahan komponen yang dapat dirutekan secara langsung dari permintaan pengguna.
Untuk mendukung komponen yang dapat dirutekan Razor di aplikasi MVC:
Ikuti panduan di bagian Konfigurasi .
App
Tambahkan komponen ke akar proyek dengan konten berikut.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(App).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <PageTitle>Not found</PageTitle> <p role="alert">Sorry, there's nothing at this address.</p> </NotFound> </Router>
_Host
Tambahkan tampilan ke proyek dengan konten berikut.{APP NAMESPACE}
Ganti tempat penampung dengan namespace aplikasi.Views/Home/_Host.cshtml
:@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <component type="typeof(App)" render-mode="ServerPrerendered" />
Catatan
Contoh sebelumnya mengasumsikan bahwa HeadOutlet komponen dan Blazor skrip (
_framework/blazor.server.js
) dirender oleh tata letak aplikasi. Untuk informasi selengkapnya, lihat bagian Konfigurasi .RenderMode mengonfigurasi apakah
App
komponen:- Di-prerender ke dalam halaman.
- Dirender sebagai HTML statis di halaman atau jika menyertakan informasi yang Blazor diperlukan untuk bootstrap aplikasi dari agen pengguna.
Untuk informasi selengkapnya tentang Pembantu Tag Komponen, termasuk meneruskan parameter dan RenderMode konfigurasi, lihat Pembantu Tag Komponen di ASP.NET Core.
Tambahkan tindakan ke Home pengontrol.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
Program.cs
Di titik akhir, tambahkan rute berprioritas rendah untuk tindakan pengontrol yang mengembalikan_Host
tampilan:app.MapFallbackToController("Blazor", "Home");
Buat
Pages
folder di aplikasi MVC dan tambahkan komponen yang dapat dirutekan. Contoh berikut adalahRoutableCounter
komponen berdasarkanCounter
komponen dalam Blazor templat proyek.Pages/RoutableCounter.razor
:@page "/routable-counter" <PageTitle>Routable Counter</PageTitle> <h1>Routable 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
RoutableCounter
di/routable-counter
.
Untuk informasi selengkapnya tentang namespace layanan, lihat bagian Namespace komponen .
Merender komponen dari halaman atau tampilan
Bagian ini berkaitan dengan menambahkan komponen ke halaman atau tampilan, di mana komponen tidak dapat dirutekan secara langsung dari permintaan pengguna.
Untuk merender komponen dari halaman atau tampilan, gunakan Pembantu Tag Komponen.
Merender komponen interaktif stateful
Komponen interaktif stateful dapat ditambahkan ke Razor halaman atau tampilan.
Saat 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.
Halaman berikut Razor merender Counter
komponen:
<h1>Razor Page</h1>
<component type="typeof(Counter)" render-mode="ServerPrerendered"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.
Merender komponen noninteraktif
Di halaman berikut Razor , Counter
komponen dirender secara statis dengan nilai awal yang ditentukan menggunakan formulir. Karena komponen dirender secara statis, komponen tidak interaktif:
<h1>Razor Page</h1>
<form>
<input type="number" asp-for="InitialValue" />
<button type="submit">Set initial value</button>
</form>
<component type="typeof(Counter)" render-mode="Static"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.
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
File _ViewImports.cshtml
terletak di Pages
folder Razor aplikasi Pages atau Views
folder aplikasi MVC.
Untuk informasi selengkapnya, lihat komponen ASP.NET CoreRazor.
Mempertahankan status yang telah dirender sebelumnya
Tanpa mempertahankan status yang telah dirender sebelumnya, status yang digunakan selama pra-penyajian hilang dan harus dibuat ulang saat aplikasi dimuat sepenuhnya. Jika ada status yang disiapkan secara asinkron, UI dapat berkedot karena UI yang telah dirender diganti dengan tempat penampung sementara dan kemudian sepenuhnya dirender lagi.
Untuk mempertahankan status komponen yang telah dirender sebelumnya, gunakan Pembantu Tag Status Komponen Persisten (sumber referensi). Tambahkan tag Pembantu _Host
Tag, <persist-component-state />
, di dalam tag penutup </body>
halaman di aplikasi yang merender komponen.
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).
Di Pages/_Host.cshtml
aplikasi Blazor yang ada ServerPrerendered
di Blazor Server aplikasi:
<body>
...
<persist-component-state />
</body>
Tentukan status apa yang akan bertahan menggunakan PersistentComponentState layanan. PersistentComponentState.RegisterOnPersisting
mendaftarkan panggilan balik untuk mempertahankan status komponen sebelum aplikasi dijeda. Status diambil ketika aplikasi dilanjutkan.
Dalam contoh berikut:
- Tempat
{TYPE}
penampung mewakili jenis data yang akan dipertahankan (misalnya,WeatherForecast[]
). - Tempat
{TOKEN}
penampung adalah string pengidentifikasi status (misalnya,fetchdata
).
@implements IDisposable
@inject PersistentComponentState ApplicationState
...
@code {
private {TYPE} data;
private PersistingComponentStateSubscription persistingSubscription;
protected override async Task OnInitializedAsync()
{
persistingSubscription =
ApplicationState.RegisterOnPersisting(PersistData);
if (!ApplicationState.TryTakeFromJson<{TYPE}>(
"{TOKEN}", out var restored))
{
data = await ...;
}
else
{
data = restored!;
}
}
private Task PersistData()
{
ApplicationState.PersistAsJson("{TOKEN}", data);
return Task.CompletedTask;
}
void IDisposable.Dispose()
{
persistingSubscription.Dispose();
}
}
Contoh berikut adalah versi komponen yang diperbarui FetchData
berdasarkan Blazor templat proyek. Komponen mempertahankan WeatherForecastPreserveState
status prakiraan cuaca selama pra-penyajian lalu mengambil status untuk menginisialisasi komponen. Pembantu Tag Status Komponen Persist mempertahankan status komponen setelah semua pemanggilan komponen.
Pages/WeatherForecastPreserveState.razor
:
@page "/weather-forecast-preserve-state"
@using BlazorSample.Shared
@implements IDisposable
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState
<PageTitle>Weather Forecast</PageTitle>
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@code {
private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
private PersistingComponentStateSubscription persistingSubscription;
protected override async Task OnInitializedAsync()
{
persistingSubscription =
ApplicationState.RegisterOnPersisting(PersistForecasts);
if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
"fetchdata", out var restored))
{
forecasts =
await WeatherForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
}
else
{
forecasts = restored!;
}
}
private Task PersistForecasts()
{
ApplicationState.PersistAsJson("fetchdata", forecasts);
return Task.CompletedTask;
}
void IDisposable.Dispose()
{
persistingSubscription.Dispose();
}
}
Dengan menginisialisasi komponen dengan status yang sama yang digunakan selama prarender, langkah-langkah inisialisasi mahal hanya dijalankan sekali. UI yang dirender juga cocok dengan UI yang telah dirender sebelumnya, sehingga tidak ada kedipan yang terjadi di browser.
Status pra-penyajian yang dipertahankan ditransfer ke klien, di mana ia digunakan untuk memulihkan status komponen. ASP.NET Core Data Protection memastikan bahwa data ditransfer dengan aman di Blazor Server aplikasi.
Ukuran status dan SignalR batas ukuran pesan yang telah dirender sebelumnya
Ukuran status besar yang telah dirender mungkin melebihi Blazorbatas ukuran pesan sirkuit, SignalR yang menghasilkan hal berikut:
- SignalR Sirkuit gagal diinisialisasi dengan kesalahan pada klien:Circuit host not initialized.
- Antarmuka pengguna koneksi ulang pada klien muncul ketika sirkuit gagal. Pemulihan tidak dimungkinkan.
Untuk mengatasi masalah tersebut, gunakan salah satu pendekatan berikut:
- Kurangi jumlah data yang Anda masukkan ke dalam status yang telah dirender sebelumnya.
- Tingkatkan SignalR batas ukuran pesan. PERINGATAN: Meningkatkan batas dapat meningkatkan risiko serangan Denial of Service (DoS).
Sumber daya tambahan Blazor Server
- Manajemen status: Menangani pra-penyajian
- Razor subjek siklus hidup komponen yang berkaitan dengan pra-penyajian
- Autentikasi dan otorisasi: Aspek umum
- Menangani Kesalahan: Pra-penyajian
- Host dan sebarkan: Blazor Server
- Mitigasi ancaman: Pembuatan skrip lintas situs (XSS)
- OnNavigateAsync dijalankan dua kali saat pra-penyajian: Menangani peristiwa navigasi asinkron dengan
OnNavigateAsync
Pra-penyajian dapat meningkatkan Pengoptimalan Mesin Pencari (SEO) dengan merender konten untuk respons HTTP awal yang dapat digunakan mesin pencari untuk menghitung peringkat halaman.
Setelah mengonfigurasi proyek, gunakan panduan di bagian berikut tergantung pada persyaratan proyek:
- Komponen yang dapat dirutekan: Untuk komponen yang dapat dirutekan secara langsung dari permintaan pengguna. Ikuti panduan ini ketika pengunjung harus dapat membuat permintaan HTTP di browser mereka untuk komponen dengan arahan
@page
. - Merender komponen dari halaman atau tampilan: Untuk komponen yang tidak dapat dirutekan secara langsung dari permintaan pengguna. Ikuti panduan ini saat aplikasi menyematkan komponen ke halaman atau tampilan yang ada dengan Pembantu Tag Komponen.
Konfigurasi
Gunakan panduan berikut untuk mengintegrasikan Razor komponen ke dalam halaman atau tampilan Halaman atau aplikasi MVC yang ada Razor .
Penting
Penggunaan halaman tata letak (_Layout.cshtml
) dengan Pembantu Tag Komponen untuk HeadOutlet komponen diperlukan untuk mengontrol <head>
konten, seperti judul halaman (PageTitle komponen) dan elemen kepala (HeadContent komponen) lainnya. Untuk informasi selengkapnya, lihat Mengontrol konten head di aplikasi ASP.NET CoreBlazor.
Dalam file tata letak proyek:
Tambahkan Tag dan HeadOutlet Komponen Pembantu Tag berikut
<base>
ke<head>
elemen diPages/Shared/_Layout.cshtml
(Razor Pages) atauViews/Shared/_Layout.cshtml
(MVC):<base href="~/" /> <component type="typeof(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 untukblazor.server.js
skrip segera sebelum bagianScripts
render (@await RenderSectionAsync(...)
) di tata letak aplikasi.Pages/Shared/_Layout.cshtml
(Razor Pages) atauViews/Shared/_Layout.cshtml
(MVC):<script src="_framework/blazor.server.js"></script>
Kerangka kerja menambahkan
blazor.server.js
skrip ke aplikasi. Tidak perlu menambahkanblazor.server.js
file skrip secara manual ke aplikasi.
Tambahkan file impor ke folder akar proyek dengan konten berikut.
{APP NAMESPACE}
Ubah tempat penampung ke namespace proyek._Imports.razor
:@using System.Net.Http @using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Components.Authorization @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.JSInterop @using {APP NAMESPACE}
Daftarkan Blazor Server layanan tempat
Program.cs
layanan terdaftar:builder.Services.AddServerSideBlazor();
Blazor Tambahkan titik akhir Hub ke titik
Program.cs
akhir tempat rute dipetakan.Tempatkan baris berikut setelah panggilan ke
MapRazorPages
(Razor Pages) atauMapControllerRoute
(MVC):app.MapBlazorHub();
Integrasikan komponen ke halaman atau tampilan apa pun. Misalnya, tambahkan
Counter
komponen ke folder proyekShared
.Pages/Shared/Counter.razor
(Razor Pages) atauViews/Shared/Counter.razor
(MVC):<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++; } }
Razor Halaman:
Di halaman Razor proyek
Index
aplikasi Pages, tambahkanCounter
namespace layanan komponen dan sematkan komponen ke dalam halaman. Ketika halaman dimuatIndex
,Counter
komponen telah dirender di halaman. Dalam contoh berikut, ganti{APP NAMESPACE}
tempat penampung dengan namespace proyek.Pages/Index.cshtml
:@page @using {APP NAMESPACE}.Pages.Shared @model IndexModel @{ ViewData["Title"] = "Home page"; } <component type="typeof(Counter)" render-mode="ServerPrerendered" />
MVC:
Dalam tampilan proyek
Index
aplikasi MVC, tambahkanCounter
namespace layanan komponen dan sematkan komponen ke dalam tampilan. Saat tampilan dimuatIndex
,Counter
komponen telah dirender di halaman. Dalam contoh berikut, ganti{APP NAMESPACE}
tempat penampung dengan namespace proyek.Views/Home/Index.cshtml
:@using {APP NAMESPACE}.Views.Shared @{ ViewData["Title"] = "Home Page"; } <component type="typeof(Counter)" render-mode="ServerPrerendered" />
Untuk informasi selengkapnya, lihat bagian Render komponen dari halaman atau tampilan .
Menggunakan komponen yang dapat dirutekan di Razor aplikasi Pages
Bagian ini berkaitan dengan penambahan komponen yang dapat dirutekan secara langsung dari permintaan pengguna.
Untuk mendukung komponen yang dapat dirutekan Razor di Razor aplikasi Pages:
Ikuti panduan di bagian Konfigurasi .
App
Tambahkan komponen ke akar proyek dengan konten berikut.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(App).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <PageTitle>Not found</PageTitle> <p role="alert">Sorry, there's nothing at this address.</p> </NotFound> </Router>
_Host
Tambahkan halaman ke proyek dengan konten berikut.Pages/_Host.cshtml
:@page "/blazor" @namespace {APP NAMESPACE}.Pages.Shared @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @{ Layout = "_Layout"; } <component type="typeof(App)" render-mode="ServerPrerendered" />
Dalam skenario ini, komponen menggunakan file bersama
_Layout.cshtml
untuk tata letaknya.Penting
Penggunaan halaman tata letak (
_Layout.cshtml
) dengan Pembantu Tag Komponen untuk HeadOutlet komponen diperlukan untuk mengontrol<head>
konten, seperti judul halaman (PageTitle komponen) dan elemen kepala (HeadContent komponen) lainnya. Untuk informasi selengkapnya, lihat Mengontrol konten head di aplikasi ASP.NET CoreBlazor.RenderMode mengonfigurasi apakah
App
komponen:- Di-prerender ke dalam halaman.
- Dirender sebagai HTML statis di halaman atau jika menyertakan informasi yang Blazor diperlukan untuk bootstrap aplikasi dari agen pengguna.
Untuk informasi selengkapnya tentang Pembantu Tag Komponen, termasuk meneruskan parameter dan RenderMode konfigurasi, lihat Pembantu Tag Komponen di ASP.NET Core.
Program.cs
Di titik akhir, tambahkan rute berprioritas rendah untuk_Host
halaman sebagai titik akhir terakhir:app.MapFallbackToPage("/_Host");
Tambahkan komponen yang dapat dirutekan ke proyek. Contoh berikut adalah
RoutableCounter
komponen berdasarkanCounter
komponen dalam Blazor templat proyek.Pages/RoutableCounter.razor
:@page "/routable-counter" <PageTitle>Routable Counter</PageTitle> <h1>Routable 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
RoutableCounter
di/routable-counter
.
Untuk informasi selengkapnya tentang namespace layanan, lihat bagian Namespace komponen .
Menggunakan komponen yang dapat dirutekan dalam aplikasi MVC
Bagian ini berkaitan dengan penambahan komponen yang dapat dirutekan secara langsung dari permintaan pengguna.
Untuk mendukung komponen yang dapat dirutekan Razor di aplikasi MVC:
Ikuti panduan di bagian Konfigurasi .
App
Tambahkan komponen ke akar proyek dengan konten berikut.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(App).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <PageTitle>Not found</PageTitle> <p role="alert">Sorry, there's nothing at this address.</p> </NotFound> </Router>
_Host
Tambahkan tampilan ke proyek dengan konten berikut.Views/Home/_Host.cshtml
:@namespace {APP NAMESPACE}.Views.Shared @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @{ Layout = "_Layout"; } <component type="typeof(App)" render-mode="ServerPrerendered" />
Komponen menggunakan file bersama
_Layout.cshtml
untuk tata letaknya.Penting
Penggunaan halaman tata letak (
_Layout.cshtml
) dengan Pembantu Tag Komponen untuk HeadOutlet komponen diperlukan untuk mengontrol<head>
konten, seperti judul halaman (PageTitle komponen) dan elemen kepala (HeadContent komponen) lainnya. Untuk informasi selengkapnya, lihat Mengontrol konten head di aplikasi ASP.NET CoreBlazor.RenderMode mengonfigurasi apakah
App
komponen:- Di-prerender ke dalam halaman.
- Dirender sebagai HTML statis di halaman atau jika menyertakan informasi yang Blazor diperlukan untuk bootstrap aplikasi dari agen pengguna.
Untuk informasi selengkapnya tentang Pembantu Tag Komponen, termasuk meneruskan parameter dan RenderMode konfigurasi, lihat Pembantu Tag Komponen di ASP.NET Core.
Tambahkan tindakan ke Home pengontrol.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
Program.cs
Di titik akhir, tambahkan rute berprioritas rendah untuk tindakan pengontrol yang mengembalikan_Host
tampilan:app.MapFallbackToController("Blazor", "Home");
Buat
Pages
folder di aplikasi MVC dan tambahkan komponen yang dapat dirutekan. Contoh berikut adalahRoutableCounter
komponen berdasarkanCounter
komponen dalam Blazor templat proyek.Pages/RoutableCounter.razor
:@page "/routable-counter" <PageTitle>Routable Counter</PageTitle> <h1>Routable 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
RoutableCounter
di/routable-counter
.
Untuk informasi selengkapnya tentang namespace layanan, lihat bagian Namespace komponen .
Merender komponen dari halaman atau tampilan
Bagian ini berkaitan dengan menambahkan komponen ke halaman atau tampilan, di mana komponen tidak dapat dirutekan secara langsung dari permintaan pengguna.
Untuk merender komponen dari halaman atau tampilan, gunakan Pembantu Tag Komponen.
Merender komponen interaktif stateful
Komponen interaktif stateful dapat ditambahkan ke Razor halaman atau tampilan.
Saat 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.
Halaman berikut Razor merender Counter
komponen:
<h1>Razor Page</h1>
<component type="typeof(Counter)" render-mode="ServerPrerendered"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.
Penting
Penggunaan halaman tata letak (_Layout.cshtml
) dengan Pembantu Tag Komponen untuk HeadOutlet komponen diperlukan untuk mengontrol <head>
konten, seperti judul halaman (PageTitle komponen) dan elemen kepala (HeadContent komponen) lainnya. Untuk informasi selengkapnya, lihat Mengontrol konten head di aplikasi ASP.NET CoreBlazor.
Merender komponen noninteraktif
Di halaman berikut Razor , Counter
komponen dirender secara statis dengan nilai awal yang ditentukan menggunakan formulir. Karena komponen dirender secara statis, komponen tidak interaktif:
<h1>Razor Page</h1>
<form>
<input type="number" asp-for="InitialValue" />
<button type="submit">Set initial value</button>
</form>
<component type="typeof(Counter)" render-mode="Static"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.
Penting
Penggunaan halaman tata letak (_Layout.cshtml
) dengan Pembantu Tag Komponen untuk HeadOutlet komponen diperlukan untuk mengontrol <head>
konten, seperti judul halaman (PageTitle komponen) dan elemen kepala (HeadContent komponen) lainnya. Untuk informasi selengkapnya, lihat Mengontrol konten head di aplikasi 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
File _ViewImports.cshtml
terletak di Pages
folder Razor aplikasi Pages atau Views
folder aplikasi MVC.
Untuk informasi selengkapnya, lihat komponen ASP.NET CoreRazor.
Mempertahankan status yang telah dirender sebelumnya
Tanpa mempertahankan status yang telah dirender sebelumnya, status yang digunakan selama pra-penyajian hilang dan harus dibuat ulang saat aplikasi dimuat sepenuhnya. Jika ada status yang disiapkan secara asinkron, UI dapat berkedot karena UI yang telah dirender diganti dengan tempat penampung sementara dan kemudian sepenuhnya dirender lagi.
Untuk mengatasi masalah ini, Blazor mendukung status bertahan di halaman yang telah dirender sebelumnya menggunakan Pembantu Tag Status Komponen Persisten. Tambahkan tag Pembantu Tag, <persist-component-state />
, di dalam tag penutup </body>
.
Pages/_Layout.cshtml
:
<body>
...
<persist-component-state />
</body>
Tentukan status apa yang akan bertahan menggunakan PersistentComponentState layanan. PersistentComponentState.RegisterOnPersisting
mendaftarkan panggilan balik untuk mempertahankan status komponen sebelum aplikasi dijeda. Status diambil ketika aplikasi dilanjutkan.
Contoh berikut adalah versi komponen yang diperbarui FetchData
berdasarkan Blazor templat proyek. Komponen mempertahankan WeatherForecastPreserveState
status prakiraan cuaca selama pra-penyajian lalu mengambil status untuk menginisialisasi komponen. Pembantu Tag Status Komponen Persist mempertahankan status komponen setelah semua pemanggilan komponen.
Pages/WeatherForecastPreserveState.razor
:
@page "/weather-forecast-preserve-state"
@implements IDisposable
@using BlazorSample.Shared
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState
<PageTitle>Weather Forecast</PageTitle>
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@code {
private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
private PersistingComponentStateSubscription persistingSubscription;
protected override async Task OnInitializedAsync()
{
persistingSubscription =
ApplicationState.RegisterOnPersisting(PersistForecasts);
if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
"fetchdata", out var restored))
{
forecasts =
await WeatherForecastService.GetForecastAsync(DateTime.Now);
}
else
{
forecasts = restored!;
}
}
private Task PersistForecasts()
{
ApplicationState.PersistAsJson("fetchdata", forecasts);
return Task.CompletedTask;
}
void IDisposable.Dispose()
{
persistingSubscription.Dispose();
}
}
Dengan menginisialisasi komponen dengan status yang sama yang digunakan selama prarender, langkah-langkah inisialisasi mahal hanya dijalankan sekali. UI yang dirender juga cocok dengan UI yang telah dirender sebelumnya, sehingga tidak ada kedipan yang terjadi di browser.
Status pra-penyajian yang dipertahankan ditransfer ke klien, di mana ia digunakan untuk memulihkan status komponen. ASP.NET Core Data Protection memastikan bahwa data ditransfer dengan aman di Blazor Server aplikasi.
Ukuran status dan SignalR batas ukuran pesan yang telah dirender sebelumnya
Ukuran status besar yang telah dirender mungkin melebihi Blazorbatas ukuran pesan sirkuit, SignalR yang menghasilkan hal berikut:
- SignalR Sirkuit gagal diinisialisasi dengan kesalahan pada klien:Circuit host not initialized.
- Antarmuka pengguna koneksi ulang pada klien muncul ketika sirkuit gagal. Pemulihan tidak dimungkinkan.
Untuk mengatasi masalah tersebut, gunakan salah satu pendekatan berikut:
- Kurangi jumlah data yang Anda masukkan ke dalam status yang telah dirender sebelumnya.
- Tingkatkan SignalR batas ukuran pesan. PERINGATAN: Meningkatkan batas dapat meningkatkan risiko serangan Denial of Service (DoS).
Sumber daya tambahan Blazor Server
- Manajemen status: Menangani pra-penyajian
- Razor subjek siklus hidup komponen yang berkaitan dengan pra-penyajian
- Autentikasi dan otorisasi: Aspek umum
- Menangani Kesalahan: Pra-penyajian
- Host dan sebarkan: Blazor Server
- Mitigasi ancaman: Pembuatan skrip lintas situs (XSS)
Pra-penyajian dapat meningkatkan Pengoptimalan Mesin Pencari (SEO) dengan merender konten untuk respons HTTP awal yang dapat digunakan mesin pencari untuk menghitung peringkat halaman.
Setelah mengonfigurasi proyek, gunakan panduan di bagian berikut tergantung pada persyaratan proyek:
- Komponen yang dapat dirutekan: Untuk komponen yang dapat dirutekan secara langsung dari permintaan pengguna. Ikuti panduan ini ketika pengunjung harus dapat membuat permintaan HTTP di browser mereka untuk komponen dengan arahan
@page
. - Merender komponen dari halaman atau tampilan: Untuk komponen yang tidak dapat dirutekan secara langsung dari permintaan pengguna. Ikuti panduan ini saat aplikasi menyematkan komponen ke halaman atau tampilan yang ada dengan Pembantu Tag Komponen.
Konfigurasi
Halaman atau aplikasi MVC yang ada Razor dapat mengintegrasikan Razor komponen ke dalam halaman atau tampilan:
Dalam file tata letak proyek:
Tambahkan tag berikut
<base>
ke<head>
elemen diPages/Shared/_Layout.cshtml
(Razor Pages) atauViews/Shared/_Layout.cshtml
(MVC):<base href="~/" />
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.<script>
Tambahkan tag untukblazor.server.js
skrip segera sebelum bagianScripts
render.Pages/Shared/_Layout.cshtml
(Razor Pages) atauViews/Shared/_Layout.cshtml
(MVC):... <script src="_framework/blazor.server.js"></script> @await RenderSectionAsync("Scripts", required: false) </body>
Kerangka kerja menambahkan
blazor.server.js
skrip ke aplikasi. Tidak perlu menambahkanblazor.server.js
file skrip secara manual ke aplikasi.
Tambahkan file impor ke folder akar proyek dengan konten berikut.
{APP NAMESPACE}
Ubah tempat penampung ke namespace proyek._Imports.razor
:@using System.Net.Http @using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Components.Authorization @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using Microsoft.JSInterop @using {APP NAMESPACE}
Daftarkan Blazor Server layanan di
Startup.ConfigureServices
.Di
Startup.cs
:services.AddServerSideBlazor();
Blazor Tambahkan titik akhir Hub ke titik akhir (
app.UseEndpoints
) dariStartup.Configure
.Startup.cs
:endpoints.MapBlazorHub();
Integrasikan komponen ke halaman atau tampilan apa pun. Misalnya, tambahkan
Counter
komponen ke folder proyekShared
.Pages/Shared/Counter.razor
(Razor Pages) atauViews/Shared/Counter.razor
(MVC):<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++; } }
Razor Halaman:
Di halaman Razor proyek
Index
aplikasi Pages, tambahkanCounter
namespace layanan komponen dan sematkan komponen ke dalam halaman. Ketika halaman dimuatIndex
,Counter
komponen telah dirender di halaman. Dalam contoh berikut, ganti{APP NAMESPACE}
tempat penampung dengan namespace proyek.Pages/Index.cshtml
:@page @using {APP NAMESPACE}.Pages.Shared @model IndexModel @{ ViewData["Title"] = "Home page"; } <div> <component type="typeof(Counter)" render-mode="ServerPrerendered" /> </div>
Dalam contoh sebelumnya, ganti
{APP NAMESPACE}
tempat penampung dengan namespace aplikasi.MVC:
Dalam tampilan proyek
Index
aplikasi MVC, tambahkanCounter
namespace layanan komponen dan sematkan komponen ke dalam tampilan. Saat tampilan dimuatIndex
,Counter
komponen telah dirender di halaman. Dalam contoh berikut, ganti{APP NAMESPACE}
tempat penampung dengan namespace proyek.Views/Home/Index.cshtml
:@using {APP NAMESPACE}.Views.Shared @{ ViewData["Title"] = "Home Page"; } <div> <component type="typeof(Counter)" render-mode="ServerPrerendered" /> </div>
Untuk informasi selengkapnya, lihat bagian Render komponen dari halaman atau tampilan .
Menggunakan komponen yang dapat dirutekan di Razor aplikasi Pages
Bagian ini berkaitan dengan penambahan komponen yang dapat dirutekan secara langsung dari permintaan pengguna.
Untuk mendukung komponen yang dapat dirutekan Razor di Razor aplikasi Pages:
Ikuti panduan di bagian Konfigurasi .
App
Tambahkan komponen ke akar proyek dengan konten berikut.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(Program).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <h1>Page not found</h1> <p>Sorry, but there's nothing here!</p> </NotFound> </Router>
Catatan
Dengan rilis ASP.NET Core 5.0.1 dan untuk rilis 5.x tambahan, komponen
Router
menyertakan parameterPreferExactMatches
yang diatur ke@true
. Untuk informasi lebih lanjut, lihat Migrasi dari ASP.NET Core 3.1 ke 5.0._Host
Tambahkan halaman ke proyek dengan konten berikut.Pages/_Host.cshtml
:@page "/blazor" @{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
Komponen menggunakan file bersama
_Layout.cshtml
untuk tata letaknya.RenderMode mengonfigurasi apakah
App
komponen:- Di-prerender ke dalam halaman.
- Dirender sebagai HTML statis di halaman atau jika menyertakan informasi yang Blazor diperlukan untuk bootstrap aplikasi dari agen pengguna.
Untuk informasi selengkapnya tentang Pembantu Tag Komponen, termasuk meneruskan parameter dan RenderMode konfigurasi, lihat Pembantu Tag Komponen di ASP.NET Core.
Startup.Configure
Di titikStartup.cs
akhir , tambahkan rute berprioritas rendah untuk_Host
halaman sebagai titik akhir terakhir:endpoints.MapFallbackToPage("/_Host");
Contoh berikut menunjukkan baris yang ditambahkan dalam konfigurasi titik akhir aplikasi umum:
app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); endpoints.MapBlazorHub(); endpoints.MapFallbackToPage("/_Host"); });
Tambahkan komponen yang dapat dirutekan ke proyek.
Pages/RoutableCounter.razor
:@page "/routable-counter" <h1>Routable 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
RoutableCounter
di/routable-counter
.
Untuk informasi selengkapnya tentang namespace layanan, lihat bagian Namespace komponen .
Menggunakan komponen yang dapat dirutekan dalam aplikasi MVC
Bagian ini berkaitan dengan penambahan komponen yang dapat dirutekan secara langsung dari permintaan pengguna.
Untuk mendukung komponen yang dapat dirutekan Razor di aplikasi MVC:
Ikuti panduan di bagian Konfigurasi .
App
Tambahkan komponen ke akar proyek dengan konten berikut.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(Program).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <h1>Page not found</h1> <p>Sorry, but there's nothing here!</p> </NotFound> </Router>
Catatan
Dengan rilis ASP.NET Core 5.0.1 dan untuk rilis 5.x tambahan, komponen
Router
menyertakan parameterPreferExactMatches
yang diatur ke@true
. Untuk informasi lebih lanjut, lihat Migrasi dari ASP.NET Core 3.1 ke 5.0._Host
Tambahkan tampilan ke proyek dengan konten berikut.Views/Home/_Host.cshtml
:@{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
Komponen menggunakan file bersama
_Layout.cshtml
untuk tata letaknya.RenderMode mengonfigurasi apakah
App
komponen:- Di-prerender ke dalam halaman.
- Dirender sebagai HTML statis di halaman atau jika menyertakan informasi yang Blazor diperlukan untuk bootstrap aplikasi dari agen pengguna.
Untuk informasi selengkapnya tentang Pembantu Tag Komponen, termasuk meneruskan parameter dan RenderMode konfigurasi, lihat Pembantu Tag Komponen di ASP.NET Core.
Tambahkan tindakan ke Home pengontrol.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
Startup.Configure
Di titikStartup.cs
akhir , tambahkan rute berprioritas rendah untuk tindakan pengontrol yang mengembalikan_Host
tampilan:endpoints.MapFallbackToController("Blazor", "Home");
Contoh berikut menunjukkan baris yang ditambahkan dalam konfigurasi titik akhir aplikasi umum:
app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); endpoints.MapBlazorHub(); endpoints.MapFallbackToController("Blazor", "Home"); });
Tambahkan komponen yang dapat dirutekan ke proyek.
Pages/RoutableCounter.razor
:@page "/routable-counter" <h1>Routable 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
RoutableCounter
di/routable-counter
.
Untuk informasi selengkapnya tentang namespace layanan, lihat bagian Namespace komponen .
Merender komponen dari halaman atau tampilan
Bagian ini berkaitan dengan menambahkan komponen ke halaman atau tampilan, di mana komponen tidak dapat dirutekan secara langsung dari permintaan pengguna.
Untuk merender komponen dari halaman atau tampilan, gunakan Pembantu Tag Komponen.
Merender komponen interaktif stateful
Komponen interaktif stateful dapat ditambahkan ke Razor halaman atau tampilan.
Saat 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.
Halaman berikut Razor merender Counter
komponen:
<h1>My Razor Page</h1>
<component type="typeof(Counter)" render-mode="ServerPrerendered"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.
Merender komponen noninteraktif
Di halaman berikut Razor , Counter
komponen dirender secara statis dengan nilai awal yang ditentukan menggunakan formulir. Karena komponen dirender secara statis, komponen tidak interaktif:
<h1>My Razor Page</h1>
<form>
<input type="number" asp-for="InitialValue" />
<button type="submit">Set initial value</button>
</form>
<component type="typeof(Counter)" render-mode="Static"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.
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
File _ViewImports.cshtml
terletak di Pages
folder Razor aplikasi Pages atau Views
folder aplikasi MVC.
Untuk informasi selengkapnya, lihat komponen ASP.NET CoreRazor.
Ukuran status dan SignalR batas ukuran pesan yang telah dirender sebelumnya
Ukuran status besar yang telah dirender mungkin melebihi Blazorbatas ukuran pesan sirkuit, SignalR yang menghasilkan hal berikut:
- SignalR Sirkuit gagal diinisialisasi dengan kesalahan pada klien:Circuit host not initialized.
- Antarmuka pengguna koneksi ulang pada klien muncul ketika sirkuit gagal. Pemulihan tidak dimungkinkan.
Untuk mengatasi masalah tersebut, gunakan salah satu pendekatan berikut:
- Kurangi jumlah data yang Anda masukkan ke dalam status yang telah dirender sebelumnya.
- Tingkatkan SignalR batas ukuran pesan. PERINGATAN: Meningkatkan batas dapat meningkatkan risiko serangan Denial of Service (DoS).
Sumber daya tambahan Blazor Server
- Manajemen status: Menangani pra-penyajian
- Razor subjek siklus hidup komponen yang berkaitan dengan pra-penyajian
- Autentikasi dan otorisasi: Aspek umum
- Menangani Kesalahan: Pra-penyajian
- Host dan sebarkan: Blazor Server
- Mitigasi ancaman: Pembuatan skrip lintas situs (XSS)
Razor komponen dapat diintegrasikan ke dalam Razor aplikasi Pages atau MVC. Ketika halaman atau tampilan dirender, komponen dapat dirender secara bersamaan.
Pra-penyajian dapat meningkatkan Pengoptimalan Mesin Pencari (SEO) dengan merender konten untuk respons HTTP awal yang dapat digunakan mesin pencari untuk menghitung peringkat halaman.
Setelah mengonfigurasi proyek, gunakan panduan di bagian berikut tergantung pada persyaratan proyek:
- Komponen yang dapat dirutekan: Untuk komponen yang dapat dirutekan secara langsung dari permintaan pengguna. Ikuti panduan ini ketika pengunjung harus dapat membuat permintaan HTTP di browser mereka untuk komponen dengan arahan
@page
. - Merender komponen dari halaman atau tampilan: Untuk komponen yang tidak dapat dirutekan secara langsung dari permintaan pengguna. Ikuti panduan ini saat aplikasi menyematkan komponen ke halaman atau tampilan yang ada dengan Pembantu Tag Komponen.
Konfigurasi
Halaman atau aplikasi MVC yang ada Razor dapat mengintegrasikan Razor komponen ke dalam halaman atau tampilan:
Dalam file tata letak proyek:
Tambahkan tag berikut
<base>
ke<head>
elemen diPages/Shared/_Layout.cshtml
(Razor Pages) atauViews/Shared/_Layout.cshtml
(MVC):+ <base href="~/" />
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.<script>
Tambahkan tag untukblazor.server.js
skrip segera sebelum bagianScripts
render.Pages/Shared/_Layout.cshtml
(Razor Pages) atauViews/Shared/_Layout.cshtml
(MVC):... <script src="_framework/blazor.server.js"></script> @await RenderSectionAsync("Scripts", required: false) </body>
Kerangka kerja menambahkan
blazor.server.js
skrip ke aplikasi. Tidak perlu menambahkanblazor.server.js
file skrip secara manual ke aplikasi.
Tambahkan file impor ke folder akar proyek dengan konten berikut.
{APP NAMESPACE}
Ubah tempat penampung ke namespace proyek._Imports.razor
:@using System.Net.Http @using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Components.Authorization @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using Microsoft.JSInterop @using {APP NAMESPACE}
Daftarkan Blazor Server layanan di
Startup.ConfigureServices
.Startup.cs
:services.AddServerSideBlazor();
Blazor Tambahkan titik akhir Hub ke titik akhir (
app.UseEndpoints
) dariStartup.Configure
.Startup.cs
:endpoints.MapBlazorHub();
Integrasikan komponen ke halaman atau tampilan apa pun. Misalnya, tambahkan
Counter
komponen ke folder proyekShared
.Pages/Shared/Counter.razor
(Razor Pages) atauViews/Shared/Counter.razor
(MVC):<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++; } }
Razor Halaman:
Di halaman Razor proyek
Index
aplikasi Pages, tambahkanCounter
namespace layanan komponen dan sematkan komponen ke dalam halaman. Ketika halaman dimuatIndex
,Counter
komponen telah dirender di halaman. Dalam contoh berikut, ganti{APP NAMESPACE}
tempat penampung dengan namespace proyek.Pages/Index.cshtml
:@page @using {APP NAMESPACE}.Pages.Shared @model IndexModel @{ ViewData["Title"] = "Home page"; } <div> <component type="typeof(Counter)" render-mode="ServerPrerendered" /> </div>
Dalam contoh sebelumnya, ganti
{APP NAMESPACE}
tempat penampung dengan namespace aplikasi.MVC:
Dalam tampilan proyek
Index
aplikasi MVC, tambahkanCounter
namespace layanan komponen dan sematkan komponen ke dalam tampilan. Saat tampilan dimuatIndex
,Counter
komponen telah dirender di halaman. Dalam contoh berikut, ganti{APP NAMESPACE}
tempat penampung dengan namespace proyek.Views/Home/Index.cshtml
:@using {APP NAMESPACE}.Views.Shared @{ ViewData["Title"] = "Home Page"; } <div> <component type="typeof(Counter)" render-mode="ServerPrerendered" /> </div>
Untuk informasi selengkapnya, lihat bagian Render komponen dari halaman atau tampilan .
Menggunakan komponen yang dapat dirutekan di Razor aplikasi Pages
Bagian ini berkaitan dengan penambahan komponen yang dapat dirutekan secara langsung dari permintaan pengguna.
Untuk mendukung komponen yang dapat dirutekan Razor di Razor aplikasi Pages:
Ikuti panduan di bagian Konfigurasi .
App
Tambahkan komponen ke akar proyek dengan konten berikut.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(Program).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <h1>Page not found</h1> <p>Sorry, but there's nothing here!</p> </NotFound> </Router>
_Host
Tambahkan halaman ke proyek dengan konten berikut.Pages/_Host.cshtml
:@page "/blazor" @{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
Komponen menggunakan file bersama
_Layout.cshtml
untuk tata letaknya.RenderMode mengonfigurasi apakah
App
komponen:- Di-prerender ke dalam halaman.
- Dirender sebagai HTML statis di halaman atau jika menyertakan informasi yang Blazor diperlukan untuk bootstrap aplikasi dari agen pengguna.
Untuk informasi selengkapnya tentang Pembantu Tag Komponen, termasuk meneruskan parameter dan RenderMode konfigurasi, lihat Pembantu Tag Komponen di ASP.NET Core.
Startup.Configure
Di titikStartup.cs
akhir , tambahkan rute berprioritas rendah untuk_Host
halaman sebagai titik akhir terakhir:endpoints.MapFallbackToPage("/_Host");
Contoh berikut menunjukkan baris yang ditambahkan dalam konfigurasi titik akhir aplikasi umum:
app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); endpoints.MapBlazorHub(); endpoints.MapFallbackToPage("/_Host"); });
Tambahkan komponen yang dapat dirutekan ke proyek.
Pages/RoutableCounter.razor
:@page "/routable-counter" <h1>Routable 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
RoutableCounter
di/routable-counter
.
Untuk informasi selengkapnya tentang namespace layanan, lihat bagian Namespace komponen .
Menggunakan komponen yang dapat dirutekan dalam aplikasi MVC
Bagian ini berkaitan dengan penambahan komponen yang dapat dirutekan secara langsung dari permintaan pengguna.
Untuk mendukung komponen yang dapat dirutekan Razor di aplikasi MVC:
Ikuti panduan di bagian Konfigurasi .
App
Tambahkan komponen ke akar proyek dengan konten berikut.App.razor
:@using Microsoft.AspNetCore.Components.Routing <Router AppAssembly="typeof(Program).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" /> </Found> <NotFound> <h1>Page not found</h1> <p>Sorry, but there's nothing here!</p> </NotFound> </Router>
_Host
Tambahkan tampilan ke proyek dengan konten berikut.Views/Home/_Host.cshtml
:@{ Layout = "_Layout"; } <app> <component type="typeof(App)" render-mode="ServerPrerendered" /> </app>
Komponen menggunakan file bersama
_Layout.cshtml
untuk tata letaknya.RenderMode mengonfigurasi apakah
App
komponen:- Di-prerender ke dalam halaman.
- Dirender sebagai HTML statis di halaman atau jika menyertakan informasi yang Blazor diperlukan untuk bootstrap aplikasi dari agen pengguna.
Untuk informasi selengkapnya tentang Pembantu Tag Komponen, termasuk meneruskan parameter dan RenderMode konfigurasi, lihat Pembantu Tag Komponen di ASP.NET Core.
Tambahkan tindakan ke Home pengontrol.
Controllers/HomeController.cs
:public IActionResult Blazor() { return View("_Host"); }
Startup.Configure
Di titikStartup.cs
akhir , tambahkan rute berprioritas rendah untuk tindakan pengontrol yang mengembalikan_Host
tampilan:endpoints.MapFallbackToController("Blazor", "Home");
Contoh berikut menunjukkan baris yang ditambahkan dalam konfigurasi titik akhir aplikasi umum:
app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); endpoints.MapBlazorHub(); endpoints.MapFallbackToController("Blazor", "Home"); });
Tambahkan komponen yang dapat dirutekan ke proyek.
Pages/RoutableCounter.razor
:@page "/routable-counter" <h1>Routable 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
RoutableCounter
di/routable-counter
.
Untuk informasi selengkapnya tentang namespace layanan, lihat bagian Namespace komponen .
Merender komponen dari halaman atau tampilan
Bagian ini berkaitan dengan menambahkan komponen ke halaman atau tampilan, di mana komponen tidak dapat dirutekan secara langsung dari permintaan pengguna.
Untuk merender komponen dari halaman atau tampilan, gunakan Pembantu Tag Komponen.
Merender komponen interaktif stateful
Komponen interaktif stateful dapat ditambahkan ke Razor halaman atau tampilan.
Saat 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.
Halaman berikut Razor merender Counter
komponen:
<h1>My Razor Page</h1>
<component type="typeof(Counter)" render-mode="ServerPrerendered"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.
Merender komponen noninteraktif
Di halaman berikut Razor , Counter
komponen dirender secara statis dengan nilai awal yang ditentukan menggunakan formulir. Karena komponen dirender secara statis, komponen tidak interaktif:
<h1>My Razor Page</h1>
<form>
<input type="number" asp-for="InitialValue" />
<button type="submit">Set initial value</button>
</form>
<component type="typeof(Counter)" render-mode="Static"
param-InitialValue="InitialValue" />
@functions {
[BindProperty(SupportsGet=true)]
public int InitialValue { get; set; }
}
Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.
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
File _ViewImports.cshtml
terletak di Pages
folder Razor aplikasi Pages atau Views
folder aplikasi MVC.
Untuk informasi selengkapnya, lihat komponen ASP.NET CoreRazor.
Ukuran status dan SignalR batas ukuran pesan yang telah dirender sebelumnya
Ukuran status besar yang telah dirender mungkin melebihi Blazorbatas ukuran pesan sirkuit, SignalR yang menghasilkan hal berikut:
- SignalR Sirkuit gagal diinisialisasi dengan kesalahan pada klien:Circuit host not initialized.
- Antarmuka pengguna koneksi ulang pada klien muncul ketika sirkuit gagal. Pemulihan tidak dimungkinkan.
Untuk mengatasi masalah tersebut, gunakan salah satu pendekatan berikut:
- Kurangi jumlah data yang Anda masukkan ke dalam status yang telah dirender sebelumnya.
- Tingkatkan SignalR batas ukuran pesan. PERINGATAN: Meningkatkan batas dapat meningkatkan risiko serangan Denial of Service (DoS).
Sumber daya tambahan Blazor Server
- Manajemen status: Menangani pra-penyajian
- Razor subjek siklus hidup komponen yang berkaitan dengan pra-penyajian
- Autentikasi dan otorisasi: Aspek umum
- Menangani Kesalahan: Pra-penyajian
- Host dan sebarkan: Blazor Server
- Mitigasi ancaman: Pembuatan skrip lintas situs (XSS)
ASP.NET Core