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ółużytkowane przez składniki aplikacji, są one zwykle umieszczane w folderze lub Layout aplikacjiShared. 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 Body Definiuje LayoutComponentBase właściwość (RenderFragment typ) dla renderowanej zawartości wewnątrz układu.
• Razor Użyj składni@Body, aby określić lokalizację w znaczniku układu, w którym jest renderowana zawartość.

Uwaga

Aby uzyskać więcej informacji na temat RenderFragmentprogramu , zobacz składniki ASP.NET CoreRazor.

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 cm6long

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 stosuje izolowane style CSS do MainLayout składnika. Zgodnie z konwencją style są dostarczane przez towarzyszący arkusz stylów o tej samej nazwie, MainLayout.razor.css. Implementacja struktury ASP.NET Core arkusza stylów jest dostępna do inspekcji w źródle referencyjnym ASP.NET Core (dotnet/aspnetcore repozytorium GitHub):

• Blazor Aplikacja internetowa 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).

Stosowanie układu

Udostępnianie przestrzeni nazw układu

Lokalizacje plików układu i przestrzenie nazw zmieniły się wraz z upływem czasu dla platformy Blazor . 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. W przypadku odwoływania się do implementacji układu i układu nie można odnaleźć bez wskazania przestrzeni nazw układu, wykonaj dowolne z następujących podejść:

• Dodaj dyrektywę @using do _Imports.razor pliku dla 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 u góry definicji składnika, w której jest używany układ:

  @using BlazorSample.Components.Layout
  @layout DoctorWhoLayout
  

• W pełni kwalifikują przestrzeń nazw układu, w którym jest używany:

  @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 elementu 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 renderowany znacznik HTML jest generowany przez poprzedni DoctorWhoLayoutEpisodes i składnik. 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" () w nagłówku (<h1>...</h1><header>...</header>), pasek nawigacyjny (<nav>...</nav>) i informacje o znakach towarowych w stopce (<footer>...</footer>) pochodzą ze DoctorWhoLayout składnika.
• Nagłówek H2 "odcinki" (<h2>...</h2>) i lista odcinków (<ul>...</ul>) pochodzą ze Episodes składnika .

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

• Ustaw dyrektywę @layout zaimportowaną z pliku zgodnie z _Imports.razor opisem 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.

Stosowanie układu 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 cyklicznie we wszystkich jego podfolderach. W związku z _Imports.razor tym plik zawierający @layout DoctorWhoLayout gwarantuje, że wszystkie składniki w folderze używają DoctorWhoLayout składnika. 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 _Imports.razor zastąpieniu układu określonego 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 powoduje 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 .

Uwaga

Dyrektywa @layoutRazor stosuje układ tylko do składników routingu Razor z dyrektywą @page .

Stosowanie domyślnego układu do aplikacji

Określ domyślny układ aplikacji w składniku Router składnika RouteView . Użyj parametru , DefaultLayout aby ustawić typ układu:

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

W poprzednim przykładzie {LAYOUT} symbol zastępczy to układ (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ę Udostępnianie 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.

Stosowanie układu do dowolnej zawartości (LayoutView składnik)

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że być konieczne określenie przestrzeni nazw układu w zależności od wersji i typu aplikacji platformy Blazor .NET. Aby uzyskać więcej informacji, zobacz sekcję Udostępnianie przestrzeni nazw układu.

Ważne

Blazor Usługa Web Apps nie używa parametru NotFound (<NotFound>...</NotFound> znaczników), 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 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 struktur menu wielopoziomowych.

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. Składnik Episodes jest renderowany, gdzie @Body jest wyświetlany w elemencie 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>) i informacje o znakach towarowych (<div>...</div>) pochodzą ze DoctorWhoLayout składnika.
• Nagłówek H2 "odcinki" (<h2>...</h2>) i lista odcinków (<ul>...</ul>) pochodzą ze Episodes składnika .

<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 składniki routingu są zintegrowane z aplikacją Razor Pages, współużytkowany układ aplikacji może być używany ze składnikami. Aby uzyskać więcej informacji, zobacz Integrowanie składników ASP.NET Core Razor z aplikacjami platformy ASP.NET Core.

Sekcje

Aby kontrolować zawartość w układzie ze składnika podrzędnegoRazor, zobacz sekcje ASP.NET CoreBlazor.

Dodatkowe zasoby

• Układ w ASP.NET Core
• Blazorprzykładowe repozytorium GitHub () (dotnet/blazor-samplesjak pobrać)