Udostępnij za pośrednictwem

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ń aplikacji:

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 lub widokami istniejącej Razor aplikacji Pages lub MVC za pomocą pomocnika tagów składników.

Uwaga

Jeśli aplikacja wymaga składników bezpośrednio routingu (nie osadzonych na stronach lub widokach), pomiń tę sekcję i skorzystaj ze wskazówek w sekcji Dodawanie Blazor obsługi do aplikacji ASP.NET Core.

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>

    Platforma Blazor automatycznie 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 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();

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 Index EmbeddedCounter 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" />

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>

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="@Assets["{ASSEMBLY NAME}.styles.css"]" />
    <HeadOutlet />
</head>

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

</html>

<!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="{ASSEMBLY NAME}.styles.css" />
    <HeadOutlet />
</head>

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

</html>

Symbol {ASSEMBLY NAME} zastępczy to nazwa zestawu aplikacji. Na przykład projekt o nazwie ContosoApp zestawu używa ContosoApp.styles.css nazwy pliku arkusza stylów.

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 AddInteractiveServerComponents Razor 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 darczyńcę Blazor Web App , 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 elementu Blazor Web App.

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 darczyńcy Blazor Web Appskopiuj 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 darczyńcy Blazor Web App 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 od darczyńcy Blazor Web App)

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 darczyńca został nazwany podczas tworzenia projektu dawcy Blazor Web App tak samo jak aplikacja ASP.NET Core, przestrzenie nazw używane przez przekazane zasoby są zgodne z tymi w aplikacji ASP.NET Core. Nie należy podejmować dalszych kroków w celu dopasowania przestrzeni nazw. Jeśli podczas tworzenia projektu darczyńców Blazor Web App użyto innej przestrzeni nazw, musisz dostosować przestrzenie nazw między przekazanymi elementami zawartości, aby były zgodne, jeśli zamierzasz używać rest tych 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ń dawcę Blazor Web App, ponieważ nie ma on dalszego użycia 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 .

Implementowanie Blazorukładu i stylów

Opcjonalnie przypisz domyślny składnik układu przy użyciu RouteView.DefaultLayout parametru RouteView składnika.

W Routes.razorprogramie poniższy przykład używa MainLayout składnika jako układu domyślnego:

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

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

Blazor Układ szablonu projektu i arkusze stylów są dostępne w dotnet/aspnetcore repozytorium GitHub:

  • MainLayout.razor
  • MainLayout.razor.css
  • NavMenu.razor
  • NavMenu.razor.css

Uwaga

Linki dokumentacji do źródła referencyjnego platformy .NET zwykle ładują domyślną gałąź repozytorium, która odzwierciedla bieżące programowanie dla następnej wersji platformy .NET. Aby wybrać tag dla określonej wersji, użyj listy rozwijanej Przełącz gałęzie lub tagi. Aby uzyskać więcej informacji, zobacz Jak wybrać tag wersji kodu źródłowego platformy ASP.NET Core (dotnet/AspNetCore.Docs #26205).

W zależności od sposobu organizowania plików układu w aplikacji może być konieczne dodanie @using instrukcji dla folderu plików układu w pliku aplikacji, aby wyświetlić je do użycia w składnikach aplikacji _Imports.razor .

Nie ma potrzeby jawnego odwołowania się do arkuszy stylów podczas korzystania z izolacji CSS. Struktura Blazor automatycznie dołącza poszczególne arkusze stylów składników. Dołączony arkusz stylów aplikacji jest już przywołyny w składniku aplikacji App ({ASSEMBLY NAME}.styles.cssgdzie {ASSEMBLY NAME} symbol zastępczy to nazwa zestawu aplikacji).

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() => 
    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