układy ASP.NET Core Blazor

W tym artykule wyjaśniono, jak tworzyć składniki układu wielokrotnego użytku dla Blazor aplikacji.

Użyteczność układów Blazor

Niektóre elementy aplikacji, takie jak menu, komunikaty o prawach autorskich i logo firmy, są zwykle częścią ogólnej prezentacji aplikacji. Umieszczenie kopii znaczników dla tych elementów we wszystkich składnikach aplikacji nie jest wydajne. Za każdym razem, gdy jeden z tych elementów jest aktualizowany, każdy składnik używający elementu musi zostać zaktualizowany. Takie podejście jest kosztowne w utrzymaniu i może prowadzić do niespójnej zawartości, jeśli aktualizacja nie zostanie pominięta. Układy rozwiązują te problemy.

Blazor Układ jest składnikiemRazor, który udostępnia znaczniki składnikom odwołujących się do niego. Układy mogą używać powiązania danych, wstrzykiwania zależności i innych funkcji składników.

Składniki układu

Tworzenie składnika układu

Aby utworzyć składnik układu:

• Utwórz Razor składnik zdefiniowany przez Razor szablon lub kod języka C#. Składniki układu oparte na szablonie Razor używają .razor rozszerzenia pliku tak jak zwykłe Razor składniki. Ponieważ składniki układu są współdzielone przez wszystkie komponenty aplikacji, zwykle umieszcza się je w folderze Shared lub Layout aplikacji. Układy można jednak umieścić w dowolnej lokalizacji dostępnej dla składników, które go używają. Na przykład układ można umieścić w tym samym folderze co składniki, które go używają.
• Dziedzicz składnik z LayoutComponentBase. Element LayoutComponentBase definiuje właściwość Body (typu RenderFragment) dla renderowanej zawartości wewnątrz układu.
• Użyj składni Razor@Body, aby określić lokalizację w znaczniku układu, gdzie jest renderowana zawartość.

Uwaga

Aby uzyskać więcej informacji na temat RenderFragment, zobacz ASP.NET Core Razor komponenty.

DoctorWhoLayout Poniższy składnik przedstawia Razor szablon składnika układu. Układ dziedziczy LayoutComponentBase i ustawia @Body między paskiem nawigacyjnym (<nav>...</nav>) i stopką (<footer>...</footer>).

DoctorWhoLayout.razor:

@inherits LayoutComponentBase

<PageTitle>Doctor Who® Database</PageTitle>

<header>
    <h1>Doctor Who® Database</h1>
</header>

<nav>
    <a href="main-list">Main Episode List</a>
    <a href="search">Search</a>
    <a href="new">Add Episode</a>
</nav>

@Body

<footer>
    @TrademarkMessage
</footer>

@code {
    public string TrademarkMessage { get; set; } =
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/ https://www.bbc.com";
}

MainLayout komponent

W aplikacji utworzonej Blazor na podstawie szablonuMainLayout projektu składnik jest domyślnym układem aplikacji. BlazorUkład "przyjmuje specyfikację Flexbox layout model (MDN documentation)(specyfikacja W3C).

BlazorFunkcja izolacji CSS nakłada izolowane style CSS na MainLayout składnik. Zgodnie z konwencją style są dostarczane przez towarzyszący arkusz stylów o tej samej nazwie, MainLayout.razor.css. Implementację frameworku ASP.NET Core arkusza stylów można przejrzeć w źródle referencyjnym ASP.NET Core (dotnet/aspnetcore repozytorium GitHub).

• Blazor Web App MainLayout.razor.css
• Blazor WebAssembly MainLayout.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).

Zastosuj układ

Uczyń przestrzeń nazw układu dostępną

Lokalizacje plików układu i przestrzenie nazw platformy Blazor zmieniały się z biegiem czasu. W zależności od wersji Blazor i typu Blazor aplikacji, którą tworzysz, może być konieczne wskazanie przestrzeni nazw układu podczas jej używania. Gdy odwołujesz się do implementacji układu, a układu nie można znaleźć bez wskazania jego przestrzeni nazw, zastosuj jedno z następujących rozwiązań:

• Dodaj dyrektywę @using do pliku _Imports.razor w celu określenia lokalizacji układów. W poniższym przykładzie folder układów o nazwie Layout znajduje się wewnątrz Components folderu, a przestrzeń nazw aplikacji to BlazorSample:

  @using BlazorSample.Components.Layout
  

• Dodaj dyrektywę @using w górnej części definicji składnika, w której jest używany układ:

  @using BlazorSample.Components.Layout
  @layout DoctorWhoLayout
  

• W pełni kwalifikować przestrzeń nazw układu, w którym jest używana:

  @layout BlazorSample.Components.Layout.DoctorWhoLayout
  

Stosowanie układu do składnika

Użyj dyrektywy , @layoutRazor aby zastosować układ do składnika routingu Razor , który ma dyrektywę @page . Kompilator konwertuje @layout na element LayoutAttribute i stosuje atrybut do klasy składnika.

Zawartość następującego Episodes składnika jest wstawiana do DoctorWhoLayout komponentu w pozycji @Body.

Episodes.razor:

@page "/episodes"
@layout DoctorWhoLayout

<h2>Doctor Who® Episodes</h2>

<ul>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfknq">
            <em>The Ribos Operation</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vfdsb">
            <em>The Sunmakers</em>
        </a>
    </li>
    <li>
        <a href="https://www.bbc.co.uk/programmes/p00vhc26">
            <em>Nightmare of Eden</em>
        </a>
    </li>
</ul>

Poniższy wyrenderowany znacznik HTML jest generowany przez poprzednie składniki DoctorWhoLayout oraz Episodes. Adiustacja nadmiarowa nie jest wyświetlana w celu skoncentrowania się na zawartości udostępnianej przez dwa zaangażowane składniki:

• Nagłówek H1 "baza danych" (<h1>...</h1>) w sekcji nagłówka (<header>...</header>), pasek nawigacyjny (<nav>...</nav>) oraz informacje o znakach towarowych w stopce (<footer>...</footer>) pochodzą z komponentu DoctorWhoLayout.
• Nagłówek H2 "odcinki" (<h2>...</h2>) i lista odcinków (<ul>...</ul>) pochodzą z komponentu Episodes.

<header>
    <h1 ...>...</h1>
</header>

<nav>
    ...
</nav>

<h2>...</h2>

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

<footer>
    ...
</footer>

Określanie układu bezpośrednio w składniku zastępuje układ domyślny:

• Dyrektywa @layout ustawiona przez import z pliku _Imports.razor, jak opisano w poniższej sekcji Zastosuj układ do folderu składników.
• Ustaw jako domyślny układ aplikacji, zgodnie z opisem w sekcji Zastosuj układ domyślny do aplikacji w dalszej części tego artykułu.

Zastosuj układ do folderu składników

Każdy folder aplikacji może opcjonalnie zawierać plik szablonu o nazwie _Imports.razor. Kompilator zawiera dyrektywy określone w pliku importów we wszystkich Razor szablonach w tym samym folderze i rekurencyjnie we wszystkich jego podfolderach. Dlatego plik _Imports.razor zawierający @layout DoctorWhoLayout gwarantuje, że wszystkie składniki w folderze używają składnika DoctorWhoLayout. Nie ma potrzeby wielokrotnego dodawania @layout DoctorWhoLayout do wszystkich Razor składników (.razor) w folderze i podfolderach.

_Imports.razor:

@layout DoctorWhoLayout
...

Plik _Imports.razor jest podobny do pliku _ViewImports.cshtml dla Razor widoków i stron , ale zastosowany specjalnie do Razor plików składników.

Określenie układu w , jako układu, zastępuje układ określony jako domyślny układ aplikacji routera , który został opisany w poniższej sekcji.

Ostrzeżenie

Nie należy dodawać Razor@layout dyrektywy do pliku głównego_Imports.razor, co skutkuje nieskończoną pętlą układów. Aby kontrolować domyślny układ aplikacji, określ układ w składniku Router . Aby uzyskać więcej informacji, zobacz następującą sekcję Zastosuj układ domyślny do aplikacji .

Ten sam warunek występuje, gdy używa się pliku _Imports.razor do zastosowania układu do folderu składników z dyrektywą @layout, a sam składnik układu znajduje się w tej samej hierarchii folderów co plik _Imports.razor. Występuje nieskończona pętla stosowania układu, ponieważ dyrektywa @layout jest również stosowana do składnika układu. Aby uniknąć problemów z rekursją, zalecamy przechowywanie składników układu we własnym folderze (na przykład Layouts), z dala od miejsca, w którym są stosowane pliki _Imports.razor.

Uwaga

Dyrektywa @layoutRazor stosuje układ tylko do składników, do których można trasować ruch Razor i które mają dyrektywę @page.

Stosowanie domyślnego układu do aplikacji

Określ domyślny układ aplikacji w składniku Router będącym częścią RouteView. Użyj parametru , DefaultLayout aby ustawić typ układu:

<RouteView RouteData="routeData" DefaultLayout="typeof({LAYOUT})" />

W poprzednim przykładzie symbol zastępczy {LAYOUT} jest układem (na przykład DoctorWhoLayout jeśli nazwa pliku układu to DoctorWhoLayout.razor). Może być konieczne dostosowanie przestrzeni nazw układu w zależności od wersji i typu Blazor aplikacji .NET. Aby uzyskać więcej informacji, zobacz sekcję Umożliwienie dostępu do przestrzeni nazw układu.

Określenie układu jako domyślnego układu w składniku RouterRouteView jest przydatną praktyką, ponieważ można zastąpić układ dla poszczególnych składników lub poszczególnych folderów, zgodnie z opisem w poprzednich sekcjach tego artykułu. Zalecamy użycie Router składnika w celu ustawienia domyślnego układu aplikacji, ponieważ jest to najbardziej ogólne i elastyczne podejście do korzystania z układów.

Zastosuj układ do dowolnej zawartości (komponent LayoutView)

Aby ustawić układ dla dowolnej Razor zawartości szablonu, określ układ ze składnikiem LayoutView . Można użyć elementu LayoutView w dowolnym Razor składniku. Poniższy przykład ustawia składnik układu o nazwie ErrorLayout dla MainLayout szablonu składnika NotFound (<NotFound>...</NotFound>).

<Router ...>
    <Found ...>
        ...
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(ErrorLayout)">
            <h1>Page not found</h1>
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Możesz potrzebować określić przestrzeń nazw układu, w zależności od wersji platformy .NET i typu aplikacji Blazor. Aby uzyskać więcej informacji, przejrzyj sekcję Udostępnianie przestrzeni nazw układu.

Ważne

Blazor Web AppNie należy używać parametru NotFound (<NotFound>...</NotFound> adiustacji), ale parametr jest obsługiwany w celu zapewnienia zgodności z poprzednimi wersjami, aby uniknąć zmiany powodującej niezgodność w strukturze. Potok oprogramowania pośredniczącego ASP.NET Core po stronie serwera przetwarza żądania na serwerze. Użyj technik po stronie serwera do obsługi nieprawidłowych żądań. Aby uzyskać więcej informacji, zobacz sekcję tryby renderowania ASP.NET CoreBlazor.

Układy zagnieżdżone

Składnik może odwoływać się do układu, który z kolei odwołuje się do innego układu. Na przykład zagnieżdżone układy służą do tworzenia struktury wielopoziomowego menu.

W poniższym przykładzie pokazano, jak używać układów zagnieżdżonych. Składnik Episodes pokazany w sekcji Zastosuj układ do składnika jest składnikiem do wyświetlenia. Składnik odwołuje się do DoctorWhoLayout składnika.

Poniższy DoctorWhoLayout składnik jest zmodyfikowaną wersją przykładu pokazaną wcześniej w tym artykule. Elementy nagłówka i stopki są usuwane, a układ odwołuje się do innego układu: ProductionsLayout. Komponent Episodes jest renderowany tam, gdzie @Body pojawia się w składniku DoctorWhoLayout.

DoctorWhoLayout.razor:

@inherits LayoutComponentBase
@layout ProductionsLayout

<PageTitle>Doctor Who® Database</PageTitle>

<h1>Doctor Who® Database</h1>

<nav>
    <a href="main-episode-list">Main Episode List</a>
    <a href="episode-search">Search</a>
    <a href="new-episode">Add Episode</a>
</nav>

@Body

<div>
    @TrademarkMessage
</div>

@code {
    public string TrademarkMessage { get; set; } =
        "Doctor Who is a registered trademark of the BBC. " +
        "https://www.doctorwho.tv/ https://www.bbc.com";
}

Składnik ProductionsLayout zawiera elementy układu najwyższego poziomu, w których znajdują się teraz elementy nagłówka (<header>...</header>) i stopki (<footer>...</footer>). Element DoctorWhoLayout z składnikiem Episodes jest renderowany w miejscu, gdzie @Body jest wyświetlany.

ProductionsLayout.razor:

@inherits LayoutComponentBase

<header>
    <h1>Productions</h1>
</header>

<nav>
    <a href="main-production-list">Main Production List</a>
    <a href="production-search">Search</a>
    <a href="new-production">Add Production</a>
</nav>

@Body

<footer>
    Footer of Productions Layout
</footer>

Poniższy renderowany znacznik HTML jest generowany przez poprzedni zagnieżdżony układ. Adiustacja nadmiarowa nie jest wyświetlana w celu skoncentrowania się na zawartości zagnieżdżonej dostarczonej przez trzy zaangażowane składniki:

• Nagłówek (<header>...</header>), produkcyjny pasek nawigacyjny (<nav>...</nav>) i elementy stopki (<footer>...</footer>) oraz ich zawartość pochodzą ze ProductionsLayout składnika.
• Nagłówek H1 "baza danych" (<h1>...</h1>), pasek nawigacyjny odcinka (<nav>...</nav>) oraz informacje o znakach towarowych (<div>...</div>) pochodzą z komponentu DoctorWhoLayout.
• Nagłówek H2 "odcinki" (<h2>...</h2>) i lista odcinków (<ul>...</ul>) pochodzą z komponentu Episodes.

<header>
    ...
</header>

<nav>
    <a href="main-production-list">Main Production List</a>
    <a href="production-search">Search</a>
    <a href="new-production">Add Production</a>
</nav>

<h1>...</h1>

<nav>
    <a href="main-episode-list">Main Episode List</a>
    <a href="episode-search">Search</a>
    <a href="new-episode">Add Episode</a>
</nav>

<h2>...</h2>

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

<div>
    ...
</div>

<footer>
    ...
</footer>

Razor Udostępnianie układu stron ze zintegrowanymi składnikami

Gdy komponenty routowalne są zintegrowane z aplikacją Razor Pages, współużytkowany układ aplikacji może być używany z tymi komponentami. Aby uzyskać więcej informacji, zobacz Integrowanie składników ASP.NET Core Razor z MVC lub Razor Pages.

Sekcje

Aby kontrolować zawartość w układzie Razor ze składnika podrzędnego, zobacz sekcje Blazor ASP.NET Core.

Dodatkowe zasoby

• Układ w ASP.NET Core
• Blazor repozytorium GitHub z przykładami (dotnet/blazor-samples) (jak pobrać)