Bagikan melalui

Mengintegrasikan komponen ASP.NET Core Razor dengan MVC atau Razor Pages

  • Artikel

Catatan

Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.

Peringatan

Versi ASP.NET Core ini tidak lagi didukung. Untuk informasi selengkapnya, lihat Kebijakan Dukungan .NET dan .NET Core. Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.

Penting

Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.

Untuk rilis saat ini, lihat versi .NET 9 dari artikel ini.

Razor komponen dapat diintegrasikan ke dalam Razor aplikasi Pages atau MVC. Ketika halaman atau tampilan dirender, komponen dapat dirender secara bersamaan.

Penting

Perubahan kerangka kerja di seluruh rilis ASP.NET Core menyebabkan serangkaian instruksi yang berbeda dalam artikel ini. Sebelum menggunakan panduan artikel ini, konfirmasikan bahwa pemilih versi dokumen di bagian atas artikel ini cocok dengan versi ASP.NET Core yang ingin Anda gunakan untuk aplikasi Anda.

Pra-penyajian dapat meningkatkan Pengoptimalan Mesin Pencari (SEO) dengan merender konten untuk respons HTTP awal yang dapat digunakan mesin pencari untuk menghitung peringkat halaman.

Setelah mengonfigurasi proyek, gunakan panduan di bagian berikut tergantung pada persyaratan proyek:

Konfigurasi

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

  1. 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}

  2. Dalam file tata letak proyek (Pages/Shared/_Layout.cshtml di Razor aplikasi Pages atau Views/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 untuk blazor.server.js skrip segera sebelum bagian Scripts render (@await RenderSectionAsync(...)):

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

      Kerangka kerja menambahkan blazor.server.js skrip ke aplikasi. Tidak perlu menambahkan blazor.server.js file skrip secara manual ke aplikasi.

    Catatan

    Biasanya, tata letak dimuat melalui _ViewStart.cshtml file.

  3. Daftarkan Blazor Server layanan tempat Program.cs layanan terdaftar:

    builder.Services.AddServerSideBlazor();

  4. Blazor Tambahkan titik akhir Hub ke titik Program.cs akhir tempat rute dipetakan. Tempatkan baris berikut setelah panggilan ke MapRazorPages (Razor Pages) atau MapControllerRoute (MVC):

    app.MapBlazorHub();

  5. Integrasikan komponen ke halaman atau tampilan apa pun. Misalnya, tambahkan Counter komponen ke folder proyek Shared .

    Pages/Shared/Counter.razor (Razor Pages) atau Views/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, tambahkan Counter namespace layanan komponen dan sematkan komponen ke dalam halaman. Ketika halaman dimuat Index , 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, tambahkan Counter namespace layanan komponen dan sematkan komponen ke dalam tampilan. Saat tampilan dimuat Index , 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:

  1. Ikuti panduan di bagian Konfigurasi .

  2. 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>

  3. _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.

  4. Program.cs Di titik akhir, tambahkan rute berprioritas rendah untuk _Host halaman sebagai titik akhir terakhir:

    app.MapFallbackToPage("/_Host");

  5. Tambahkan komponen yang dapat dirutekan ke proyek. Contoh berikut adalah RoutableCounter komponen berdasarkan Counter 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++;
    }
}

  6. 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:

  1. Ikuti panduan di bagian Konfigurasi .

  2. 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>

  3. _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.

  4. Tambahkan tindakan ke Home pengontrol.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Program.cs Di titik akhir, tambahkan rute berprioritas rendah untuk tindakan pengontrol yang mengembalikan _Host tampilan:

    app.MapFallbackToController("Blazor", "Home");

  6. Buat Pages folder di aplikasi MVC dan tambahkan komponen yang dapat dirutekan. Contoh berikut adalah RoutableCounter komponen berdasarkan Counter 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++;
    }
}

  7. Jalankan proyek dan navigasikan ke komponen yang dapat dirutekan RoutableCounter di /routable-counter.

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

Merender komponen dari halaman atau tampilan

Bagian ini berkaitan dengan menambahkan komponen ke halaman atau tampilan, di mana komponen tidak dapat dirutekan secara langsung dari permintaan pengguna.

Untuk merender komponen dari halaman atau tampilan, gunakan Pembantu Tag Komponen.

Merender komponen interaktif stateful

Komponen interaktif stateful dapat ditambahkan ke Razor halaman atau tampilan.

Saat halaman atau tampilan dirender:

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

Halaman berikut Razor merender Counter komponen:

<h1>Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.

Merender komponen noninteraktif

Di halaman berikut Razor , Counter komponen dirender secara statis dengan nilai awal yang ditentukan menggunakan formulir. Karena komponen dirender secara statis, komponen tidak interaktif:

<h1>Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.

Namespace komponen

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

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

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

Untuk informasi selengkapnya, lihat komponen ASP.NET CoreRazor.

Mempertahankan status yang telah dirender sebelumnya

Tanpa mempertahankan status yang telah dirender sebelumnya, status yang digunakan selama pra-penyajian hilang dan harus dibuat ulang saat aplikasi dimuat sepenuhnya. Jika ada status yang disiapkan secara asinkron, UI dapat berkedot karena UI yang telah dirender diganti dengan tempat penampung sementara dan kemudian sepenuhnya dirender lagi.

Untuk mempertahankan status komponen yang telah dirender sebelumnya, gunakan Pembantu Tag Status Komponen Persisten (sumber referensi). Tambahkan tag Pembantu _Host Tag, <persist-component-state />, di dalam tag penutup </body> halaman di aplikasi yang merender komponen.

Catatan

Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag rilis tertentu, gunakan daftar dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Di Pages/_Host.cshtml aplikasi Blazor yang ada ServerPrerendered di Blazor Server aplikasi:

<body>
    ...

    <persist-component-state />
</body>

Tentukan status apa yang akan bertahan menggunakan PersistentComponentState layanan. PersistentComponentState.RegisterOnPersisting mendaftarkan panggilan balik untuk mempertahankan status komponen sebelum aplikasi dijeda. Status diambil ketika aplikasi dilanjutkan.

Dalam contoh berikut:

  • Tempat {TYPE} penampung mewakili jenis data yang akan dipertahankan (misalnya, WeatherForecast[]).
  • Tempat {TOKEN} penampung adalah string pengidentifikasi status (misalnya, fetchdata).
@implements IDisposable
@inject PersistentComponentState ApplicationState

...

@code {
    private {TYPE} data;
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistData);

        if (!ApplicationState.TryTakeFromJson<{TYPE}>(
            "{TOKEN}", out var restored))
        {
            data = await ...;
        }
        else
        {
            data = restored!;
        }
    }

    private Task PersistData()
    {
        ApplicationState.PersistAsJson("{TOKEN}", data);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Contoh berikut adalah versi komponen yang diperbarui FetchData berdasarkan Blazor templat proyek. Komponen mempertahankan WeatherForecastPreserveState status prakiraan cuaca selama pra-penyajian lalu mengambil status untuk menginisialisasi komponen. Pembantu Tag Status Komponen Persist mempertahankan status komponen setelah semua pemanggilan komponen.

Pages/WeatherForecastPreserveState.razor:

@page "/weather-forecast-preserve-state"
@using BlazorSample.Shared
@implements IDisposable
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistForecasts);

        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            "fetchdata", out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
        }
        else
        {
            forecasts = restored!;
        }
    }

    private Task PersistForecasts()
    {
        ApplicationState.PersistAsJson("fetchdata", forecasts);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Dengan menginisialisasi komponen dengan status yang sama yang digunakan selama prarender, langkah-langkah inisialisasi mahal hanya dijalankan sekali. UI yang dirender juga cocok dengan UI yang telah dirender sebelumnya, sehingga tidak ada kedipan yang terjadi di browser.

Status pra-penyajian yang dipertahankan ditransfer ke klien, di mana ia digunakan untuk memulihkan status komponen. ASP.NET Core Data Protection memastikan bahwa data ditransfer dengan aman di Blazor Server aplikasi.

Ukuran status dan SignalR batas ukuran pesan yang telah dirender sebelumnya

Ukuran status besar yang telah dirender mungkin melebihi Blazorbatas ukuran pesan sirkuit, SignalR yang menghasilkan hal berikut:

  • SignalR Sirkuit gagal diinisialisasi dengan kesalahan pada klien:Circuit host not initialized.
  • Antarmuka pengguna koneksi ulang pada klien muncul ketika sirkuit gagal. Pemulihan tidak dimungkinkan.

Untuk mengatasi masalah tersebut, gunakan salah satu pendekatan berikut:

  • Kurangi jumlah data yang Anda masukkan ke dalam status yang telah dirender sebelumnya.
  • Tingkatkan SignalR batas ukuran pesan. PERINGATAN: Meningkatkan batas dapat meningkatkan risiko serangan Denial of Service (DoS).

Sumber daya tambahan Blazor Server

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:

Konfigurasi

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

Penting

Penggunaan halaman tata letak (_Layout.cshtml) dengan Pembantu Tag Komponen untuk HeadOutlet komponen diperlukan untuk mengontrol <head> konten, seperti judul halaman (PageTitle komponen) dan elemen kepala (HeadContent komponen) lainnya. Untuk informasi selengkapnya, lihat Mengontrol konten head di aplikasi ASP.NET CoreBlazor.

  1. Dalam file tata letak proyek:

    • Tambahkan Tag dan HeadOutlet Komponen Pembantu Tag berikut <base> ke <head> elemen di Pages/Shared/_Layout.cshtml (Razor Pages) atau Views/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 untuk blazor.server.js skrip segera sebelum bagian Scripts render (@await RenderSectionAsync(...)) di tata letak aplikasi.

      Pages/Shared/_Layout.cshtml (Razor Pages) atau Views/Shared/_Layout.cshtml (MVC):

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

      Kerangka kerja menambahkan blazor.server.js skrip ke aplikasi. Tidak perlu menambahkan blazor.server.js file skrip secara manual ke aplikasi.

  2. 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}

  3. Daftarkan Blazor Server layanan tempat Program.cs layanan terdaftar:

    builder.Services.AddServerSideBlazor();

  4. Blazor Tambahkan titik akhir Hub ke titik Program.cs akhir tempat rute dipetakan.

    Tempatkan baris berikut setelah panggilan ke MapRazorPages (Razor Pages) atau MapControllerRoute (MVC):

    app.MapBlazorHub();

  5. Integrasikan komponen ke halaman atau tampilan apa pun. Misalnya, tambahkan Counter komponen ke folder proyek Shared .

    Pages/Shared/Counter.razor (Razor Pages) atau Views/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, tambahkan Counter namespace layanan komponen dan sematkan komponen ke dalam halaman. Ketika halaman dimuat Index , 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, tambahkan Counter namespace layanan komponen dan sematkan komponen ke dalam tampilan. Saat tampilan dimuat Index , 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:

  1. Ikuti panduan di bagian Konfigurasi .

  2. 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>

  3. _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.

  4. Program.cs Di titik akhir, tambahkan rute berprioritas rendah untuk _Host halaman sebagai titik akhir terakhir:

    app.MapFallbackToPage("/_Host");

  5. Tambahkan komponen yang dapat dirutekan ke proyek. Contoh berikut adalah RoutableCounter komponen berdasarkan Counter 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++;
    }
}

  6. 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:

  1. Ikuti panduan di bagian Konfigurasi .

  2. 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>

  3. _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.

  4. Tambahkan tindakan ke Home pengontrol.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Program.cs Di titik akhir, tambahkan rute berprioritas rendah untuk tindakan pengontrol yang mengembalikan _Host tampilan:

    app.MapFallbackToController("Blazor", "Home");

  6. Buat Pages folder di aplikasi MVC dan tambahkan komponen yang dapat dirutekan. Contoh berikut adalah RoutableCounter komponen berdasarkan Counter 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++;
    }
}

  7. Jalankan proyek dan navigasikan ke komponen yang dapat dirutekan RoutableCounter di /routable-counter.

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

Merender komponen dari halaman atau tampilan

Bagian ini berkaitan dengan menambahkan komponen ke halaman atau tampilan, di mana komponen tidak dapat dirutekan secara langsung dari permintaan pengguna.

Untuk merender komponen dari halaman atau tampilan, gunakan Pembantu Tag Komponen.

Merender komponen interaktif stateful

Komponen interaktif stateful dapat ditambahkan ke Razor halaman atau tampilan.

Saat halaman atau tampilan dirender:

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

Halaman berikut Razor merender Counter komponen:

<h1>Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.

Penting

Penggunaan halaman tata letak (_Layout.cshtml) dengan Pembantu Tag Komponen untuk HeadOutlet komponen diperlukan untuk mengontrol <head> konten, seperti judul halaman (PageTitle komponen) dan elemen kepala (HeadContent komponen) lainnya. Untuk informasi selengkapnya, lihat Mengontrol konten head di aplikasi ASP.NET CoreBlazor.

Merender komponen noninteraktif

Di halaman berikut Razor , Counter komponen dirender secara statis dengan nilai awal yang ditentukan menggunakan formulir. Karena komponen dirender secara statis, komponen tidak interaktif:

<h1>Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.

Penting

Penggunaan halaman tata letak (_Layout.cshtml) dengan Pembantu Tag Komponen untuk HeadOutlet komponen diperlukan untuk mengontrol <head> konten, seperti judul halaman (PageTitle komponen) dan elemen kepala (HeadContent komponen) lainnya. Untuk informasi selengkapnya, lihat Mengontrol konten head di aplikasi ASP.NET CoreBlazor.

Namespace komponen

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

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

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

Untuk informasi selengkapnya, lihat komponen ASP.NET CoreRazor.

Mempertahankan status yang telah dirender sebelumnya

Tanpa mempertahankan status yang telah dirender sebelumnya, status yang digunakan selama pra-penyajian hilang dan harus dibuat ulang saat aplikasi dimuat sepenuhnya. Jika ada status yang disiapkan secara asinkron, UI dapat berkedot karena UI yang telah dirender diganti dengan tempat penampung sementara dan kemudian sepenuhnya dirender lagi.

Untuk mengatasi masalah ini, Blazor mendukung status bertahan di halaman yang telah dirender sebelumnya menggunakan Pembantu Tag Status Komponen Persisten. Tambahkan tag Pembantu Tag, <persist-component-state />, di dalam tag penutup </body> .

Pages/_Layout.cshtml:

<body>
    ...

    <persist-component-state />
</body>

Tentukan status apa yang akan bertahan menggunakan PersistentComponentState layanan. PersistentComponentState.RegisterOnPersisting mendaftarkan panggilan balik untuk mempertahankan status komponen sebelum aplikasi dijeda. Status diambil ketika aplikasi dilanjutkan.

Contoh berikut adalah versi komponen yang diperbarui FetchData berdasarkan Blazor templat proyek. Komponen mempertahankan WeatherForecastPreserveState status prakiraan cuaca selama pra-penyajian lalu mengambil status untuk menginisialisasi komponen. Pembantu Tag Status Komponen Persist mempertahankan status komponen setelah semua pemanggilan komponen.

Pages/WeatherForecastPreserveState.razor:

@page "/weather-forecast-preserve-state"
@implements IDisposable
@using BlazorSample.Shared
@inject IWeatherForecastService WeatherForecastService
@inject PersistentComponentState ApplicationState

<PageTitle>Weather Forecast</PageTitle>

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[] forecasts = Array.Empty<WeatherForecast>();
    private PersistingComponentStateSubscription persistingSubscription;

    protected override async Task OnInitializedAsync()
    {
        persistingSubscription = 
            ApplicationState.RegisterOnPersisting(PersistForecasts);

        if (!ApplicationState.TryTakeFromJson<WeatherForecast[]>(
            "fetchdata", out var restored))
        {
            forecasts = 
                await WeatherForecastService.GetForecastAsync(DateTime.Now);
        }
        else
        {
            forecasts = restored!;
        }
    }

    private Task PersistForecasts()
    {
        ApplicationState.PersistAsJson("fetchdata", forecasts);

        return Task.CompletedTask;
    }

    void IDisposable.Dispose()
    {
        persistingSubscription.Dispose();
    }
}

Dengan menginisialisasi komponen dengan status yang sama yang digunakan selama prarender, langkah-langkah inisialisasi mahal hanya dijalankan sekali. UI yang dirender juga cocok dengan UI yang telah dirender sebelumnya, sehingga tidak ada kedipan yang terjadi di browser.

Status pra-penyajian yang dipertahankan ditransfer ke klien, di mana ia digunakan untuk memulihkan status komponen. ASP.NET Core Data Protection memastikan bahwa data ditransfer dengan aman di Blazor Server aplikasi.

Ukuran status dan SignalR batas ukuran pesan yang telah dirender sebelumnya

Ukuran status besar yang telah dirender mungkin melebihi Blazorbatas ukuran pesan sirkuit, SignalR yang menghasilkan hal berikut:

  • SignalR Sirkuit gagal diinisialisasi dengan kesalahan pada klien:Circuit host not initialized.
  • Antarmuka pengguna koneksi ulang pada klien muncul ketika sirkuit gagal. Pemulihan tidak dimungkinkan.

Untuk mengatasi masalah tersebut, gunakan salah satu pendekatan berikut:

  • Kurangi jumlah data yang Anda masukkan ke dalam status yang telah dirender sebelumnya.
  • Tingkatkan SignalR batas ukuran pesan. PERINGATAN: Meningkatkan batas dapat meningkatkan risiko serangan Denial of Service (DoS).

Sumber daya tambahan Blazor Server

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:

Konfigurasi

Halaman atau aplikasi MVC yang ada Razor dapat mengintegrasikan Razor komponen ke dalam halaman atau tampilan:

  1. Dalam file tata letak proyek:

    • Tambahkan tag berikut <base> ke <head> elemen di Pages/Shared/_Layout.cshtml (Razor Pages) atau Views/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 untuk blazor.server.js skrip segera sebelum bagian Scripts render.

      Pages/Shared/_Layout.cshtml (Razor Pages) atau Views/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 menambahkan blazor.server.js file skrip secara manual ke aplikasi.

  2. 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}

  3. Daftarkan Blazor Server layanan di Startup.ConfigureServices.

    Di Startup.cs:

    services.AddServerSideBlazor();

  4. Blazor Tambahkan titik akhir Hub ke titik akhir (app.UseEndpoints) dari Startup.Configure.

    Startup.cs:

    endpoints.MapBlazorHub();

  5. Integrasikan komponen ke halaman atau tampilan apa pun. Misalnya, tambahkan Counter komponen ke folder proyek Shared .

    Pages/Shared/Counter.razor (Razor Pages) atau Views/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, tambahkan Counter namespace layanan komponen dan sematkan komponen ke dalam halaman. Ketika halaman dimuat Index , 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, tambahkan Counter namespace layanan komponen dan sematkan komponen ke dalam tampilan. Saat tampilan dimuat Index , 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:

  1. Ikuti panduan di bagian Konfigurasi .

  2. 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 parameter PreferExactMatches yang diatur ke @true. Untuk informasi lebih lanjut, lihat Migrasi dari ASP.NET Core 3.1 ke 5.0.

  3. _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.

  4. Startup.Configure Di titik Startup.csakhir , 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");
});

  5. 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++;
    }
}

  6. 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:

  1. Ikuti panduan di bagian Konfigurasi .

  2. 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 parameter PreferExactMatches yang diatur ke @true. Untuk informasi lebih lanjut, lihat Migrasi dari ASP.NET Core 3.1 ke 5.0.

  3. _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.

  4. Tambahkan tindakan ke Home pengontrol.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Startup.Configure Di titik Startup.csakhir , 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");
});

  6. 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++;
    }
}

  7. Jalankan proyek dan navigasikan ke komponen yang dapat dirutekan RoutableCounter di /routable-counter.

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

Merender komponen dari halaman atau tampilan

Bagian ini berkaitan dengan menambahkan komponen ke halaman atau tampilan, di mana komponen tidak dapat dirutekan secara langsung dari permintaan pengguna.

Untuk merender komponen dari halaman atau tampilan, gunakan Pembantu Tag Komponen.

Merender komponen interaktif stateful

Komponen interaktif stateful dapat ditambahkan ke Razor halaman atau tampilan.

Saat halaman atau tampilan dirender:

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

Halaman berikut Razor merender Counter komponen:

<h1>My Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.

Merender komponen noninteraktif

Di halaman berikut Razor , Counter komponen dirender secara statis dengan nilai awal yang ditentukan menggunakan formulir. Karena komponen dirender secara statis, komponen tidak interaktif:

<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.

Namespace komponen

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

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

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

Untuk informasi selengkapnya, lihat komponen ASP.NET CoreRazor.

Ukuran status dan SignalR batas ukuran pesan yang telah dirender sebelumnya

Ukuran status besar yang telah dirender mungkin melebihi Blazorbatas ukuran pesan sirkuit, SignalR yang menghasilkan hal berikut:

  • SignalR Sirkuit gagal diinisialisasi dengan kesalahan pada klien:Circuit host not initialized.
  • Antarmuka pengguna koneksi ulang pada klien muncul ketika sirkuit gagal. Pemulihan tidak dimungkinkan.

Untuk mengatasi masalah tersebut, gunakan salah satu pendekatan berikut:

  • Kurangi jumlah data yang Anda masukkan ke dalam status yang telah dirender sebelumnya.
  • Tingkatkan SignalR batas ukuran pesan. PERINGATAN: Meningkatkan batas dapat meningkatkan risiko serangan Denial of Service (DoS).

Sumber daya tambahan Blazor Server

Razor komponen dapat diintegrasikan ke dalam Razor aplikasi Pages atau MVC. Ketika halaman atau tampilan dirender, komponen dapat dirender secara bersamaan.

Pra-penyajian dapat meningkatkan Pengoptimalan Mesin Pencari (SEO) dengan merender konten untuk respons HTTP awal yang dapat digunakan mesin pencari untuk menghitung peringkat halaman.

Setelah mengonfigurasi proyek, gunakan panduan di bagian berikut tergantung pada persyaratan proyek:

Konfigurasi

Halaman atau aplikasi MVC yang ada Razor dapat mengintegrasikan Razor komponen ke dalam halaman atau tampilan:

  1. Dalam file tata letak proyek:

    • Tambahkan tag berikut <base> ke <head> elemen di Pages/Shared/_Layout.cshtml (Razor Pages) atau Views/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 untuk blazor.server.js skrip segera sebelum bagian Scripts render.

      Pages/Shared/_Layout.cshtml (Razor Pages) atau Views/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 menambahkan blazor.server.js file skrip secara manual ke aplikasi.

  2. 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}

  3. Daftarkan Blazor Server layanan di Startup.ConfigureServices.

    Startup.cs:

    services.AddServerSideBlazor();

  4. Blazor Tambahkan titik akhir Hub ke titik akhir (app.UseEndpoints) dari Startup.Configure.

    Startup.cs:

    endpoints.MapBlazorHub();

  5. Integrasikan komponen ke halaman atau tampilan apa pun. Misalnya, tambahkan Counter komponen ke folder proyek Shared .

    Pages/Shared/Counter.razor (Razor Pages) atau Views/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, tambahkan Counter namespace layanan komponen dan sematkan komponen ke dalam halaman. Ketika halaman dimuat Index , 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, tambahkan Counter namespace layanan komponen dan sematkan komponen ke dalam tampilan. Saat tampilan dimuat Index , 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:

  1. Ikuti panduan di bagian Konfigurasi .

  2. 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>

  3. _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.

  4. Startup.Configure Di titik Startup.csakhir , 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");
});

  5. 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++;
    }
}

  6. 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:

  1. Ikuti panduan di bagian Konfigurasi .

  2. 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>

  3. _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.

  4. Tambahkan tindakan ke Home pengontrol.

    Controllers/HomeController.cs:

    public IActionResult Blazor()
{
   return View("_Host");
}

  5. Startup.Configure Di titik Startup.csakhir , 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");
});

  6. 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++;
    }
}

  7. Jalankan proyek dan navigasikan ke komponen yang dapat dirutekan RoutableCounter di /routable-counter.

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

Merender komponen dari halaman atau tampilan

Bagian ini berkaitan dengan menambahkan komponen ke halaman atau tampilan, di mana komponen tidak dapat dirutekan secara langsung dari permintaan pengguna.

Untuk merender komponen dari halaman atau tampilan, gunakan Pembantu Tag Komponen.

Merender komponen interaktif stateful

Komponen interaktif stateful dapat ditambahkan ke Razor halaman atau tampilan.

Saat halaman atau tampilan dirender:

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

Halaman berikut Razor merender Counter komponen:

<h1>My Razor Page</h1>

<component type="typeof(Counter)" render-mode="ServerPrerendered" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.

Merender komponen noninteraktif

Di halaman berikut Razor , Counter komponen dirender secara statis dengan nilai awal yang ditentukan menggunakan formulir. Karena komponen dirender secara statis, komponen tidak interaktif:

<h1>My Razor Page</h1>

<form>
    <input type="number" asp-for="InitialValue" />
    <button type="submit">Set initial value</button>
</form>

<component type="typeof(Counter)" render-mode="Static" 
    param-InitialValue="InitialValue" />

@functions {
    [BindProperty(SupportsGet=true)]
    public int InitialValue { get; set; }
}

Untuk informasi selengkapnya, lihat Pembantu Tag Komponen di ASP.NET Core.

Namespace komponen

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

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

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

Untuk informasi selengkapnya, lihat komponen ASP.NET CoreRazor.

Ukuran status dan SignalR batas ukuran pesan yang telah dirender sebelumnya

Ukuran status besar yang telah dirender mungkin melebihi Blazorbatas ukuran pesan sirkuit, SignalR yang menghasilkan hal berikut:

  • SignalR Sirkuit gagal diinisialisasi dengan kesalahan pada klien:Circuit host not initialized.
  • Antarmuka pengguna koneksi ulang pada klien muncul ketika sirkuit gagal. Pemulihan tidak dimungkinkan.

Untuk mengatasi masalah tersebut, gunakan salah satu pendekatan berikut:

  • Kurangi jumlah data yang Anda masukkan ke dalam status yang telah dirender sebelumnya.
  • Tingkatkan SignalR batas ukuran pesan. PERINGATAN: Meningkatkan batas dapat meningkatkan risiko serangan Denial of Service (DoS).

Sumber daya tambahan Blazor Server