Sdílet prostřednictvím

Integrace komponent ASP.NET Core Razor do aplikací ASP.NET Core

  • Článek

Tento článek vysvětluje Razor scénáře integrace komponent pro aplikace ASP.NET Core.

Razor integrace komponent

Razor komponenty lze integrovat do Razor pages, MVC a dalších typů aplikací ASP.NET Core. Razor komponenty lze také integrovat do jakékoli webové aplikace, včetně aplikací, které nejsou založené na ASP.NET Core, jako vlastní prvky HTML.

Pokyny najdete v následujících částech v závislosti na požadavcích projektu:

Přidání Blazor podpory do aplikace ASP.NET Core

Tato část popisuje přidání Blazor podpory do aplikace ASP.NET Core:

Poznámka:

V příkladech v této části je BlazorSamplenázev a obor názvů ukázkové aplikace .

Přidání statického vykreslování na straně serveru (statická SSR)

Components Přidejte do aplikace složku.

Přidejte následující _Imports soubor pro obory názvů používané komponentami Razor .

Components/_Imports.razor:

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

Změňte zástupný symbol oboru názvů ({APP NAMESPACE}) na obor názvů aplikace. Příklad:

@using BlazorSample
@using BlazorSample.Components

Blazor Přidejte směrovač (<Router>,Router) do aplikace v komponentěRoutes, která je umístěná ve složce aplikaceComponents.

Components/Routes.razor:

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

Výchozí rozložení můžete zadat pomocí RouteView.DefaultLayout parametru RouteView komponenty:

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

Další informace najdete v tématu ASP.NET rozložení jádraBlazor.

Přidejte do aplikace komponentu App , která slouží jako kořenová komponenta, což je první komponenta, kterou aplikace načte.

Components/App.razor:

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

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

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

</html>

<link> U elementu v předchozím příkladu změňte BlazorSample název souboru šablony stylů tak, aby odpovídal názvu projektu aplikace. Projekt s názvem ContosoApp například používá ContosoApp.styles.css název souboru šablony stylů:

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

Pages Přidejte do Components složky složku pro uložení směrovatelných Razor komponent.

Přidejte následující Welcome komponentu pro předvedení statického serveru SSR.

Components/Pages/Welcome.razor:

@page "/welcome"

<PageTitle>Welcome!</PageTitle>

<h1>Welcome to Blazor!</h1>

<p>@message</p>

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

V souboru projektu Program ASP.NET Core:

  • using Přidejte příkaz na začátek souboru pro komponenty projektu:

    using {APP NAMESPACE}.Components;

    Na předchozím řádku změňte {APP NAMESPACE} zástupný symbol na obor názvů aplikace. Příklad:

    using BlazorSample.Components;

  • Přidání Razor služeb komponent (AddRazorComponents), které také automaticky přidávají antiforgery (AddAntiforgery). Před řádek, který volá, builder.Build()přidejte následující řádek ):

    builder.Services.AddRazorComponents();

  • Přidejte middleware Antiforgery do kanálu zpracování požadavků pomocí UseAntiforgery. UseAntiforgery je volána po volání UseRouting. Pokud existují volání UseRouting a UseEndpointsvolání musí UseAntiforgery jít mezi nimi. Hovor UseAntiforgery musí být umístěn po volání a UseAuthenticationUseAuthorization.

    app.UseAntiforgery();

  • Přidejte MapRazorComponents do kanálu zpracování požadavků aplikace s komponentou App (App.razor) určenou jako výchozí kořenová komponenta (první načtená komponenta). Před řádek, který volá app.Run, umístěte následující kód:

    app.MapRazorComponents<App>();

Po spuštění Welcome aplikace se ke komponentě přistupuje v koncovém /welcome bodu.

Povolení interaktivního vykreslování na straně serveru (interaktivní SSR)

Postupujte podle pokynů v části Přidání statického vykreslování na straně serveru (statická služba SSR).

V souboru aplikace Program přidejte volání, do AddInteractiveServerComponents kterého Razor se přidávají služby komponent:AddRazorComponents

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

Přidejte volání, do AddInteractiveServerRenderMode kterého Razor se komponenty mapují:MapRazorComponents

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

Přidejte do aplikace následující Counter komponentu, která přijímá interaktivní vykreslování na straně serveru (interaktivní SSR).

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

Když je aplikace spuštěna, Counter je komponenta přístupná na adrese /counter.

Povolení interaktivního automatického (automatického) nebo klientského vykreslování (CSR)

Postupujte podle pokynů v části Přidání statického vykreslování na straně serveru (statická služba SSR).

Komponenty používající režim interaktivního automatického vykreslování zpočátku používají interaktivní SSR. Modul runtime .NET a sada aplikací se stáhnou do klienta na pozadí a uloží se do mezipaměti, aby je bylo možné použít při budoucích návštěvách. Komponenty používající režim interaktivního vykreslování WebAssembly se v klientovi vykreslují interaktivně pouze po Blazor stažení sady a aktivaci Blazor modulu runtime. Mějte na paměti, že pokud používáte režimy interaktivního automatického nebo interaktivního vykreslování WebAssembly, kód komponenty stažený do klienta není soukromý. Další informace najdete v tématu ASP.NET režimy vykreslování coreBlazor.

Po rozhodnutí, který režim vykreslování se má přijmout:

Přidejte do aplikace odkaz na Microsoft.AspNetCore.Components.WebAssembly.Server balíček NuGet.

Poznámka:

Pokyny k přidávání balíčků do aplikací .NET najdete v článcích v části Instalace a správa balíčků na webu Pracovní postup používání balíčků (dokumentace k NuGetu). Ověřte správné verze balíčků na NuGet.org.

Vytvořte dárcovskou Blazor webovou aplikaci, která aplikaci poskytne prostředky. Při generování Blazor webové aplikace postupujte podle pokynů v nástrojích pro ASP.NET Core Blazor a vyberte podporu následujících funkcí šablony.

Jako název aplikace použijte stejný název jako aplikace ASP.NET Core, což má za následek odpovídající kód názvu aplikace v komponentách a odpovídajících oborech názvů v kódu. Použití stejného názvu nebo oboru názvů není nezbytně nutné, protože obory názvů je možné upravit po přesunu prostředků z aplikace dárců do aplikace ASP.NET Core. Čas se však ukládá tak, že se na začátku shoduje s obory názvů.

Visual Studio:

  • V režimu interaktivního vykreslování vyberte Možnost Automaticky (Server a WebAssembly).
  • Nastavte umístění interaktivity na jednotlivé stránky nebo součásti.
  • Zrušte zaškrtnutí políčka u ukázkových stránek zahrnout.

.NET CLI:

  • Použijte tuto -int Auto možnost.
  • Tuto možnost nepoužívejte-ai|--all-interactive.
  • -e|--empty Předejte možnost.

Z webové aplikace dárce Blazor zkopírujte celý .Client projekt do složky řešení aplikace ASP.NET Core.

Důležité

Složku nekopírujte .Client do složky projektu ASP.NET Core. Nejlepším přístupem pro uspořádání řešení .NET je umístit každý projekt řešení do vlastní složky ve složce řešení nejvyšší úrovně. Pokud složka řešení nad složkou ASP.NET Core projektu neexistuje, vytvořte ji. Dále zkopírujte .Client složku projektu z dárcovské Blazor webové aplikace do složky řešení. Konečná struktura složek projektu by měla mít následující rozložení:

  • BlazorSampleSolution (složka řešení nejvyšší úrovně)
    • BlazorSample (původní projekt ASP.NET Core)
    • BlazorSample.Client (.Client složka projektu z webové aplikace dárce Blazor )

U souboru řešení ASP.NET Core ho můžete ponechat ve složce projektu ASP.NET Core. Případně můžete přesunout soubor řešení nebo vytvořit nový soubor ve složce řešení nejvyšší úrovně, pokud projekt správně odkazuje na soubory projektu (.csproj) obou projektů ve složce řešení.

Pokud jste při vytváření projektu dárce Blazor pojmenovali stejnou aplikaci jako aplikace ASP.NET Core, odpovídají obory názvů využívané darovanými prostředky těm, které jsou v aplikaci ASP.NET Core. Neměli byste provádět další kroky, které by odpovídaly oborům názvů. Pokud jste při vytváření projektu webové aplikace pro dárce Blazor použili jiný obor názvů, musíte upravit obory názvů v rámci darovaných prostředků tak, aby odpovídaly, pokud chcete použít zbývající části těchto pokynů přesně tak, jak jsou uvedeny. Pokud se obory názvů neshodují, upravte obory názvů před pokračováním nebo upravte obory názvů podle zbývajících pokynů v této části.

Odstraňte dárcovskou Blazor webovou aplikaci, protože se v tomto procesu už nepoužívá.

.Client Přidejte projekt do řešení:

  • Visual Studio: Klikněte pravým tlačítkem na řešení v Průzkumník řešení a vyberte Přidat>existující projekt. Přejděte do .Client složky a vyberte soubor projektu (.csproj).

  • .NET CLI: Pomocí dotnet sln add příkazu přidejte .Client projekt do řešení.

Do klientského projektu přidejte odkaz na projekt ASP.NET Core:

  • Visual Studio: Klikněte pravým tlačítkem na projekt ASP.NET Core a vyberte Přidat>odkaz na projekt. .Client Vyberte projekt a vyberte OK.

  • .NET CLI: Ze složky projektu ASP.NET Core použijte následující příkaz:

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

    Předchozí příkaz předpokládá následující:

    • Název souboru projektu je BlazorSample.Client.csproj.
    • Projekt .Client je ve BlazorSample.Client složce uvnitř složky řešení. Složka .Client je vedle složky projektu ASP.NET Core.

    Další informace o dotnet add reference příkazu najdete dotnet add reference v dokumentaci k .NET.

V souboru aplikace Program ASP.NET Core proveďte následující změny:

  • Přidat interaktivní služby komponent WebAssembly s umístěním AddInteractiveWebAssemblyComponentsRazor komponent služby jsou přidány s AddRazorComponents.

    Interaktivní automatické vykreslování:

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

    Pouze pro interaktivní vykreslování WebAssembly:

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

  • Přidejte interaktivní režim vykreslování WebAssembly (AddInteractiveWebAssemblyRenderMode) a další sestavení pro .Client projekt, ve kterém Razor jsou komponenty mapovány MapRazorComponents.

    Interaktivní automatické vykreslování:

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

    Pouze pro interaktivní vykreslování WebAssembly:

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

    V předchozích příkladech změňte BlazorSample.Client shodu s oborem .Client názvů projektu.

Pages Přidejte do .Client projektu složku.

Pokud má projekt ASP.NET Core existující Counter komponentu:

  • Přesuňte komponentu Pages do složky .Client projektu.
  • Odeberte direktivu @rendermode v horní části souboru komponenty.

Pokud aplikace ASP.NET Core nemá komponentuCounter, přidejte do projektu následující Counter komponentu .Client (Pages/Counter.razor):

@page "/counter"
@rendermode InteractiveAuto

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

Pokud aplikace přijímá pouze interaktivní vykreslování WebAssembly, odeberte direktivu @rendermode a hodnotu:

- @rendermode InteractiveAuto

Spusťte řešení z projektu aplikace ASP.NET Core:

  • Visual Studio: Ověřte, že při spuštění aplikace je vybraný projekt ASP.NET Core v Průzkumník řešení.

  • .NET CLI: Spusťte projekt ze složky projektu ASP.NET Core.

Chcete-li načíst Counter součást, přejděte na /counter.

Použití nesměrovatelných komponent na stránkách nebo zobrazeních

Následující doprovodné materiály použijte k integraci Razor komponent do stránek a zobrazení existujících Razor stránek nebo aplikace MVC s pomocným nástrojem pro značky komponent.

Při použití předběžného vykreslování serveru a vykreslení stránky nebo zobrazení:

  • Komponenta je předem vytyčována stránkou nebo zobrazením.
  • Počáteční stav součásti použitý pro předkreslování je ztracen.
  • Při navázání připojení se vytvoří SignalR nový stav komponenty.

Další informace o režimech vykreslování, včetně neinteraktivního vykreslování statických komponent, najdete v nápovědě značky komponenty v ASP.NET Core. Chcete-li uložit stav předseklovaných Razor komponent, přečtěte si téma Zachování pomocné rutiny značky stavu komponenty v ASP.NET Core.

Components Přidejte složku do kořenové složky projektu.

Přidejte do Components složky import soubor s následujícím obsahem. {APP NAMESPACE} Změňte zástupný symbol na obor názvů projektu.

Components/_Imports.razor:

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

V souboru rozložení projektu (Pages/Shared/_Layout.cshtml v Razor aplikacích Pages nebo Views/Shared/_Layout.cshtml v aplikacích MVC):

  • Přidejte do značky následující <base> značku a pomocné rutinyHeadOutlet<head> značky komponent:

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

    Hodnota href (základní cesta aplikace) v předchozím příkladu předpokládá, že se aplikace nachází v kořenové cestě URL (/). Pokud je aplikace dílčí aplikací, postupujte podle pokynů v části Základní cesta aplikace v článku Hostitel a nasaďte ASP.NET CoreBlazor.

    Tato komponenta HeadOutlet slouží k vykreslení obsahu hlavy (<head>) pro názvy stránek (PageTitle součást) a další hlavní prvky (HeadContent komponenta) nastavené komponentami Razor . Další informace najdete v tématu Řízení hlavního obsahu v aplikacích ASP.NET CoreBlazor.

  • <script> Přidejte značku blazor.web.js skriptu bezprostředně před Scripts oddíl vykreslení (@await RenderSectionAsync(...)):

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

    Do aplikace nemusíte ručně přidávat blazor.web.js skript, protože architektura Blazor do aplikace přidává blazor.web.js skript.

Poznámka:

Rozložení se obvykle načte prostřednictvím _ViewStart.cshtml souboru.

Přidejte do projektu neoperativně (no-op) App komponentu.

Components/App.razor:

@* No-op App component *@

Pokud jsou služby zaregistrované, přidejte služby pro Razor komponenty a služby, které podporují vykreslování komponent Interactive Serveru.

V horní části Program souboru přidejte using do horní části souboru příkaz pro komponenty projektu:

using {APP NAMESPACE}.Components;

Na předchozím řádku změňte {APP NAMESPACE} zástupný symbol na obor názvů aplikace. Příklad:

using BlazorSample.Components;

Program V souboru před řádkem, který sestaví aplikaci (builder.Build()):

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

Další informace o přidání podpory pro součásti Interactive Server a WebAssembly najdete v tématu ASP.NET Režimy vykreslování CoreBlazor.

Program V souboru bezprostředně po volání mapových Razor stránek (MapRazorPages) v Razor aplikaci Pages nebo namapování výchozí trasy kontroleru (MapControllerRoute) v aplikaci MVC, voláním MapRazorComponents zjišťování dostupných komponent a určením kořenové komponenty aplikace (první načtená komponenta). Ve výchozím nastavení je kořenová komponenta aplikace komponentou App (App.razor). Zřetězte volání pro AddInteractiveInteractiveServerRenderMode konfiguraci interaktivního vykreslování na straně serveru (interaktivní SSR) pro aplikaci:

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

Poznámka:

Pokud aplikace ještě nebyla aktualizována tak, aby zahrnovala Middleware Antiforgery, přidejte následující řádek po UseAuthorization zavolání:

app.UseAntiforgery();

Integrujte komponenty do libovolné stránky nebo zobrazení. Například přidejte komponentu EmbeddedCounter do složky projektu Components .

Components/EmbeddedCounter.razor:

<h1>Embedded Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

Razor Stránky:

Na stránce Razor projektu Index aplikace Pages přidejte EmbeddedCounter obor názvů komponenty a vložte ji do stránky. Když se Index stránka načte, komponenta EmbeddedCounter je na stránce předem vyřazována. V následujícím příkladu nahraďte {APP NAMESPACE} zástupný symbol oborem názvů projektu.

Pages/Index.cshtml:

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

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

MVC:

V zobrazení projektu Index aplikace MVC přidejte EmbeddedCounter obor názvů komponenty a vložte ji do zobrazení. Když se Index zobrazení načte, komponenta EmbeddedCounter je na stránce předem vyřazována. V následujícím příkladu nahraďte {APP NAMESPACE} zástupný symbol oborem názvů projektu.

Views/Home/Index.cshtml:

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

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

Použití směrovatelných komponent

Následující doprovodné materiály použijte k integraci směrovatelných Razor komponent do existující Razor aplikace Pages nebo MVC.

Pokyny v této části předpokládají:

  • Název aplikace je Blazor Sample.
  • Obor názvů aplikace je BlazorSample.

Podpora směrovatelných Razor komponent:

Components Přidejte složku do kořenové složky projektu.

Přidejte do Components složky import soubor s následujícím obsahem.

Components/_Imports.razor:

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

{APP NAMESPACE} Změňte zástupný symbol na obor názvů projektu. Příklad:

@using BlazorSample
@using BlazorSample.Components

Layout Přidejte do Components složky složku.

Do složky přidejte komponentu zápatí a šablonu Layout stylů.

Components/Layout/Footer.razor:

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

V předchozím kódu nastavte {APP TITLE} zástupný symbol na název aplikace. Příklad:

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

Components/Layout/Footer.razor.css:

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

Přidejte do složky komponentu Layout navigační nabídky.

Components/Layout/NavMenu.razor:

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

V předchozím kódu nastavte {APP TITLE} zástupný symbol na název aplikace. Příklad:

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

Components/Layout/NavMenu.razor.css:

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

a {
    color: #0077cc;
}

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

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

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

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

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

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

Přidejte do Layout složky součást hlavního rozložení a šablonu stylů.

Components/Layout/MainLayout.razor:

@inherits LayoutComponentBase

<header>
    <NavMenu />
</header>

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

<Footer />

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

Components/Layout/MainLayout.razor.css:

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

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

Přidejte do Components složky komponentu Routes s následujícím obsahem.

Components/Routes.razor:

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

Přidejte do Components složky komponentu App s následujícím obsahem.

Components/App.razor:

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

V předchozím kódu aktualizujte název aplikace a název souboru šablony stylů:

  • U zástupného {APP TITLE} symbolu v elementu <title> nastavte název aplikace. Příklad:

    <title>Blazor Sample</title>

  • {APP NAMESPACE} Pro zástupný symbol v elementu stylesheet <link> nastavte obor názvů aplikace. Příklad:

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

Pokud jsou služby zaregistrované, přidejte služby pro Razor komponenty a služby, které podporují vykreslování komponent Interactive Serveru.

V horní části Program souboru přidejte using do horní části souboru příkaz pro komponenty projektu:

using {APP NAMESPACE}.Components;

Na předchozím řádku změňte {APP NAMESPACE} zástupný symbol na obor názvů aplikace. Příklad:

using BlazorSample.Components;

Program V souboru před řádkem, který sestaví aplikaci (builder.Build()):

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

Další informace o přidání podpory pro součásti Interactive Server a WebAssembly najdete v tématu ASP.NET Režimy vykreslování CoreBlazor.

Program V souboru bezprostředně po volání mapových Razor stránek (MapRazorPages), volání MapRazorComponents zjistit dostupné komponenty a určit kořenovou komponentu aplikace. Ve výchozím nastavení je kořenová komponenta aplikace komponentou App (App.razor). Zřetězte volání pro AddInteractiveServerRenderMode konfiguraci interaktivního vykreslování na straně serveru (interaktivní SSR) pro aplikaci:

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

Poznámka:

Pokud aplikace ještě nebyla aktualizována tak, aby zahrnovala Middleware Antiforgery, přidejte následující řádek po UseAuthorization zavolání:

app.UseAntiforgery();

Ve složce vytvořte Pages složku Components pro směrovatelné komponenty. Následující příklad je komponenta Counter založená na Counter komponentě Blazor v šablonách projektu.

Components/Pages/Counter.razor:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

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

Spusťte projekt a přejděte na směrovatelnou Counter komponentu na adrese /counter.

Další informace ooborechch

RazorComponentResult Vrácení akce kontroleru MVC

Akce kontroleru MVC může vrátit komponentu s RazorComponentResult<TComponent>.

Components/Welcome.razor:

<PageTitle>Welcome!</PageTitle>

<h1>Welcome!</h1>

<p>@Message</p>

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

V kontroleru:

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

Vrátí se pouze kód HTML pro vykreslovanou komponentu. Rozložení a značky stránky HTML nejsou automaticky vykresleny komponentou. Aby se vytvořila úplná stránka HTML, může aplikace udržovat Blazor rozložení, které poskytuje kód HTML pro <html>, <body><head>a další značky. Komponenta obsahuje rozložení se direktivou @layoutRazor v horní části definičního souboru komponenty, Welcome.razor například v této části. Následující příklad předpokládá, že aplikace má rozložení s názvem RazorComponentResultLayout (Components/Layout/RazorComponentResultLayout.razor):

@using BlazorSample.Components.Layout
@layout RazorComponentResultLayout

Příkaz pro Layout složku můžete umístit @using do jednotlivých komponent tak, že ho přesunete do souboru aplikace_Imports.razor.

Další informace najdete v tématu ASP.NET rozložení jádraBlazor.

Obory názvů komponent

Při použití vlastní složky k uložení součástí projektu Razor přidejte obor názvů představující složku do stránky nebo zobrazení nebo do _ViewImports.cshtml souboru. V následujícím příkladu:

  • Komponenty jsou uloženy ve Components složce projektu.
  • Zástupný {APP NAMESPACE} symbol je obor názvů projektu. Components představuje název složky.
@using {APP NAMESPACE}.Components

Příklad:

@using BlazorSample.Components

Soubor _ViewImports.cshtml se nachází ve Pages složce Razor aplikace Pages nebo Views ve složce aplikace MVC.

Další informace najdete v tématu ASP.NET základní Razor komponenty.

Další materiály

Prerender ASP.NET Core Razor components