Tworzenie składników Blazor wielokrotnego użycia przy użyciu układów
- 7 min
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 dostarczającej pizzę i utworzyłeś zawartość dla większości głównych stron jako zestaw komponentów 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ć komponentów układu w Blazor do renderowania wspólnego HTML-u na wielu stronach.
Note
Bloki kodu w tej lekcji są przykładami ilustracyjnymi. Napiszesz własny kod w następnej jednostce.
Co to są układy 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 gorsze, jeśli nastąpi późniejsza zmiana, na przykład nowa główna sekcja witryny, do której należy się odnieść, lub rebranding witryny, musisz dokonać tych samych zmian 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.
Komponent układu w Blazor to taki, który udostępnia swój renderowany znacznik wszystkim komponentom, 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 komponentów. Gdy strona jest renderowana, unikatowe elementy, takie jak szczegóły żądanej pizzy, pochodzą z komponentu referencyjnego. Jednak typowe elementy pochodzą z układu. W układzie należy zakodować 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 komponentów, które się do niej odwołują.
Kodowanie układu Blazor
Układ platformy Blazor jest określonym typem składnika, więc pisanie układu platformy Blazor jest podobnym zadaniem do tworzenia innych składników w celu renderowania interfejsu użytkownika w aplikacji. Na przykład używasz bloków @code i wielu dyrektyw w ten sam sposób. 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:
- Musisz 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";
}
Note
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, odwołujące się składniki używają dyrektywy @page.
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 Blazor
Aby użyć układu z innego składnika, dodaj @layout dyrektywę z nazwą układu, który chcesz zastosować. Kod HTML składnika jest renderowany w miejscu dyrektywy @Body.
@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:
Diagram przedstawiający, jak znaczniki komponentu są łączone ze znacznikami układu, aby stworzyć końcowy HTML dla strony.
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.
Important
Nie dodawaj @layout dyrektywy do pliku _Imports.razor w folderze głównym projektu, ponieważ powoduje to nieskończoną pętlę layoutó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 dyrektywie @layout lub w pliku _Imports.razor, zastępują to ustawienie domyślnego układu.