Share via

Integrowanie składników ASP.NET Core Razor z aplikacjami platformy ASP.NET Core

  • Artykuł

W tym artykule opisano Razor scenariusze integracji składników dla aplikacji ASP.NET Core.

Razor integracja składników

Razor składniki można zintegrować ze Razor stronami, MVC i innymi typami aplikacji ASP.NET Core. Razor Składniki można również zintegrować z dowolną aplikacją internetową, w tym aplikacje nie oparte na ASP.NET Core jako niestandardowe elementy HTML.

Skorzystaj ze wskazówek w poniższych sekcjach w zależności od wymagań projektu:

  • Blazor obsługę można dodać do aplikacji ASP.NET Core.
  • W przypadku składników interaktywnych, które nie są bezpośrednio routingowe z żądań użytkowników, zobacz sekcję Używanie składników niezwiązanych z routingiem na stronach lub widokach . Postępuj zgodnie z poniższymi wskazówkami, gdy aplikacja osadza składniki na istniejących stronach i widokach za pomocą pomocnika tagów składników.
  • W przypadku składników interakcyjnych, które są bezpośrednio routingowe z żądań użytkownika, zobacz sekcję Używanie składników routingu. Postępuj zgodnie z poniższymi wskazówkami, gdy odwiedzający powinni mieć możliwość wysłania żądania HTTP w przeglądarce dla składnika z dyrektywą @page .

Dodawanie Blazor obsługi do aplikacji ASP.NET Core

W tej sekcji opisano dodawanie Blazor obsługi do aplikacji ASP.NET Core:

Uwaga

W przykładach w tej sekcji nazwa przykładowej aplikacji i przestrzeń nazw to BlazorSample.

Dodawanie statycznego renderowania po stronie serwera (statyczne SSR)

Components Dodaj folder do aplikacji.

Dodaj następujący _Imports plik dla przestrzeni nazw używanych przez Razor składniki.

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

Zmień symbol zastępczy przestrzeni nazw ({APP NAMESPACE}) na przestrzeń nazw aplikacji. Na przykład:

@using BlazorSample
@using BlazorSample.Components

Blazor Dodaj router (<Router>, Router) do aplikacji w składnikuRoutes, który znajduje się w folderze aplikacjiComponents.

Components/Routes.razor:

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

Możesz podać domyślny układ z RouteView.DefaultLayout parametrem RouteView składnika:

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

Aby uzyskać więcej informacji, zobacz ASP.NET Układy podstawoweBlazor.

App Dodaj składnik do aplikacji, który służy jako składnik główny, który jest pierwszym składnikiem ładowanym przez aplikację.

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> W przypadku elementu w poprzednim przykładzie zmień BlazorSample nazwę pliku arkusza stylów, aby był zgodny z nazwą projektu aplikacji. Na przykład projekt o nazwie ContosoApp używa ContosoApp.styles.css nazwy pliku arkusza stylów:

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

Pages Dodaj folder do folderu w Components celu przechowywania składników routinguRazor.

Dodaj następujący Welcome składnik, aby zademonstrować statyczny przewodnik 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!";
}

W pliku projektu Program ASP.NET Core:

  • Dodaj instrukcję using na początku pliku dla składników projektu:

    using {APP NAMESPACE}.Components;

    W poprzednim wierszu zmień {APP NAMESPACE} symbol zastępczy na przestrzeń nazw aplikacji. Na przykład:

    using BlazorSample.Components;

  • Dodaj Razor usługi składników (AddRazorComponents), które również automatycznie dodaje usługi ochrony przed fałszerzami (AddAntiforgery). Dodaj następujący wiersz przed wierszem wywołującym builder.Build()polecenie ):

    builder.Services.AddRazorComponents();

  • Dodaj oprogramowanie pośredniczące antiforgery do potoku przetwarzania żądań za pomocą polecenia UseAntiforgery. UseAntiforgery jest wywoływana po wywołaniu metody UseRouting. Jeśli istnieją połączenia do UseRouting i UseEndpoints, wywołanie UseAntiforgery musi przejść między nimi. Wywołanie UseAntiforgery musi zostać umieszczone po wywołaniach do UseAuthentication i UseAuthorization.

    app.UseAntiforgery();

  • Dodaj MapRazorComponents do potoku przetwarzania żądań aplikacji za pomocą App składnika (App.razor) określonego jako domyślny składnik główny (pierwszy załadowany składnik). Umieść następujący kod przed wierszem, który wywołuje polecenie app.Run:

    app.MapRazorComponents<App>();

Po uruchomieniu Welcome aplikacji składnik jest dostępny w punkcie /welcome końcowym.

Włączanie interaktywnego renderowania po stronie serwera (interakcyjne SSR)

Postępuj zgodnie ze wskazówkami w sekcji Dodawanie renderowania po stronie serwera statycznego (statyczny przewodnik SSR).

W pliku aplikacji Program dodaj wywołanie AddInteractiveServerComponentsRazor miejsca dodawania usług składników za pomocą polecenia AddRazorComponents:

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

Dodaj wywołanie metody , do AddInteractiveServerRenderMode której Razor składniki są mapowane za pomocą MapRazorComponentspolecenia :

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

Dodaj następujący Counter składnik do aplikacji, która przyjmuje interakcyjne renderowanie po stronie serwera (interakcyjne 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++;
    }
}

Po uruchomieniu Counter aplikacji składnik jest dostępny pod adresem /counter.

Włączanie interakcyjnego automatycznego renderowania (auto) lub renderowania po stronie klienta (CSR)

Postępuj zgodnie ze wskazówkami w sekcji Dodawanie renderowania po stronie serwera statycznego (statyczny przewodnik SSR).

Składniki korzystające z trybu renderowania interakcyjnego są początkowo używane interakcyjne usługi SSR. Środowisko uruchomieniowe platformy .NET i pakiet aplikacji są pobierane do klienta w tle i buforowane, aby można było ich używać podczas przyszłych wizyt. Składniki korzystające z interaktywnego trybu renderowania zestawu WebAssembly są renderowane interaktywnie tylko na kliencie po Blazor pobraniu pakietu i Blazor aktywowaniu środowiska uruchomieniowego. Należy pamiętać, że w przypadku korzystania z trybów renderowania Interactive Auto lub Interactive WebAssembly kod składnika pobrany do klienta nie jest prywatny. Aby uzyskać więcej informacji, zobacz tryby renderowania ASP.NET CoreBlazor.

Po podjęciu decyzji, który tryb renderowania ma być adoptowany:

Dodaj odwołanie do Microsoft.AspNetCore.Components.WebAssembly.Server pakietu NuGet do aplikacji.

Uwaga

Aby uzyskać instrukcje dodawania pakietów do aplikacji .NET, zobacz artykuły w sekcji Instalowanie pakietów i zarządzanie nimi w temacie Przepływ pracy użycia pakietów (dokumentacja programu NuGet). Sprawdź prawidłowe wersje pakietów pod adresem NuGet.org.

Utwórz aplikację internetową dawcy Blazor , aby udostępnić zasoby aplikacji. Postępuj zgodnie ze wskazówkami w artykule Tooling for ASP.NET Core (Narzędzia dla platformy ASP.NET Core Blazor ), wybierając obsługę następujących funkcji szablonu podczas generowania Blazor aplikacji internetowej.

Jako nazwę aplikacji użyj tej samej nazwy co aplikacja ASP.NET Core, co powoduje dopasowanie znaczników nazwy aplikacji w składnikach i pasujących przestrzeni nazw w kodzie. Używanie tej samej nazwy/przestrzeni nazw nie jest ściśle wymagane, ponieważ przestrzenie nazw można dostosować po przeniesieniu zasobów z aplikacji darczyńców do aplikacji ASP.NET Core. Jednak czas jest zapisywany przez dopasowanie przestrzeni nazw na początku.

Visual Studio:

  • W obszarze Tryb renderowania interakcyjnego wybierz pozycję Auto (serwer i zestaw WebAssembly).
  • Ustaw lokalizację interakcyjności na wartość Na stronę/składnik.
  • Usuń zaznaczenie pola wyboru dla opcji Dołącz przykładowe strony.

Interfejs wiersza polecenia platformy .NET:

  • -int Auto Użyj opcji .
  • Nie używaj -ai|--all-interactive opcji .
  • -e|--empty Przekaż opcję.

Z poziomu aplikacji internetowej darczyńcy Blazor skopiuj cały .Client projekt do folderu rozwiązania aplikacji ASP.NET Core.

Ważne

Nie kopiuj .Client folderu do folderu projektu ASP.NET Core. Najlepszym podejściem do organizowania rozwiązań .NET jest umieszczenie każdego projektu rozwiązania we własnym folderze w folderze rozwiązania najwyższego poziomu. Jeśli folder rozwiązania powyżej folderu projektu ASP.NET Core nie istnieje, utwórz folder. Następnie skopiuj .Client folder projektu z aplikacji internetowej darczyńcy Blazor do folderu rozwiązania. Ostateczna struktura folderów projektu powinna mieć następujący układ:

  • BlazorSampleSolution (folder rozwiązania najwyższego poziomu)
    • BlazorSample (oryginalny projekt ASP.NET Core)
    • BlazorSample.Client (.Client folder projektu z aplikacji internetowej darczyńcy Blazor )

W przypadku pliku rozwiązania ASP.NET Core można pozostawić go w folderze projektu ASP.NET Core. Alternatywnie można przenieść plik rozwiązania lub utworzyć nowy w folderze rozwiązania najwyższego poziomu, o ile odwołanie do projektu poprawnie wskazuje pliki projektu (.csproj) dwóch projektów w folderze rozwiązania.

Jeśli podczas tworzenia projektu darczyńców nazwano aplikację internetową dawcy Blazor taką samą jak aplikacja ASP.NET Core, przestrzenie nazw używane przez przekazane zasoby pasują do tych w aplikacji ASP.NET Core. Nie należy podejmować dalszych kroków w celu dopasowania przestrzeni nazw. Jeśli podczas tworzenia projektu aplikacji internetowej dawcy Blazor użyto innej przestrzeni nazw, musisz dostosować przestrzenie nazw między przekazanymi elementami zawartości, aby były zgodne, jeśli zamierzasz użyć pozostałych wskazówek dokładnie tak, jak przedstawiono. Jeśli przestrzenie nazw nie są zgodne, dostosuj przestrzenie nazw przed kontynuowaniem lub dostosuj przestrzenie nazw zgodnie z pozostałymi wskazówkami w tej sekcji.

Usuń aplikację internetową dawcy Blazor , ponieważ nie jest ona używana w tym procesie.

.Client Dodaj projekt do rozwiązania:

  • Visual Studio: kliknij rozwiązanie prawym przyciskiem myszy w Eksplorator rozwiązań i wybierz polecenie Dodaj>istniejący projekt. Przejdź do .Client folderu i wybierz plik projektu (.csproj).

  • Interfejs wiersza polecenia platformy .NET: użyj dotnet sln add polecenia , aby dodać .Client projekt do rozwiązania.

Dodaj odwołanie do projektu ASP.NET Core do projektu klienta:

  • Visual Studio: kliknij prawym przyciskiem myszy projekt ASP.NET Core i wybierz polecenie Dodaj>odwołanie do projektu. .Client Wybierz projekt i wybierz przycisk OK.

  • Interfejs wiersza polecenia platformy .NET: Z folderu projektu ASP.NET Core użyj następującego polecenia:

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

    Poprzednie polecenie zakłada następujące założenia:

    • Nazwa pliku projektu to BlazorSample.Client.csproj.
    • Projekt .Client znajduje się w BlazorSample.Client folderze wewnątrz folderu rozwiązania. Folder .Client znajduje się obok folderu projektu ASP.NET Core.

    Aby uzyskać więcej informacji na dotnet add reference temat polecenia, zobacz dotnet add reference (dokumentacja platformy .NET).

Wprowadź następujące zmiany w pliku aplikacji Program ASP.NET Core:

  • Dodaj interakcyjne usługi składników WebAssembly z usługami AddInteractiveWebAssemblyComponents składników, w których Razor są dodawane usługi składników za pomocą polecenia AddRazorComponents.

    W przypadku interakcyjnego automatycznego renderowania:

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

    Tylko w przypadku renderowania interakcyjnego zestawu WebAssembly:

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

  • Dodaj tryb renderowania Interactive WebAssembly (AddInteractiveWebAssemblyRenderMode) i dodatkowe zestawy dla .Client projektu, w którym Razor składniki są mapowane za pomocą MapRazorComponentspolecenia .

    W przypadku interaktywnego renderowania automatycznego (automatycznego):

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

    Tylko w przypadku renderowania interakcyjnego zestawu WebAssembly:

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

    W poprzednich przykładach zmień wartość BlazorSample.Client tak, aby odpowiadała .Client przestrzeni nazw projektu.

Pages Dodaj folder do .Client projektu.

Jeśli projekt ASP.NET Core ma istniejący Counter składnik:

  • Przenieś składnik do Pages folderu .Client projektu.
  • Usuń dyrektywę @rendermode w górnej części pliku składnika.

Jeśli aplikacja ASP.NET Core nie ma Counter składnika, dodaj następujący Counter składnik (Pages/Counter.razor) do .Client projektu:

@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++;
    }
}

Jeśli aplikacja przyjmuje renderowanie interaktywnego zestawu WebAssembly, usuń dyrektywę @rendermode i wartość:

- @rendermode InteractiveAuto

Uruchom rozwiązanie z projektu aplikacji ASP.NET Core:

  • Visual Studio: upewnij się, że projekt ASP.NET Core został wybrany w Eksplorator rozwiązań podczas uruchamiania aplikacji.

  • Interfejs wiersza polecenia platformy .NET: uruchom projekt z folderu projektu ASP.NET Core.

Aby załadować Counter składnik, przejdź do /counteradresu .

Używanie składników niezwiązanych z routingem na stronach lub widokach

Skorzystaj z poniższych wskazówek, aby zintegrować Razor składniki ze stronami i widokami istniejącej Razor aplikacji Pages lub MVC za pomocą pomocnika tagów składników.

W przypadku użycia prerenderingu serwera i renderowania strony lub widoku:

  • Składnik jest wstępnie wypełniony stroną lub widokiem.
  • Utracono początkowy stan składnika używany do prerenderingu.
  • Nowy stan składnika jest tworzony podczas nawiązywania SignalR połączenia.

Aby uzyskać więcej informacji na temat trybów renderowania, w tym renderowania nieinterakcyjnych składników statycznych, zobacz Pomocnik tagów składników w programie ASP.NET Core. Aby zapisać stan wstępnie wstępnie zainstalowanych Razor składników, zobacz Utrwalanie pomocnika tagu stanu składnika w programie ASP.NET Core.

Components Dodaj folder do folderu głównego projektu.

Dodaj plik importowania do Components folderu z następującą zawartością. {APP NAMESPACE} Zmień symbol zastępczy na przestrzeń nazw 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

W pliku układu projektu (Pages/Shared/_Layout.cshtml w Razor aplikacjach Pages lub Views/Shared/_Layout.cshtml w aplikacjach MVC):

  • Dodaj następujący <base> tag i Pomocnik tagów składników dla HeadOutlet składnika do <head> znaczników:

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

    Wartość href ( ścieżka podstawowa aplikacji) w poprzednim przykładzie zakłada, że aplikacja znajduje się w głównej ścieżce adresu URL (/). Jeśli aplikacja jest aplikacją podrzędną, postępuj zgodnie ze wskazówkami w sekcji Ścieżka podstawowa aplikacji w artykule Host i wdróż ASP.NET CoreBlazor.

    Składnik jest używany do renderowania HeadOutlet zawartości nagłówka () dla tytułów stron (<head>PageTitleskładnik) i innych elementów głównych (HeadContentskładnik) ustawionych przez Razor składniki. Aby uzyskać więcej informacji, zobacz Control head content in ASP.NET Core apps (Kontrolowanie zawartości głównej w aplikacjach platformy ASP.NET CoreBlazor).

  • <script> Dodaj tag skryptu blazor.web.js bezpośrednio przed sekcją renderowania Scripts (@await RenderSectionAsync(...)):

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

    Nie ma potrzeby ręcznego blazor.web.js dodawania skryptu do aplikacji, ponieważ Blazor struktura dodaje blazor.web.js skrypt do aplikacji.

Uwaga

Zazwyczaj układ jest ładowany za pośrednictwem _ViewStart.cshtml pliku.

Dodaj do projektu składnik nieoperacyjny (bez operacji App ).

Components/App.razor:

@* No-op App component *@

W przypadku zarejestrowania usług dodaj usługi dla składników i usług, Razor aby obsługiwać renderowanie składników programu Interactive Server.

W górnej Program części pliku dodaj instrukcję using na początku pliku dla składników projektu:

using {APP NAMESPACE}.Components;

W poprzednim wierszu zmień {APP NAMESPACE} symbol zastępczy na przestrzeń nazw aplikacji. Na przykład:

using BlazorSample.Components;

Program W pliku przed wierszem, który kompiluje aplikację (builder.Build()):

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

Aby uzyskać więcej informacji na temat dodawania obsługi składników Interactive Server i WebAssembly, zobacz tryby renderowania ASP.NET CoreBlazor.

Program W pliku bezpośrednio po wywołaniu mapowania Razor stron (MapRazorPages) w Razor aplikacji Pages lub mapowania domyślnej trasy kontrolera () w aplikacji MVC wywołaj metodę MapRazorComponents odnajdywania dostępnych składników i określ składnik główny aplikacji (MapControllerRoutepierwszy załadowany składnik). Domyślnie główny składnik aplikacji jest składnikiem App (App.razor). Połącz wywołanie w celu AddInteractiveInteractiveServerRenderMode skonfigurowania interaktywnego renderowania po stronie serwera (interakcyjnego odzyskiwania po stronie serwera) dla aplikacji:

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

Uwaga

Jeśli aplikacja nie została jeszcze zaktualizowana, aby uwzględnić oprogramowanie pośredniczące antyforgery, dodaj następujący wiersz po UseAuthorization wywołaniu:

app.UseAntiforgery();

Integrowanie składników z dowolną stroną lub widokiem. Na przykład dodaj EmbeddedCounter składnik do folderu 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 Strony:

Na stronie Razor projektu Index aplikacji Pages dodaj EmbeddedCounter przestrzeń nazw składnika i osadź składnik na stronie. Po załadowaniu IndexEmbeddedCounter strony składnik jest wstępnie zainstalowany na stronie. W poniższym przykładzie zastąp {APP NAMESPACE} symbol zastępczy przestrzenią nazw projektu.

Pages/Index.cshtml:

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

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

MVC:

W widoku projektu Index aplikacji MVC dodaj EmbeddedCounter przestrzeń nazw składnika i osadź składnik w widoku. Index Gdy widok zostanie załadowany, EmbeddedCounter składnik jest wstępnie zainstalowany na stronie. W poniższym przykładzie zastąp {APP NAMESPACE} symbol zastępczy przestrzenią nazw projektu.

Views/Home/Index.cshtml:

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

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

Używanie składników routingu

Skorzystaj z poniższych wskazówek, aby zintegrować składniki routingu Razor z istniejącą Razor aplikacją Pages lub MVC.

Wskazówki w tej sekcji zakładają:

  • Tytuł aplikacji to Blazor Sample.
  • Przestrzeń nazw aplikacji to BlazorSample.

Aby obsługiwać składniki routingu Razor :

Components Dodaj folder do folderu głównego projektu.

Dodaj plik importowania do Components folderu z następującą zawartością.

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} Zmień symbol zastępczy na przestrzeń nazw projektu. Na przykład:

@using BlazorSample
@using BlazorSample.Components

Layout Dodaj folder do Components folderu.

Dodaj składnik stopki i arkusz stylów do Layout folderu.

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>

W poprzednim znaczniku ustaw {APP TITLE} symbol zastępczy na tytuł aplikacji. Na przykład:

&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;
}

Dodaj składnik menu nawigacji do Layout folderu.

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>

W poprzednim znaczniku ustaw {APP TITLE} symbol zastępczy na tytuł aplikacji. Na przykład:

<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;
}

Dodaj do folderu główny składnik układu i arkusz Layout stylów.

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;
    }

Routes Dodaj składnik do Components folderu z następującą zawartością.

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>

App Dodaj składnik do Components folderu z następującą zawartością.

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>

W poprzednim kodzie zaktualizuj tytuł aplikacji i nazwę pliku arkusza stylów:

  • Dla symbolu {APP TITLE} zastępczego w elemecie <title> ustaw tytuł aplikacji. Na przykład:

    <title>Blazor Sample</title>

  • Dla symbolu {APP NAMESPACE} zastępczego w elemecie arkusza <link> stylów ustaw przestrzeń nazw aplikacji. Na przykład:

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

W przypadku zarejestrowania usług dodaj usługi dla składników i usług, Razor aby obsługiwać renderowanie składników programu Interactive Server.

W górnej Program części pliku dodaj instrukcję using na początku pliku dla składników projektu:

using {APP NAMESPACE}.Components;

W poprzednim wierszu zmień {APP NAMESPACE} symbol zastępczy na przestrzeń nazw aplikacji. Na przykład:

using BlazorSample.Components;

Program W pliku przed wierszem, który kompiluje aplikację (builder.Build()):

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

Aby uzyskać więcej informacji na temat dodawania obsługi składników Interactive Server i WebAssembly, zobacz tryby renderowania ASP.NET CoreBlazor.

W pliku bezpośrednio po wywołaniu Program funkcji mapowania Razor stron (MapRazorPages) wywołaj metodę MapRazorComponents odnajdywania dostępnych składników i określ składnik główny aplikacji. Domyślnie główny składnik aplikacji jest składnikiem App (App.razor). Połącz wywołanie w celu AddInteractiveServerRenderMode skonfigurowania interaktywnego renderowania po stronie serwera (interakcyjnego odzyskiwania po stronie serwera) dla aplikacji:

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

Uwaga

Jeśli aplikacja nie została jeszcze zaktualizowana, aby uwzględnić oprogramowanie pośredniczące antyforgery, dodaj następujący wiersz po UseAuthorization wywołaniu:

app.UseAntiforgery();

Pages Utwórz folder w folderze Components dla składników routingu. Poniższy przykład jest składnikiem opartym Counter na składniku CounterBlazor w szablonach 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++;
    }
}

Uruchom projekt i przejdź do składnika routable Counter pod adresem /counter.

Aby uzyskać więcej informacji na temat przestrzeni nazw, zobacz sekcję Przestrzenie nazw składników .

Zwracanie RazorComponentResult akcji kontrolera MVC

Akcja kontrolera MVC może zwrócić składnik za pomocą RazorComponentResult<TComponent>polecenia .

Components/Welcome.razor:

<PageTitle>Welcome!</PageTitle>

<h1>Welcome!</h1>

<p>@Message</p>

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

W kontrolerze:

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

Zwracany jest tylko znacznik HTML dla renderowanego składnika. Układy i znaczniki stron HTML nie są automatycznie renderowane za pomocą składnika. Aby utworzyć pełną stronę HTML, aplikacja może obsługiwać Blazor układ , który udostępnia znaczniki HTML dla <html>, <head>, <body>i innych tagów. Składnik zawiera układ z dyrektywą @layoutRazor w górnej części pliku definicji składnika, Welcome.razor na przykład w tej sekcji. W poniższym przykładzie przyjęto założenie, że aplikacja ma układ o nazwie RazorComponentResultLayout (Components/Layout/RazorComponentResultLayout.razor):

@using BlazorSample.Components.Layout
@layout RazorComponentResultLayout

Można uniknąć umieszczania instrukcji @using dla Layout folderu w poszczególnych składnikach, przenosząc ją do pliku aplikacji _Imports.razor .

Aby uzyskać więcej informacji, zobacz ASP.NET Układy podstawoweBlazor.

Przestrzenie nazw składników

W przypadku przechowywania składników projektu Razor przy użyciu folderu niestandardowego dodaj przestrzeń nazw reprezentującą folder do strony/widoku lub do _ViewImports.cshtml pliku. W poniższym przykładzie:

  • Składniki są przechowywane w Components folderze projektu.
  • Symbol {APP NAMESPACE} zastępczy to przestrzeń nazw projektu. Components reprezentuje nazwę folderu.
@using {APP NAMESPACE}.Components

Na przykład:

@using BlazorSample.Components

Plik _ViewImports.cshtml znajduje się w Pages folderze Razor aplikacji Pages lub Views folderze aplikacji MVC.

Aby uzyskać więcej informacji, zobacz ASP.NET Podstawowe Razor składniki.

Dodatkowe zasoby

Składniki prerender ASP.NET Core Razor