Merender dan mengintegrasikan komponen ASP.NET Core Razor
Catatan
Ini bukan versi terbaru dari artikel ini. Untuk versi terbaru artikel ini, lihat versi .NET 7.
Artikel ini menjelaskan Razor skenario integrasi komponen untuk Blazor aplikasi, termasuk pra-penyajian Razor komponen di server.
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 halaman ini cocok dengan versi ASP.NET Core yang ingin Anda gunakan untuk aplikasi Anda.
Razorkomponen dapat diintegrasikan ke dalam Razor aplikasi Pages dan MVC dalam solusi yang dihostingBlazor WebAssembly. 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.
Konfigurasi solusi
Konfigurasi pra-penyajian
Untuk menyiapkan pra-penyajian untuk aplikasi yang dihosting Blazor WebAssembly :
Host aplikasi Blazor WebAssembly di aplikasi ASP.NET Core. Aplikasi mandiri Blazor WebAssembly dapat ditambahkan ke solusi ASP.NET Core, atau Anda dapat menggunakan aplikasi yang dihosting Blazor WebAssembly yang dibuat dari Blazor WebAssembly templat proyek dengan opsi yang dihosting:
- Visual Studio: Dalam dialog Informasi tambahan, pilih kotak centang ASP.NET Core Hosted saat membuat Blazor WebAssembly aplikasi. Dalam contoh artikel ini, solusinya diberi nama
BlazorHosted
. - Shell perintah Visual Studio Code/.NET CLI:
dotnet new blazorwasm -ho
(gunakan-ho|--hosted
opsi ).-o|--output {LOCATION}
Gunakan opsi untuk membuat folder untuk solusi dan mengatur namespace proyek solusi. Dalam contoh artikel ini, solusinya diberi namaBlazorHosted
(dotnet new blazorwasm -ho -o BlazorHosted
).
Untuk contoh dalam artikel ini, nama solusi yang dihosting (nama rakitan) adalah
BlazorHosted
. Namespace proyek klien adalahBlazorHosted.Client
, dan namespace proyek server adalahBlazorHosted.Server
.- Visual Studio: Dalam dialog Informasi tambahan, pilih kotak centang ASP.NET Core Hosted saat membuat Blazor WebAssembly aplikasi. Dalam contoh artikel ini, solusinya diberi nama
wwwroot/index.html
Hapus file dari Blazor WebAssemblyClient proyek.Client Dalam proyek, hapus baris berikut di
Program.cs
:- builder.RootComponents.Add<App>("#app"); - builder.RootComponents.Add<HeadOutlet>("head::after");
Tambahkan
_Host.cshtml
file ke Server folder proyekPages
. Anda dapat memperoleh file dari proyek yang dibuat dari Blazor Server templat menggunakan Visual Studio atau menggunakan .NET CLI dengandotnet new blazorserver -o BlazorServer
perintah dalam shell perintah (-o BlazorServer
opsi membuat folder untuk proyek). Setelah menempatkan file ke Server folder proyekPages
, buat perubahan berikut pada file.Buat perubahan berikut pada
_Host.cshtml
file:Pages
Perbarui namespace layanan di bagian atas file agar sesuai dengan namespace Server halaman aplikasi. Tempat{APP NAMESPACE}
penampung dalam contoh berikut mewakili namespace halaman aplikasi donor yang menyediakan_Host.cshtml
file:Menghapus:
- @namespace {APP NAMESPACE}.Pages
Tambahkan:
@namespace BlazorHosted.Server.Pages
Tambahkan direktif
@using
untuk Client proyek di bagian atas file:@using BlazorHosted.Client
Perbarui tautan lembar gaya untuk menunjuk ke lembar gaya proyek WebAssembly. Dalam contoh berikut, namespace proyek klien adalah
BlazorHosted.Client
. Tempat{APP NAMESPACE}
penampung mewakili namespace aplikasi donor yang menyediakan_Host.cshtml
file. Perbarui Pembantu Tag Komponen (<component>
tag) agarHeadOutlet
komponen dapat merender komponen.Menghapus:
- <link href="css/site.css" rel="stylesheet" /> - <link href="{APP NAMESPACE}.styles.css" rel="stylesheet" /> - <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
Tambahkan:
<link href="css/app.css" rel="stylesheet" /> <link href="BlazorHosted.Client.styles.css" rel="stylesheet" /> <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
Catatan
<link>
Biarkan elemen yang meminta lembar gaya Bootstrap (css/bootstrap/bootstrap.min.css
) di tempat.Blazor Perbarui sumber skrip untuk menggunakan skrip sisi Blazor WebAssembly klien:
Menghapus:
- <script src="_framework/blazor.server.js"></script>
Tambahkan:
<script src="_framework/blazor.webassembly.js"></script>
render-mode
Perbarui Pembantu Tag Komponen untuk merender komponen akarApp
dengan WebAssemblyPrerendered:Menghapus:
- <component type="typeof(App)" render-mode="ServerPrerendered" />
Tambahkan:
<component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
Penting
Pra-penyajian tidak didukung untuk titik akhir autentikasi (
/authentication/
segmen jalur). Untuk informasi lebih lanjut, lihat skenario keamanan tambahan Blazor WebAssembly ASP.NET Core.
Program.cs
Dalam file Server proyek, ubah titik akhir fallback dariindex.html
file ke_Host.cshtml
halaman:Menghapus:
- app.MapFallbackToFile("index.html");
Tambahkan:
app.MapFallbackToPage("/_Host");
Client Jika proyek dan Server menggunakan satu atau beberapa layanan umum selama pra-penyajian, faktori pendaftaran layanan ke dalam metode yang dapat dipanggil dari kedua proyek. Untuk informasi selengkapnya, lihat Injeksi dependensi ASP.NET Core Blazor.
Jalankan Server proyek. Aplikasi yang dihosting Blazor WebAssembly telah di-prerender oleh Server proyek untuk klien.
Konfigurasi untuk menyematkan Razor komponen ke dalam halaman dan tampilan
Bagian dan contoh berikut untuk menyematkan Razor komponen dari ClientBlazor WebAssembly aplikasi ke dalam halaman dan tampilan aplikasi server memerlukan konfigurasi tambahan.
Proyek Server harus memiliki file dan folder berikut.
Razor Halaman:
Pages/Shared/_Layout.cshtml
Pages/Shared/_Layout.cshtml.css
Pages/_ViewImports.cshtml
Pages/_ViewStart.cshtml
MVC:
Views/Shared/_Layout.cshtml
Views/Shared/_Layout.cshtml.css
Views/_ViewImports.cshtml
Views/_ViewStart.cshtml
File sebelumnya dapat diperoleh dengan membuat aplikasi dari templat proyek ASP.NET Core menggunakan:
- Alat pembuatan proyek baru Visual Studio.
- Membuka shell perintah dan mengeksekusi
dotnet new webapp -o {PROJECT NAME}
(Razor Pages) ataudotnet new mvc -o {PROJECT NAME}
(MVC). Opsi-o|--output
dengan nilai untuk{PROJECT NAME}
tempat penampung menyediakan nama untuk aplikasi dan membuat folder untuk aplikasi.
Perbarui namespace dalam file yang diimpor _ViewImports.cshtml
agar sesuai dengan yang digunakan oleh proyek yang Server menerima file.
Pages/_ViewImports.cshtml
(Razor Halaman):
@using BlazorHosted.Server
@namespace BlazorHosted.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Views/_ViewImports.cshtml
(MVC):
@using BlazorHosted.Server
@using BlazorHosted.Server.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Perbarui file tata letak yang diimpor, yaitu Pages/Shared/_Layout.cshtml
untuk Razor Pages atau Views/Shared/_Layout.cshtml
untuk MVC.
Pertama, hapus judul dan lembar gaya dari proyek donor, yang ada RPDonor.styles.css
dalam contoh berikut. Tempat {PROJECT NAME}
penampung mewakili nama aplikasi proyek donor.
- <title>@ViewData["Title"] - {PROJECT NAME}</title>
- <link rel="stylesheet" href="~/RPDonor.styles.css" asp-append-version="true" />
Sertakan Client gaya proyek dalam file tata letak. Dalam contoh berikut, Client namespace proyek adalah BlazorHosted.Client
. Elemen <title>
dapat diperbarui secara bersamaan.
Tempatkan baris berikut dalam <head>
konten file tata letak:
<title>@ViewData["Title"] - BlazorHosted</title>
<link href="css/app.css" rel="stylesheet" />
<link rel="stylesheet" href="BlazorHosted.Client.styles.css" asp-append-version="true" />
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
Tata letak yang diimpor berisi dua Home
(Index
halaman) dan Privacy
tautan navigasi. Untuk membuat Home
tautan menunjuk ke aplikasi yang dihosting Blazor WebAssembly , ubah hyperlink:
- <a class="navbar-brand" asp-area="" asp-page="/Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>
- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>
Dalam file tata letak MVC:
- <a class="navbar-brand" asp-area="" asp-controller="Home"
- asp-action="Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>
- <a class="nav-link text-dark" asp-area="" asp-controller="Home"
- asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>
<footer>
Perbarui nama aplikasi elemen. Contoh berikut menggunakan nama BlazorHosted
aplikasi :
- © {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ © {DATE} - BlazorHosted - <a asp-area="" asp-page="/Privacy">Privacy</a>
Dalam contoh sebelumnya, {DATE}
tempat penampung mewakili tanggal hak cipta dalam aplikasi yang dihasilkan dari Razor templat proyek Pages atau MVC.
Untuk membuat tautan mengarah ke Privacy
halaman privasi (Razor Halaman), tambahkan halaman privasi ke Server proyek.
Pages/Privacy.cshtml
Server dalam proyek:
@page
@model PrivacyModel
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
Untuk tampilan privasi berbasis MVC, buat tampilan privasi dalam Server proyek.
View/Home/Privacy.cshtml
Server dalam proyek:
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
Home
Di pengontrol aplikasi MVC, kembalikan tampilan.
Tambahkan kode berikut ke Controllers/HomeController.cs
:
public IActionResult Privacy()
{
return View();
}
Jika Anda mengimpor file dari aplikasi donor, pastikan untuk memperbarui namespace apa pun dalam file agar sesuai Server dengan proyek (misalnya, BlazorHosted.Server
).
Impor aset statis ke Server proyek dari folder proyek wwwroot
donor:
wwwroot/css
folder dan kontenwwwroot/js
folder dan kontenwwwroot/lib
folder dan konten
Jika proyek donor dibuat dari templat proyek ASP.NET Core dan file tidak dimodifikasi, Anda dapat menyalin seluruh wwwroot
folder dari proyek donor ke dalam Server proyek dan menghapus favicon file ikon.
Peringatan
Hindari menempatkan aset statis ke dalam Client folder dan Server wwwroot
. Jika file yang sama ada di kedua folder, pengecualian dilemparkan karena aset statis berbagi jalur akar web yang sama. Oleh karena itu, host aset statis di salah wwwroot
satu folder, bukan keduanya.
Setelah mengadopsi konfigurasi sebelumnya, sematkan Razor komponen ke dalam halaman atau tampilan Server proyek. Gunakan panduan di bagian berikut dari artikel ini:
- Merender komponen dalam halaman atau tampilan dengan Pembantu Tag Komponen
- Merender komponen dalam halaman atau tampilan dengan pemilih CSS
Merender komponen dalam halaman atau tampilan dengan Pembantu Tag Komponen
Setelah mengonfigurasi solusi, termasuk konfigurasi tambahan, Pembantu Tag Komponen mendukung dua mode render untuk merender komponen dari Blazor WebAssembly aplikasi di halaman atau tampilan:
Dalam contoh Halaman berikut Razor , Counter
komponen dirender di halaman. Untuk membuat komponen interaktif, Blazor WebAssembly skrip disertakan di bagian render halaman. Untuk menghindari penggunaan namespace lengkap untuk Counter
komponen dengan Component Tag Helper ({ASSEMBLY NAME}.Pages.Counter
), tambahkan @using
direktif untuk namespace proyek Pages
klien. Dalam contoh berikut, Client namespace proyek adalah BlazorHosted.Client
.
Dalam proyek Server, Pages/RazorPagesCounter1.cshtml
:
@page
@using BlazorHosted.Client.Pages
<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered" />
@section Scripts {
<script src="_framework/blazor.webassembly.js"></script>
}
Jalankan Server proyek. Navigasi ke Razor halaman di /razorpagescounter1
. Komponen yang telah dirender Counter
disematkan di halaman.
RenderMode mengonfigurasi apakah 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.
Pekerjaan tambahan mungkin diperlukan tergantung pada sumber daya statis yang digunakan komponen dan bagaimana halaman tata letak diatur dalam aplikasi. Biasanya, skrip ditambahkan ke halaman atau bagian render tampilan Scripts
dan lembar gaya ditambahkan ke konten elemen tata letak <head>
.
Mengatur konten turunan melalui fragmen render
Pembantu Tag Komponen tidak mendukung penerimaanRenderFragment
delegasi untuk konten anak (misalnya, param-ChildContent="..."
). Sebaiknya buat Razor komponen (.razor
) yang mereferensikan komponen yang ingin Anda render dengan konten anak yang ingin Anda lewati lalu panggil Razor komponen dari halaman atau tampilan.
Pastikan bahwa komponen yang telah dirender tingkat atas tidak dipangkas saat diterbitkan
Jika Pembantu Tag Komponen secara langsung mereferensikan komponen dari pustaka yang tunduk pada pemangkasan penerbitan, komponen mungkin dipangkas selama penerbitan karena tidak ada referensi dari kode aplikasi sisi klien. Akibatnya, komponen tidak dirender sebelumnya, meninggalkan tempat kosong dalam output. Jika ini terjadi, instruksikan pemangkas untuk mempertahankan komponen pustaka dengan menambahkan DynamicDependency
atribut ke kelas apa pun di aplikasi sisi klien. Untuk mempertahankan komponen yang disebut SomeLibraryComponentToBePreserved
, tambahkan yang berikut ini ke komponen apa pun:
@using System.Diagnostics.CodeAnalysis
@attribute [DynamicDependency(DynamicallyAccessedMemberTypes.All,
typeof(SomeLibraryComponentToBePreserved))]
Pendekatan sebelumnya biasanya tidak diperlukan karena dalam banyak kasus aplikasi merender komponennya (yang tidak dipangkas), yang pada gilirannya mereferensikan komponen dari pustaka (menyebabkannya juga tidak dipangkas). Hanya gunakan DynamicDependency
secara eksplisit untuk merender komponen pustaka secara langsung ketika pustaka tunduk pada pemangkasan.
Merender komponen dalam halaman atau tampilan dengan pemilih CSS
Setelah mengonfigurasi solusi, termasuk konfigurasi tambahan, tambahkan komponen root ke Client proyek solusi yang dihosting Blazor WebAssembly dalam Program.cs
file. Dalam contoh berikut, Counter
komponen dinyatakan sebagai komponen akar dengan pemilih CSS yang memilih elemen dengan id
yang cocok counter-component
. Dalam contoh berikut, Client namespace proyek adalah BlazorHosted.Client
.
Dalam Program.cs
file Client proyek, tambahkan namespace layanan untuk komponen proyek Razor ke bagian atas file:
using BlazorHosted.Client.Pages;
builder
Setelah ditetapkan dalam Program.cs
, tambahkan Counter
komponen sebagai komponen akar:
builder.RootComponents.Add<Counter>("#counter-component");
Dalam contoh Halaman berikut Razor , Counter
komponen dirender di halaman. Untuk membuat komponen interaktif, Blazor WebAssembly skrip disertakan di bagian render halaman.
Dalam proyek Server, Pages/RazorPagesCounter2.cshtml
:
@page
<div id="counter-component">Loading...</div>
@section Scripts {
<script src="_framework/blazor.webassembly.js"></script>
}
Jalankan Server proyek. Navigasi ke Razor halaman di /razorpagescounter2
. Komponen yang telah dirender Counter
disematkan di halaman.
Pekerjaan tambahan mungkin diperlukan tergantung pada sumber daya statis yang digunakan komponen dan bagaimana halaman tata letak diatur dalam aplikasi. Biasanya, skrip ditambahkan ke halaman atau bagian render tampilan Scripts
dan lembar gaya ditambahkan ke konten elemen tata letak <head>
.
Catatan
Contoh sebelumnya melemparkan JSException jika Blazor WebAssembly aplikasi dirender dan diintegrasikan ke dalam Razor Halaman atau aplikasi MVC secara bersamaan dengan penggunaan pemilih CSS. Menavigasi ke salah Client satu komponen proyek Razor atau menavigasi ke halaman atau tampilan Server dengan komponen yang disematkan melempar satu atau beberapa JSException.
Ini adalah perilaku normal karena melakukan prarender dan mengintegrasikan Blazor WebAssembly aplikasi dengan komponen yang dapat dirutekan Razor tidak kompatibel dengan penggunaan pemilih CSS.
Jika Anda telah bekerja dengan contoh di bagian sebelumnya dan hanya ingin melihat pekerjaan pemilih CSS di aplikasi sampel Anda, komentari spesifikasi App
komponen Client akar file proyek Program.cs
:
- builder.RootComponents.Add<App>("#app");
+ //builder.RootComponents.Add<App>("#app");
Navigasikan ke halaman atau lihat dengan komponen yang disematkan Razor yang menggunakan pemilih CSS (misalnya, /razorpagescounter2
dari contoh sebelumnya). Halaman atau tampilan dimuat dengan komponen yang disematkan, dan komponen yang disematkan berfungsi seperti yang diharapkan.
Razor komponen dapat diintegrasikan ke dalam Razor aplikasi Pages dan 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:
- 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 dan tampilan yang ada dengan Pembantu Tag Komponen.
Konfigurasi
Gunakan panduan berikut untuk mengintegrasikan Razor komponen ke dalam halaman dan 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 dirender webAssembly (WebAssemblyPrerendered
) di aplikasi yang dihosting Blazor WebAssembly atau 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
dalam aplikasi yang dihosting Blazor WebAssembly 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.
Sumber daya tambahan Blazor WebAssembly
- Manajemen status: Menangani pra-penyajian
- Dukungan pra-penyajian dengan pemuatan malas rakitan
- Razor subjek siklus hidup komponen yang berkaitan dengan pra-penyajian
- Inisialisasi komponen (
OnInitialized{Async}
) - Setelah render komponen (
OnAfterRender{Async}
) - Koneksi ulang stateful setelah pra-penyajian: Meskipun konten di bagian berfokus pada Blazor Server dan koneksi ulang yang statefulSignalR, skenario untuk prarendering di aplikasi yang Blazor WebAssembly dihosting (WebAssemblyPrerendered) melibatkan kondisi dan pendekatan serupa untuk mencegah eksekusi kode pengembang dua kali. Untuk mempertahankan status selama eksekusi kode inisialisasi saat melakukan prarender, lihat bagian Mempertahankan status yang telah dirender sebelumnya di artikel ini.
- Pra-penyajian dengan interop JavaScript
- Inisialisasi komponen (
- Subjek autentikasi dan otorisasi yang berkaitan dengan pra-penyajian
- Host dan sebarkan: Blazor WebAssembly
- Menangani kesalahan: Pra-penyajian
- OnNavigateAsync dijalankan dua kali saat pra-penyajian: Menangani peristiwa navigasi asinkron dengan
OnNavigateAsync
Ukuran status dan SignalR batas ukuran pesan yang telah dirender sebelumnya
Ukuran status besar yang telah dirender mungkin melebihi SignalR batas ukuran pesan sirkuit, 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
Razorkomponen dapat diintegrasikan ke dalam Razor aplikasi Pages dan MVC dalam solusi yang dihostingBlazor WebAssembly. 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.
Konfigurasi solusi
Konfigurasi pra-penyajian
Untuk menyiapkan pra-penyajian untuk aplikasi yang dihosting Blazor WebAssembly :
Host aplikasi Blazor WebAssembly di aplikasi ASP.NET Core. Aplikasi mandiri Blazor WebAssembly dapat ditambahkan ke solusi ASP.NET Core, atau Anda dapat menggunakan aplikasi yang dihosting Blazor WebAssembly yang dibuat dari Blazor WebAssembly templat proyek dengan opsi yang dihosting:
- Visual Studio: Dalam dialog Informasi tambahan, pilih kotak centang ASP.NET Core Hosted saat membuat Blazor WebAssembly aplikasi. Dalam contoh artikel ini, solusinya diberi nama
BlazorHosted
. - Shell perintah Visual Studio Code/.NET CLI:
dotnet new blazorwasm -ho
(gunakan-ho|--hosted
opsi ).-o|--output {LOCATION}
Gunakan opsi untuk membuat folder untuk solusi dan mengatur namespace proyek solusi. Dalam contoh artikel ini, solusinya diberi namaBlazorHosted
(dotnet new blazorwasm -ho -o BlazorHosted
).
Untuk contoh dalam artikel ini, namespace proyek klien adalah
BlazorHosted.Client
, dan namespace proyek server adalahBlazorHosted.Server
.- Visual Studio: Dalam dialog Informasi tambahan, pilih kotak centang ASP.NET Core Hosted saat membuat Blazor WebAssembly aplikasi. Dalam contoh artikel ini, solusinya diberi nama
wwwroot/index.html
Hapus file dari Blazor WebAssemblyClient proyek.Client Dalam proyek, hapus baris berikut di
Program.cs
:- builder.RootComponents.Add<App>("#app"); - builder.RootComponents.Add<HeadOutlet>("head::after");
Tambahkan
_Host.cshtml
file dan_Layout.cshtml
ke Server folder proyekPages
. Anda dapat memperoleh file dari proyek yang dibuat dari Blazor Server templat menggunakan Visual Studio atau menggunakan .NET CLI dengandotnet new blazorserver -o BlazorServer
perintah dalam shell perintah (-o BlazorServer
opsi membuat folder untuk proyek). Setelah menempatkan file ke Server folder proyekPages
, buat perubahan berikut pada file.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.Buat perubahan berikut pada
_Layout.cshtml
file:Pages
Perbarui namespace layanan di bagian atas file agar sesuai dengan namespace Server halaman aplikasi. Tempat{APP NAMESPACE}
penampung dalam contoh berikut mewakili namespace halaman aplikasi donor yang menyediakan_Layout.cshtml
file:Menghapus:
- @namespace {APP NAMESPACE}.Pages
Tambahkan:
@namespace BlazorHosted.Server.Pages
Tambahkan direktif
@using
untuk Client proyek di bagian atas file:@using BlazorHosted.Client
Perbarui tautan lembar gaya untuk menunjuk ke lembar gaya proyek WebAssembly. Dalam contoh berikut, namespace proyek klien adalah
BlazorHosted.Client
. Tempat{APP NAMESPACE}
penampung mewakili namespace aplikasi donor yang menyediakan_Layout.cshtml
file. Perbarui Pembantu Tag Komponen (<component>
tag) agarHeadOutlet
komponen dapat merender komponen.Menghapus:
- <link href="css/site.css" rel="stylesheet" /> - <link href="{APP NAMESPACE}.styles.css" rel="stylesheet" /> - <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
Tambahkan:
<link href="css/app.css" rel="stylesheet" /> <link href="BlazorHosted.Client.styles.css" rel="stylesheet" /> <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
Catatan
<link>
Biarkan elemen yang meminta lembar gaya Bootstrap (css/bootstrap/bootstrap.min.css
) di tempat.Blazor Perbarui sumber skrip untuk menggunakan skrip sisi Blazor WebAssembly klien:
Menghapus:
- <script src="_framework/blazor.server.js"></script>
Tambahkan:
<script src="_framework/blazor.webassembly.js"></script>
Dalam file
_Host.cshtml
:Pages
Ubah namespace ke Client proyek. Tempat{APP NAMESPACE}
penampung mewakili namespace halaman aplikasi donor yang menyediakan_Host.cshtml
file:Menghapus:
- @namespace {APP NAMESPACE}.Pages
Tambahkan:
@namespace BlazorHosted.Client
render-mode
Perbarui Pembantu Tag Komponen untuk merender komponen akarApp
dengan WebAssemblyPrerendered:Menghapus:
- <component type="typeof(App)" render-mode="ServerPrerendered" />
Tambahkan:
<component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
Penting
Pra-penyajian tidak didukung untuk titik akhir autentikasi (
/authentication/
segmen jalur). Untuk informasi lebih lanjut, lihat skenario keamanan tambahan Blazor WebAssembly ASP.NET Core.
Dalam pemetaan Server titik akhir proyek di
Program.cs
, ubah fallback dariindex.html
file ke_Host.cshtml
halaman:Menghapus:
- app.MapFallbackToFile("index.html");
Tambahkan:
app.MapFallbackToPage("/_Host");
Client Jika proyek dan Server menggunakan satu atau beberapa layanan umum selama pra-penyajian, faktori pendaftaran layanan ke dalam metode yang dapat dipanggil dari kedua proyek. Untuk informasi selengkapnya, lihat Injeksi dependensi ASP.NET Core Blazor.
Jalankan Server proyek. Aplikasi yang dihosting Blazor WebAssembly telah di-prerender oleh Server proyek untuk klien.
Konfigurasi untuk menyematkan Razor komponen ke dalam halaman dan tampilan
Bagian dan contoh berikut untuk menyematkan Razor komponen dari ClientBlazor WebAssembly aplikasi ke dalam halaman dan tampilan aplikasi server memerlukan konfigurasi tambahan.
Proyek Server harus memiliki file dan folder berikut.
Razor Halaman:
Pages/Shared/_Layout.cshtml
Pages/Shared/_Layout.cshtml.css
Pages/_ViewImports.cshtml
Pages/_ViewStart.cshtml
MVC:
Views/Shared/_Layout.cshtml
Views/Shared/_Layout.cshtml.css
Views/_ViewImports.cshtml
Views/_ViewStart.cshtml
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.
File sebelumnya dapat diperoleh dengan membuat aplikasi dari templat proyek ASP.NET Core menggunakan:
- Alat pembuatan proyek baru Visual Studio.
- Membuka shell perintah dan mengeksekusi
dotnet new webapp -o {PROJECT NAME}
(Razor Pages) ataudotnet new mvc -o {PROJECT NAME}
(MVC). Opsi-o|--output
dengan nilai untuk{PROJECT NAME}
tempat penampung menyediakan nama untuk aplikasi dan membuat folder untuk aplikasi.
Perbarui namespace dalam file yang diimpor _ViewImports.cshtml
agar sesuai dengan yang digunakan oleh proyek yang Server menerima file.
Pages/_ViewImports.cshtml
(Razor Halaman):
@using BlazorHosted.Server
@namespace BlazorHosted.Server.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Views/_ViewImports.cshtml
(MVC):
@using BlazorHosted.Server
@using BlazorHosted.Server.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Perbarui file tata letak yang diimpor, yaitu Pages/Shared/_Layout.cshtml
untuk Razor Pages atau Views/Shared/_Layout.cshtml
untuk MVC.
Pertama, hapus judul dan lembar gaya dari proyek donor, yang ada RPDonor.styles.css
dalam contoh berikut. Tempat {PROJECT NAME}
penampung mewakili nama aplikasi proyek donor.
- <title>@ViewData["Title"] - {PROJECT NAME}</title>
- <link rel="stylesheet" href="~/RPDonor.styles.css" asp-append-version="true" />
Sertakan Client gaya proyek dalam file tata letak. Dalam contoh berikut, Client namespace proyek adalah BlazorHosted.Client
. Elemen <title>
dapat diperbarui secara bersamaan.
Tempatkan baris berikut dalam <head>
konten file tata letak:
<title>@ViewData["Title"] - BlazorHosted</title>
<link href="css/app.css" rel="stylesheet" />
<link rel="stylesheet" href="BlazorHosted.Client.styles.css" asp-append-version="true" />
<component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />
Tata letak yang diimpor berisi dua Home
(Index
halaman) dan Privacy
tautan navigasi. Untuk membuat Home
tautan menunjuk ke aplikasi yang dihosting Blazor WebAssembly , ubah hyperlink:
- <a class="navbar-brand" asp-area="" asp-page="/Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>
- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>
Dalam file tata letak MVC:
- <a class="navbar-brand" asp-area="" asp-controller="Home"
- asp-action="Index">{PROJECT NAME}</a>
+ <a class="navbar-brand" href="/">BlazorHosted</a>
- <a class="nav-link text-dark" asp-area="" asp-controller="Home"
- asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>
<footer>
Perbarui nama aplikasi elemen. Contoh berikut menggunakan nama BlazorHosted
aplikasi :
- © {DATE} - {DONOR NAME} - <a asp-area="" asp-page="/Privacy">Privacy</a>
+ © {DATE} - BlazorHosted - <a asp-area="" asp-page="/Privacy">Privacy</a>
Dalam contoh sebelumnya, {DATE}
tempat penampung mewakili tanggal hak cipta dalam aplikasi yang dihasilkan dari Razor templat proyek Pages atau MVC.
Untuk membuat tautan mengarah ke Privacy
halaman privasi (Razor Halaman), tambahkan halaman privasi ke Server proyek.
Pages/Privacy.cshtml
Server dalam proyek:
@page
@model PrivacyModel
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
Untuk tampilan privasi berbasis MVC, buat tampilan privasi dalam Server proyek.
View/Home/Privacy.cshtml
Server dalam proyek:
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
<p>Use this page to detail your site's privacy policy.</p>
Home
Di pengontrol aplikasi MVC, kembalikan tampilan.
Tambahkan kode berikut ke Controllers/HomeController.cs
:
public IActionResult Privacy()
{
return View();
}
Jika Anda mengimpor file dari aplikasi donor, pastikan untuk memperbarui namespace apa pun dalam file agar sesuai Server dengan proyek (misalnya, BlazorHosted.Server
).
Impor aset statis ke Server proyek dari folder proyek wwwroot
donor:
wwwroot/css
folder dan kontenwwwroot/js
folder dan kontenwwwroot/lib
folder dan konten
Jika proyek donor dibuat dari templat proyek ASP.NET Core dan file tidak dimodifikasi, Anda dapat menyalin seluruh wwwroot
folder dari proyek donor ke dalam Server proyek dan menghapus favicon file ikon.
Peringatan
Hindari menempatkan aset statis ke dalam Client folder dan Server wwwroot
. Jika file yang sama ada di kedua folder, pengecualian dilemparkan karena aset statis di setiap folder berbagi jalur akar web yang sama. Oleh karena itu, host aset statis di salah satu wwwroot
folder, bukan keduanya.
Setelah mengadopsi konfigurasi sebelumnya, sematkan Razor komponen ke dalam halaman atau tampilan Server proyek. Gunakan panduan di bagian berikut dari artikel ini:
- Merender komponen dalam halaman atau tampilan dengan Pembantu Tag Komponen
- Merender komponen dalam halaman atau tampilan dengan pemilih CSS
Merender komponen dalam halaman atau tampilan dengan Pembantu Tag Komponen
Setelah mengonfigurasi solusi, termasuk konfigurasi tambahan, Pembantu Tag Komponen mendukung dua mode render untuk merender komponen dari Blazor WebAssembly aplikasi di halaman atau tampilan:
Dalam contoh Halaman berikut Razor , Counter
komponen dirender di halaman. Untuk membuat komponen interaktif, Blazor WebAssembly skrip disertakan di bagian render halaman. Untuk menghindari penggunaan namespace lengkap untuk Counter
komponen dengan Component Tag Helper ({ASSEMBLY NAME}.Pages.Counter
), tambahkan @using
direktif untuk namespace proyek Pages
klien. Dalam contoh berikut, Client namespace proyek adalah BlazorHosted.Client
.
Dalam proyek Server, Pages/RazorPagesCounter1.cshtml
:
@page
@using BlazorHosted.Client.Pages
<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered" />
@section Scripts {
<script src="_framework/blazor.webassembly.js"></script>
}
Jalankan Server proyek. Navigasi ke Razor halaman di /razorpagescounter1
. Komponen yang telah dirender Counter
disematkan di halaman.
RenderMode mengonfigurasi apakah 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.
Pekerjaan tambahan mungkin diperlukan tergantung pada sumber daya statis yang digunakan komponen dan bagaimana halaman tata letak diatur dalam aplikasi. Biasanya, skrip ditambahkan ke halaman atau bagian render tampilan Scripts
dan lembar gaya ditambahkan ke konten elemen tata letak <head>
.
Mengatur konten turunan melalui fragmen render
Pembantu Tag Komponen tidak mendukung penerimaanRenderFragment
delegasi untuk konten anak (misalnya, param-ChildContent="..."
). Sebaiknya buat Razor komponen (.razor
) yang mereferensikan komponen yang ingin Anda render dengan konten anak yang ingin Anda lewati lalu panggil Razor komponen dari halaman atau tampilan.
Pastikan bahwa komponen yang telah dirender tingkat atas tidak dipangkas saat diterbitkan
Jika Pembantu Tag Komponen secara langsung mereferensikan komponen dari pustaka yang tunduk pada pemangkasan penerbitan, komponen mungkin dipangkas selama penerbitan karena tidak ada referensi dari kode aplikasi sisi klien. Akibatnya, komponen tidak dirender sebelumnya, meninggalkan tempat kosong dalam output. Jika ini terjadi, instruksikan pemangkas untuk mempertahankan komponen pustaka dengan menambahkan DynamicDependency
atribut ke kelas apa pun di aplikasi sisi klien. Untuk mempertahankan komponen yang disebut SomeLibraryComponentToBePreserved
, tambahkan yang berikut ini ke komponen apa pun:
@using System.Diagnostics.CodeAnalysis
@attribute [DynamicDependency(DynamicallyAccessedMemberTypes.All,
typeof(SomeLibraryComponentToBePreserved))]
Pendekatan sebelumnya biasanya tidak diperlukan karena dalam banyak kasus aplikasi merender komponennya (yang tidak dipangkas), yang pada gilirannya mereferensikan komponen dari pustaka (menyebabkannya juga tidak dipangkas). Hanya gunakan DynamicDependency
secara eksplisit untuk merender komponen pustaka secara langsung ketika pustaka tunduk pada pemangkasan.
Merender komponen dalam halaman atau tampilan dengan pemilih CSS
Setelah mengonfigurasi solusi, termasuk konfigurasi tambahan, tambahkan komponen root ke Client proyek solusi yang dihosting Blazor WebAssembly dalam Program.cs
file. Dalam contoh berikut, Counter
komponen dinyatakan sebagai komponen akar dengan pemilih CSS yang memilih elemen dengan id
yang cocok counter-component
. Dalam contoh berikut, Client namespace proyek adalah BlazorHosted.Client
.
Dalam Program.cs
file Client proyek, tambahkan namespace layanan untuk komponen proyek Razor ke bagian atas file:
using BlazorHosted.Client.Pages;
builder
Setelah ditetapkan dalam Program.cs
, tambahkan Counter
komponen sebagai komponen akar:
builder.RootComponents.Add<Counter>("#counter-component");
Dalam contoh Halaman berikut Razor , Counter
komponen dirender di halaman. Untuk membuat komponen interaktif, Blazor WebAssembly skrip disertakan di bagian render halaman.
Dalam proyek Server, Pages/RazorPagesCounter2.cshtml
:
@page
<div id="counter-component">Loading...</div>
@section Scripts {
<script src="_framework/blazor.webassembly.js"></script>
}
Jalankan Server proyek. Navigasi ke Razor halaman di /razorpagescounter2
. Komponen yang telah dirender Counter
disematkan di halaman.
Pekerjaan tambahan mungkin diperlukan tergantung pada sumber daya statis yang digunakan komponen dan bagaimana halaman tata letak diatur dalam aplikasi. Biasanya, skrip ditambahkan ke halaman atau bagian render tampilan Scripts
dan lembar gaya ditambahkan ke konten elemen tata letak <head>
.
Catatan
Contoh sebelumnya melemparkan JSException jika Blazor WebAssembly aplikasi dirender dan diintegrasikan ke dalam Razor Halaman atau aplikasi MVC secara bersamaan dengan penggunaan pemilih CSS. Menavigasi ke salah Client satu komponen proyek Razor atau menavigasi ke halaman atau tampilan Server dengan komponen yang disematkan melempar satu atau beberapa JSException.
Ini adalah perilaku normal karena melakukan prarender dan mengintegrasikan Blazor WebAssembly aplikasi dengan komponen yang dapat dirutekan Razor tidak kompatibel dengan penggunaan pemilih CSS.
Jika Anda telah bekerja dengan contoh di bagian sebelumnya dan hanya ingin melihat pekerjaan pemilih CSS di aplikasi sampel Anda, komentari spesifikasi App
komponen Client akar file proyek Program.cs
:
- builder.RootComponents.Add<App>("#app");
+ //builder.RootComponents.Add<App>("#app");
Navigasikan ke halaman atau lihat dengan komponen yang disematkan Razor yang menggunakan pemilih CSS (misalnya, /razorpagescounter2
dari contoh sebelumnya). Halaman atau tampilan dimuat dengan komponen yang disematkan, dan komponen yang disematkan berfungsi seperti yang diharapkan.
Razor komponen dapat diintegrasikan ke dalam Razor aplikasi Pages dan 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 dan tampilan yang ada dengan Pembantu Tag Komponen.
Konfigurasi
Gunakan panduan berikut untuk mengintegrasikan Razor komponen ke dalam halaman dan 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
dalam aplikasi yang dihosting Blazor WebAssembly 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.
Sumber daya tambahan Blazor WebAssembly
- Manajemen status: Menangani pra-penyajian
- Dukungan pra-penyajian dengan pemuatan malas rakitan
- Razor subjek siklus hidup komponen yang berkaitan dengan pra-penyajian
- Inisialisasi komponen (
OnInitialized{Async}
) - Setelah render komponen (
OnAfterRender{Async}
) - Koneksi ulang stateful setelah pra-penyajian: Meskipun konten di bagian berfokus pada Blazor Server dan koneksi ulang yang statefulSignalR, skenario untuk prarendering di aplikasi yang Blazor WebAssembly dihosting (WebAssemblyPrerendered) melibatkan kondisi dan pendekatan serupa untuk mencegah eksekusi kode pengembang dua kali. Untuk mempertahankan status selama eksekusi kode inisialisasi saat melakukan prarender, lihat bagian Mempertahankan status yang telah dirender sebelumnya di artikel ini.
- Pra-penyajian dengan interop JavaScript
- Inisialisasi komponen (
- Subjek autentikasi dan otorisasi yang berkaitan dengan pra-penyajian
- Host dan sebarkan: Blazor WebAssembly
Ukuran status dan SignalR batas ukuran pesan yang telah dirender sebelumnya
Ukuran status besar yang telah dirender mungkin melebihi SignalR batas ukuran pesan sirkuit, 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)
Razorkomponen dapat diintegrasikan ke dalam Razor aplikasi Pages dan MVC dalam solusi yang dihostingBlazor WebAssembly. 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.
Konfigurasi solusi
Konfigurasi pra-penyajian
Untuk menyiapkan pra-penyajian untuk aplikasi yang dihosting Blazor WebAssembly :
Host aplikasi Blazor WebAssembly di aplikasi ASP.NET Core. Aplikasi mandiri Blazor WebAssembly dapat ditambahkan ke solusi ASP.NET Core, atau Anda dapat menggunakan aplikasi yang dihosting Blazor WebAssembly yang dibuat dari Blazor WebAssembly templat proyek dengan opsi yang dihosting:
- Visual Studio: Dalam dialog Informasi tambahan, pilih kotak centang ASP.NET Core Hosted saat membuat Blazor WebAssembly aplikasi. Dalam contoh artikel ini, solusinya diberi nama
BlazorHosted
. - Shell perintah Visual Studio Code/.NET CLI:
dotnet new blazorwasm -ho
(gunakan-ho|--hosted
opsi ).-o|--output {LOCATION}
Gunakan opsi untuk membuat folder untuk solusi dan mengatur namespace proyek solusi. Dalam contoh artikel ini, solusinya diberi namaBlazorHosted
(dotnet new blazorwasm -ho -o BlazorHosted
).
Untuk contoh dalam artikel ini, namespace proyek klien adalah
BlazorHosted.Client
, dan namespace proyek server adalahBlazorHosted.Server
.- Visual Studio: Dalam dialog Informasi tambahan, pilih kotak centang ASP.NET Core Hosted saat membuat Blazor WebAssembly aplikasi. Dalam contoh artikel ini, solusinya diberi nama
wwwroot/index.html
Hapus file dari Blazor WebAssemblyClient proyek.Client Dalam proyek, hapus baris berikut di
Program.cs
:- builder.RootComponents.Add<App>("#app");
Pages/_Host.cshtml
Tambahkan file ke Server folder proyekPages
. Anda dapat memperoleh_Host.cshtml
file dari proyek yang dibuat dari Blazor Server templat dengandotnet new blazorserver -o BlazorServer
perintah dalam shell perintah (-o BlazorServer
opsi membuat folder untuk proyek). Setelah menempatkanPages/_Host.cshtml
file ke Server dalam proyek solusi yang dihosting Blazor WebAssembly , buat perubahan berikut pada file:Berikan arahan
@using
Client untuk proyek (misalnya,@using BlazorHosted.Client
).Perbarui tautan lembar gaya untuk menunjuk ke lembar gaya proyek WebAssembly. Dalam contoh berikut, namespace proyek klien adalah
BlazorHosted.Client
:- <link href="css/site.css" rel="stylesheet" /> - <link href="_content/BlazorServer/_framework/scoped.styles.css" rel="stylesheet" /> + <link href="css/app.css" rel="stylesheet" /> + <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
Catatan
<link>
Biarkan elemen yang meminta lembar gaya Bootstrap (css/bootstrap/bootstrap.min.css
) di tempat.render-mode
Perbarui Pembantu Tag Komponen untuk merender komponen akarApp
dengan WebAssemblyPrerendered:- <component type="typeof(App)" render-mode="ServerPrerendered" /> + <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
Blazor Perbarui sumber skrip untuk menggunakan skrip sisi Blazor WebAssembly klien:
- <script src="_framework/blazor.server.js"></script> + <script src="_framework/blazor.webassembly.js"></script>
Di
Startup.Configure
dalam Server proyek, ubah fallback dariindex.html
file ke_Host.cshtml
halaman.Startup.cs
:- endpoints.MapFallbackToFile("index.html"); + endpoints.MapFallbackToPage("/_Host");
Client Jika proyek dan Server menggunakan satu atau beberapa layanan umum selama pra-penyajian, faktori pendaftaran layanan ke dalam metode yang dapat dipanggil dari kedua proyek. Untuk informasi selengkapnya, lihat Injeksi dependensi ASP.NET Core Blazor.
Jalankan Server proyek. Aplikasi yang dihosting Blazor WebAssembly telah di-prerender oleh Server proyek untuk klien.
Konfigurasi untuk menyematkan Razor komponen ke dalam halaman dan tampilan
Bagian dan contoh berikut dalam artikel ini untuk menyematkan Razor komponen aplikasi klien Blazor WebAssembly ke halaman dan tampilan aplikasi server memerlukan konfigurasi tambahan.
Gunakan file tata letak Pages atau MVC default Razor dalam Server proyek. Proyek Server harus memiliki file dan folder berikut.
Razor Halaman:
Pages/Shared/_Layout.cshtml
Pages/_ViewImports.cshtml
Pages/_ViewStart.cshtml
MVC:
Views/Shared/_Layout.cshtml
Views/_ViewImports.cshtml
Views/_ViewStart.cshtml
Dapatkan file sebelumnya dari aplikasi yang dibuat dari Razor templat proyek Pages atau MVC. Untuk informasi selengkapnya, lihat Tutorial: Mulai menggunakan Razor Pages di ASP.NET Core atau Mulai menggunakan ASP.NET Core MVC.
Perbarui namespace dalam file yang diimpor _ViewImports.cshtml
agar sesuai dengan yang digunakan oleh proyek yang Server menerima file.
Perbarui file tata letak yang diimpor (_Layout.cshtml
) untuk menyertakan Client gaya proyek. Dalam contoh berikut, Client namespace proyek adalah BlazorHosted.Client
. Elemen <title>
dapat diperbarui secara bersamaan.
Pages/Shared/_Layout.cshtml
(Razor Pages) atau Views/Shared/_Layout.cshtml
(MVC):
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>@ViewData["Title"] - DonorProject</title>
+ <title>@ViewData["Title"] - BlazorHosted</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
+ <link href="css/app.css" rel="stylesheet" />
+ <link href="BlazorHosted.Client.styles.css" rel="stylesheet" />
</head>
Tata letak yang diimpor berisi Home
dan Privacy
tautan navigasi. Untuk membuat Home
tautan menunjuk ke aplikasi yang dihosting Blazor WebAssembly , ubah hyperlink:
- <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>
Dalam file tata letak MVC:
- <a class="nav-link text-dark" asp-area="" asp-controller="Home"
- asp-action="Index">Home</a>
+ <a class="nav-link text-dark" href="/">Home</a>
Untuk membuat tautan mengarah ke Privacy
halaman privasi, tambahkan halaman privasi ke Server proyek.
Pages/Privacy.cshtml
Server dalam proyek:
@page
@model BlazorHosted.Server.Pages.PrivacyModel
@{
}
<h1>Privacy Policy</h1>
Jika tampilan privasi berbasis MVC lebih disukai, buat tampilan privasi dalam Server proyek.
View/Home/Privacy.cshtml
:
@{
ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
Home
Di pengontrol, kembalikan tampilan.
Controllers/HomeController.cs
:
public IActionResult Privacy()
{
return View();
}
Impor aset statis ke Server proyek dari folder proyek wwwroot
donor:
wwwroot/css
folder dan kontenwwwroot/js
folder dan kontenwwwroot/lib
folder dan konten
Jika proyek donor dibuat dari templat proyek ASP.NET Core dan file tidak dimodifikasi, Anda dapat menyalin seluruh wwwroot
folder dari proyek donor ke dalam Server proyek dan menghapus favicon file ikon.
Peringatan
Hindari menempatkan aset statis ke dalam Client folder dan Server wwwroot
. Jika file yang sama ada di kedua folder, pengecualian dilemparkan karena aset statis di setiap folder berbagi jalur akar web yang sama. Oleh karena itu, host aset statis di salah satu wwwroot
folder, bukan keduanya.
Merender komponen dalam halaman atau tampilan dengan Pembantu Tag Komponen
Setelah mengonfigurasi solusi, termasuk konfigurasi tambahan, Pembantu Tag Komponen mendukung dua mode render untuk merender komponen dari Blazor WebAssembly aplikasi di halaman atau tampilan:
Dalam contoh Halaman berikut Razor , Counter
komponen dirender di halaman. Untuk membuat komponen interaktif, Blazor WebAssembly skrip disertakan di bagian render halaman. Untuk menghindari penggunaan namespace lengkap untuk Counter
komponen dengan Component Tag Helper ({ASSEMBLY NAME}.Pages.Counter
), tambahkan @using
direktif untuk namespace proyek Pages
klien. Dalam contoh berikut, Client namespace proyek adalah BlazorHosted.Client
.
Dalam proyek Server, Pages/RazorPagesCounter1.cshtml
:
@page
@using BlazorHosted.Client.Pages
<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered" />
@section Scripts {
<script src="_framework/blazor.webassembly.js"></script>
}
Jalankan Server proyek. Navigasi ke Razor halaman di /razorpagescounter1
. Komponen yang telah dirender Counter
disematkan di halaman.
RenderMode mengonfigurasi apakah 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.
Pekerjaan tambahan mungkin diperlukan tergantung pada sumber daya statis yang digunakan komponen dan bagaimana halaman tata letak diatur dalam aplikasi. Biasanya, skrip ditambahkan ke halaman atau bagian render tampilan Scripts
dan lembar gaya ditambahkan ke konten elemen tata letak <head>
.
Merender komponen dalam halaman atau tampilan dengan pemilih CSS
Setelah mengonfigurasi solusi, termasuk konfigurasi tambahan, tambahkan komponen root ke Client proyek solusi yang dihosting Blazor WebAssembly di Program.cs
. Dalam contoh berikut, Counter
komponen dinyatakan sebagai komponen akar dengan pemilih CSS yang memilih elemen dengan id
yang cocok counter-component
. Dalam contoh berikut, Client namespace proyek adalah BlazorHosted.Client
.
Di Program.cs
dalam Client proyek, tambahkan namespace layanan untuk komponen proyek Razor ke bagian atas file:
using BlazorHosted.Client.Pages;
builder
Setelah ditetapkan dalam Program.cs
, tambahkan Counter
komponen sebagai komponen akar:
builder.RootComponents.Add<Counter>("#counter-component");
Dalam contoh Halaman berikut Razor , Counter
komponen dirender di halaman. Untuk membuat komponen interaktif, Blazor WebAssembly skrip disertakan di bagian render halaman.
Dalam proyek Server, Pages/RazorPagesCounter2.cshtml
:
@page
<div id="counter-component">Loading...</div>
@section Scripts {
<script src="_framework/blazor.webassembly.js"></script>
}
Jalankan Server proyek. Navigasi ke Razor halaman di /razorpagescounter2
. Komponen yang telah dirender Counter
disematkan di halaman.
Pekerjaan tambahan mungkin diperlukan tergantung pada sumber daya statis yang digunakan komponen dan bagaimana halaman tata letak diatur dalam aplikasi. Biasanya, skrip ditambahkan ke halaman atau bagian render tampilan Scripts
dan lembar gaya ditambahkan ke konten elemen tata letak <head>
.
Catatan
Contoh sebelumnya melemparkan JSException jika Blazor WebAssembly aplikasi dirender dan diintegrasikan ke dalam Razor Halaman atau aplikasi MVC secara bersamaan dengan pemilih CSS. Menavigasi ke salah Client satu komponen proyek Razor melemparkan pengecualian berikut:
Microsoft.JSInterop.JSPengecualian: Tidak dapat menemukan elemen yang cocok dengan pemilih '#counter-component'.
Ini adalah perilaku normal karena melakukan prarender dan mengintegrasikan Blazor WebAssembly aplikasi dengan komponen yang dapat dirutekan Razor tidak kompatibel dengan penggunaan pemilih CSS.
Razor komponen dapat diintegrasikan ke dalam Razor aplikasi Pages dan 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 dan tampilan yang ada dengan Pembantu Tag Komponen.
Konfigurasi
Halaman atau aplikasi MVC yang ada Razor dapat mengintegrasikan Razor komponen ke dalam halaman dan 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.
Sumber daya tambahan Blazor WebAssembly
- Manajemen status: Menangani pra-penyajian
- Dukungan pra-penyajian dengan pemuatan malas rakitan
- Razor subjek siklus hidup komponen yang berkaitan dengan pra-penyajian
- Inisialisasi komponen (
OnInitialized{Async}
) - Setelah render komponen (
OnAfterRender{Async}
) - Koneksi ulang stateful setelah pra-penyajian: Meskipun konten di bagian berfokus pada Blazor Server dan koneksi ulang yang statefulSignalR, skenario untuk prarendering di aplikasi yang Blazor WebAssembly dihosting (WebAssemblyPrerendered) melibatkan kondisi dan pendekatan serupa untuk mencegah eksekusi kode pengembang dua kali. Untuk mempertahankan status selama eksekusi kode inisialisasi saat melakukan prarender, lihat bagian Mempertahankan status yang telah dirender sebelumnya di artikel ini.
- Pra-penyajian dengan interop JavaScript
- Inisialisasi komponen (
- Subjek autentikasi dan otorisasi yang berkaitan dengan pra-penyajian
- Host dan sebarkan: Blazor WebAssembly
Ukuran status dan SignalR batas ukuran pesan yang telah dirender sebelumnya
Ukuran status besar yang telah dirender mungkin melebihi SignalR batas ukuran pesan sirkuit, 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)
Mengintegrasikan Razor komponen ke dalam Razor aplikasi Pages dan MVC dalam solusi yang dihosting Blazor WebAssemblydidukung di ASP.NET Core di .NET 5 atau yang lebih baru. Pilih .NET 5 atau versi yang lebih baru dari artikel ini.
Razor komponen dapat diintegrasikan ke dalam Razor aplikasi Pages dan 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 dan tampilan yang ada dengan Pembantu Tag Komponen.
Konfigurasi
Halaman atau aplikasi MVC yang ada Razor dapat mengintegrasikan Razor komponen ke dalam halaman dan 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 SignalR batas ukuran pesan sirkuit, 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