Integrace komponent ASP.NET Core Razor do aplikací ASP.NET Core
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:
- Blazor podporu je možné přidat do aplikace ASP.NET Core.
- Interaktivní komponenty, které nejsou přímo směrovatelné z uživatelských požadavků, najdete v části Použití nesměrovatelných komponent na stránkách nebo zobrazeních . Při vkládání komponent do existujících stránek a zobrazení pomocí pomocné rutiny značek komponent postupujte podle těchto pokynů.
- Interaktivní komponenty, které jsou přímo směrovatelné z uživatelských požadavků, najdete v části Použití směrovatelných komponent . Postupujte podle těchto pokynů, když by návštěvníci měli být schopni vytvořit požadavek HTTP v prohlížeči pro komponentu s direktivou
@page
.
Přidání Blazor podpory do aplikace ASP.NET Core
Tato část popisuje přidání Blazor podpory do aplikace ASP.NET Core:
- Přidání statického vykreslování na straně serveru (statická SSR)
- Povolení interaktivního vykreslování na straně serveru (interaktivní SSR)
- Povolení interaktivního automatického (automatického) nebo klientského vykreslování (CSR)
Poznámka:
V příkladech v této části je BlazorSample
ná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:
- Pokud plánujete přejít do režimu interaktivního automatického vykreslování, postupujte podle pokynů v části Povolit interaktivní vykreslování na straně serveru (interaktivní SSR).
- Pokud plánujete používat pouze interaktivní vykreslování WebAssembly, pokračujte bez přidání interaktivního SSR.
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 veBlazorSample.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 najdetedotnet add reference
v dokumentaci k .NET.- Název souboru projektu je
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čkublazor.web.js
skriptu bezprostředně předScripts
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">
© 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:
© 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
.
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 @layout
Razor 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
Váš názor
https://aka.ms/ContentUserFeedback.
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu:Odeslat a zobrazit názory pro