Średni · lekcja 31

Routing i layout w Blazor — nawigacja między komponentami

Zacznij tutaj

Po co się tego uczymy?

Prawdziwa aplikacja Blazor ma wiele stron/komponentów — listę produktów, formularz dodawania, szczegóły. Ta lekcja pokazuje, jak poruszać się między nimi (routing), jak zbudować wspólne menu nawigacyjne widoczne na każdej stronie (layout — dokładnie ta sama potrzeba, co _Layout.cshtml z lekcji 5, tylko w świecie komponentów), i jak przechodzić między stronami z poziomu kodu C#, analogicznie do Navigation.PushAsync z lekcji o nawigacji w dziale MAUI.

Wprowadzenie

Teoria

Routing przez @page na komponencie. W przeciwieństwie do Razor Pages (gdzie adres URL wynika z lokalizacji pliku), w Blazor KAŻDY komponent, który ma być samodzielną, routowalną "stroną", deklaruje swój adres JAWNIE przez dyrektywę @page "/adres" na samej górze pliku — komponent MOŻE mieć NAWET WIĘCEJ niż jeden adres (kilka linii @page pod rząd), np. dla obsługi zarówno /produkty, jak i /produkty/lista. Parametry w adresie: @page "/produkty/{id:int}", odebrane przez [Parameter] public int Id { get; set; } w bloku @code — bardzo podobne do @page "{id:int}" z Razor Pages w lekcji 12.

Nawigacja z kodu — NavigationManager. Wstrzykiwana usługa (@inject NavigationManager Nawigacja) pozwalająca przejść na inną stronę PROGRAMOWO (np. po udanym zapisaniu formularza): Nawigacja.NavigateTo("/produkty") — bezpośredni odpowiednik RedirectToPage(...) z Razor Pages i Navigation.PushAsync(...) z działu MAUI. NavigationManager.Uri zwraca aktualny adres URL, przydatny np. do podświetlenia aktywnego elementu menu.

Layout w Blazor — komponent dziedziczący po LayoutComponentBase. Plik MainLayout.razor (domyślnie w Components/Layout/) to bezpośredni odpowiednik _Layout.cshtml z lekcji 5 — zawiera wspólne menu, nagłówek, stopkę, a w miejscu @Body (właściwość dziedziczona z LayoutComponentBase) wstawiana jest treść AKTUALNIE wyświetlanego komponentu-strony. Komponent-strona wskazuje swój layout przez dyrektywę @layout NazwaLayoutu (albo — częściej — layout ustawiony jest GLOBALNIE dla WSZYSTKICH stron w pliku Routes.razor/App.razor).

Komponent NavLink. Specjalna, wbudowana wersja linku (<NavLink href="/produkty">Produkty</NavLink>) AUTOMATYCZNIE dodająca klasę CSS active, gdy użytkownik znajduje się AKTUALNIE na tej stronie — dzięki temu menu nawigacyjne może wizualnie wyróżnić bieżącą sekcję BEZ ręcznego porównywania adresu URL w kodzie (choć taka ręczna technika też jest możliwa przez NavigationManager.Uri).

Zobacz zależności

Schemat

Components/Layout/MainLayout.razor  (odpowiednik _Layout.cshtml)
┌────────────────────────────────────┐
│ <nav>                               │
│   <NavLink href="/">Strona główna</NavLink>
│   <NavLink href="/produkty">Produkty</NavLink>
│ </nav>                              │
│                                      │
│ @Body  ←──────────────────────────┼─── TU wstawiana jest treść AKTUALNEJ strony
│                                      │
│ <footer>...</footer>                │
└────────────────────────────────────┘

Components/Pages/Produkty.razor          Components/Pages/SzczegolyProduktu.razor
@page "/produkty"                        @page "/produkty/{id:int}"
        │                                        ▲
        │  klik na produkt                        │
        │  Nawigacja.NavigateTo($"/produkty/{p.Id}")
        └────────────────────────────────────────┘

NavLink href="/produkty"
        │  (gdy Uri == "/produkty")
        ▼
automatycznie dostaje klasę CSS "active"

Połącz z praktyką

Przykład z życia

Aplikacja sklepowa w Blazor ma wspólne menu (Strona główna, Produkty, Koszyk, Kontakt) widoczne na KAŻDEJ stronie dzięki MainLayout.razor, a kliknięcie konkretnego produktu na liście przenosi na stronę jego szczegółów pod adresem zawierającym Id produktu — dokładnie ta sama koncepcja, którą znasz z _Layout.cshtml i routingu parametrycznego z wcześniejszych lekcji, tylko zrealizowana w świecie interaktywnych komponentów.