Kompilowanie składników platformy Blazor wielokrotnego użytku przy użyciu układów
Platforma Blazor zawiera układy ułatwiające kodowanie typowych elementów interfejsu użytkownika, które są wyświetlane na wielu stronach w aplikacji.
Załóżmy, że pracujesz w witrynie internetowej firmy dostarczania pizzy i utworzono zawartość dla większości stron głównych jako zestaw składników platformy Blazor. Chcesz mieć pewność, że te strony mają tę samą sekcję znakowania, menu nawigacji i stopki. Nie chcesz jednak kopiować i wklejać tego kodu do wielu plików.
Tutaj dowiesz się, jak używać składników układu w blazor do renderowania wspólnego kodu HTML na wielu stronach.
Uwaga
Bloki kodu w tej lekcji są przykładami ilustracyjnymi. Napiszesz własny kod w następnej lekcji.
Co to są układy platformy Blazor?
W większości witryn internetowych rozmieszczenie elementów interfejsu użytkownika jest współużytkowane na wielu stronach. Na przykład w górnej części strony może znajdować się baner z marką, linki nawigacji głównej witryny w dół po lewej stronie oraz zastrzeżenie prawne u dołu. Kodując te typowe elementy interfejsu użytkownika na jednej stronie, jest to żmudne skopiowanie i wklejenie ich do kodu dla wszystkich pozostałych stron. Co gorsza, jeśli nastąpiła zmiana później, na przykład nowa główna sekcja witryny w celu połączenia z witryną lub zmiana nazwy lokacji, musisz wprowadzić te same zmiany powtórzenia we wszystkich poszczególnych składnikach. Zamiast tego użyj składnika układu, aby usprawnić i ponownie użyć typowych elementów interfejsu użytkownika.
Składnik układu w rozwiązaniu Blazor to składnik, który udostępnia renderowany znacznik ze wszystkimi składnikami, które się do niego odwołują. W układzie umieszczasz typowe elementy interfejsu użytkownika, takie jak menu nawigacji, znakowanie i stopki. Następnie odwołujesz się do tego układu z wielu innych składników. Gdy strona jest renderowana, unikatowe elementy, takie jak szczegóły żądanej pizzy, pochodzą ze składnika odwołującego się. Jednak typowe elementy pochodzą z układu. W układzie trzeba kodować tylko wspólne elementy interfejsu użytkownika. Następnie, jeśli musisz zmienić nazwę witryny lub wprowadzić inną zmianę, musisz tylko poprawić układ. Zmiana jest automatycznie stosowana do wszystkich składników odwołującej się.
Tworzenie kodu układu platformy Blazor
Układ platformy Blazor jest określonym typem składnika, dlatego pisanie układu platformy Blazor jest podobnym zadaniem, aby napisać inne składniki w celu renderowania interfejsu użytkownika w aplikacji. Na przykład w ten sam sposób używasz @code dyrektyw block i wielu. Układy są definiowane w plikach z .razor rozszerzeniem. Plik jest często przechowywany w folderze Udostępniony w aplikacji, ale można go przechowywać w dowolnej lokalizacji dostępnej dla składników, które go używają.
Dwa wymagania są unikatowe dla składników układu platformy Blazor:
- Należy dziedziczyć klasę
LayoutComponentBase. - Należy uwzględnić dyrektywę
@Bodyw lokalizacji, w której chcesz renderować zawartość składników, do których się odwołujesz.
@inherits LayoutComponentBase
<header>
<h1>Blazing Pizza</h1>
</header>
<nav>
<a href="Pizzas">Browse Pizzas</a>
<a href="Toppings">Browse Extra Toppings</a>
<a href="FavoritePizzas">Tell us your favorite</a>
<a href="Orders">Track Your Order</a>
</nav>
@Body
<footer>
@new MarkdownString(TrademarkMessage)
</footer>
@code {
public string TrademarkMessage { get; set; } = "All content is © Blazing Pizzas 2021";
}
Uwaga
Składniki układu nie zawierają @page dyrektywy, ponieważ nie obsługują żądań bezpośrednio i nie powinny mieć dla nich utworzonej trasy. Zamiast tego składniki odwołujące się używają @page dyrektywy .
Jeśli aplikacja Blazor została utworzona na podstawie szablonu projektu Blazor, domyślny układ aplikacji to składnik Shared/MainLayout.razor .
Używanie układu w składniku platformy Blazor
Aby użyć układu z innego składnika, dodaj @layout dyrektywę o nazwie układu do zastosowania. Kod HTML składnika jest renderowany w pozycji @Body dyrektywy.
@page "/FavoritePizzas/{favorite}"
@layout BlazingPizzasMainLayout
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Na tym diagramie pokazano, jak składnik i układ są łączone w celu renderowania końcowego kodu HTML:
Jeśli chcesz zastosować szablon do wszystkich składników platformy Blazor w folderze, możesz użyć pliku _Imports.razor jako skrótu. Po znalezieniu tego pliku przez kompilator blazor automatycznie uwzględnia on jego dyrektywy we wszystkich składnikach w folderze. Ta technika eliminuje konieczność dodania @layout dyrektywy do każdego składnika i dotyczy składników w tym samym folderze co plik _Imports.razor i wszystkie jego podfoldery.
Ważne
Nie dodawaj @layout dyrektywy do pliku _Imports.razor w folderze głównym projektu, ponieważ powoduje to nieskończoną pętlę układów.
Jeśli chcesz zastosować układ domyślny do każdego składnika we wszystkich folderach aplikacji internetowej, możesz to zrobić w składniku App.razor , w którym skonfigurowano składnik Router , jak pokazano w lekcji 2. W tagu <RouteView> użyj atrybutu DefaultLayout .
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(BlazingPizzasMainLayout)" />
</Found>
<NotFound>
<p>Sorry, there's nothing at this address.</p>
</NotFound>
</Router>
Składniki, które mają układ określony we własnej @layout dyrektywie lub w pliku _Imports.razor , zastępują to ustawienie układu domyślnego.