Řízení navigace v aplikaci pomocí komponenty Směrovač Blazor
Systém směrování Blazor nabízí flexibilní možnosti pro zajištění toho, aby požadavky uživatelů dosáhly komponenty, která je dokáže zpracovat, a vrací informace, které chce uživatel.
Předpokládejme, že pracujete na webu společnosti pro doručování pizzy. Chcete nastavit web tak, aby žádosti o podrobnosti o pizzě a podrobnosti o vlastním zastavení byly zpracovávány stejnou komponentou. Tuto fázi jste dokončili, ale testování ukazuje, že se při zastavení požadavků zobrazuje chybová zpráva. Tento problém je potřeba vyřešit.
Tady se dozvíte, jak nakonfigurovat trasy v Blazoru pomocí direktivy @page .
Poznámka:
Bloky kódu v této lekci jsou ilustrativní příklady. V další lekci napíšete vlastní kód.
Použití šablon tras
Když uživatel vytvoří požadavek na stránku z vaší webové aplikace, může určit, co chce zobrazit s informacemi v identifikátoru URI. Příklad:
http://www.contoso.com/pizzas/margherita?extratopping=pineapple
Po protokolu a adrese webu tento identifikátor URI označuje, že uživatel chce vědět o margherita pizzas. Řetězec dotazu za otazníkem také ukazuje, že se zajímá o další zastavení ananasu. V Blazoru použijete směrování, abyste zajistili, že se každý požadavek odešle do komponenty, která dokáže nejlépe reagovat. Pomocí směrování také zajistíte, že komponenta obsahuje všechny informace, které potřebuje k zobrazení požadovaných uživatelů. V takovém případě můžete chtít odeslat požadavek na komponentu Pizzas a pro tuto komponentu zobrazit pizzu margherita s informacemi o přidání ananasu.
Blazor směruje požadavky se specializovanou komponentou nazvanou Router . Komponenta se konfiguruje v App.razoru takto:
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<p>Sorry, we haven't found any pizzas here.</p>
</NotFound>
</Router>
Když se aplikace spustí, Blazor zkontroluje AppAssembly atribut a zjistí, které sestavení má prohledávat. Zkontroluje, jestli sestavení obsahuje komponenty, které mají atribut RouteAttribute . Blazor tyto hodnoty používá ke kompilaci objektu RouteData , který určuje, jak se požadavky směrují do komponent. Při kódování aplikace použijete direktivu @page v každé komponentě k opravě RouteAttribute.
V předchozím kódu značka určuje komponentu, <Found> která zpracovává směrování za běhu: komponentu RouteView . Tato komponenta přijímá objekt RouteData a všechny parametry z identifikátoru URI nebo řetězce dotazu. Potom vykreslí zadanou komponentu a její rozložení. Značku můžete použít <Found> k určení výchozího rozložení, které se použije, když vybraná komponenta nezadá rozložení s direktivou @layout . Další informace o rozloženích se dozvíte později v tomto modulu.
V komponentě <Router> můžete také určit, co se uživateli vrátí, pokud neexistuje odpovídající trasa, pomocí značky <NotFound> . Předchozí příklad vrátí jeden <p> odstavec, ale můžete vykreslit složitější HTML. Může například obsahovat odkaz na domovskou stránku nebo kontaktní stránku pro správce webu.
Použití direktivy @page
V komponentě Blazor direktiva @page určuje, že komponenta by měla zpracovávat požadavky přímo. RouteAttribute v direktivě @page můžete zadat tak, že ji předáte jako řetězec. Tento atribut například určuje, že stránka zpracovává požadavky na trasu /Pizzas :
@page "/Pizzas"
Pokud chcete zadat více než jednu trasu ke komponentě, použijte dvě nebo více @page direktiv, například v tomto příkladu:
@page "/Pizzas"
@page "/CustomPizzas"
Získání informací o poloze a navigace pomocí NavigationManageru
Předpokládejme, že napíšete komponentu pro zpracování identifikátoru URI, který uživatel požaduje, například http://www.contoso.com/pizzas/margherita/?extratopping=pineapple.
Při psaní komponenty možná budete potřebovat přístup k navigačním informacím, například:
- Aktuální úplný identifikátor URI, například
http://www.contoso.com/pizzas/margherita?extratopping=pineapple. - Základní identifikátor URI, například
http://www.contoso.com/. - Základní relativní cesta, například
pizzas/margherita. - Řetězec dotazu, například
?extratopping=pineapple.
K získání všech těchto hodnot můžete použít NavigationManager objekt. Objekt je nutné vložit do komponenty a pak získat přístup k jeho vlastnostem. Tento kód pomocí objektu NavigationManager získá základní identifikátor URI webu a pak ho použije k nastavení odkazu na domovskou stránku:
@page "/pizzas"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<a href=@HomePageURI>Home Page</a>
@code {
[Parameter]
public string PizzaName { get; set; }
public string HomePageURI { get; set; }
protected override void OnInitialized()
{
HomePageURI = NavManager.BaseUri;
}
}
Pokud chcete získat přístup k řetězci dotazu, musíte analyzovat úplný identifikátor URI. K provedení této analýzy použijte QueryHelpers třídu ze Microsoft.AspNetCore.WebUtilities sestavení:
@page "/pizzas"
@using Microsoft.AspNetCore.WebUtilities
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<p>I want to add this topping: @ToppingName</p>
@code {
[Parameter]
public string PizzaName { get; set; }
private string ToppingName { get; set; }
protected override void OnInitialized()
{
var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("extratopping", out var extraTopping))
{
ToppingName = System.Convert.ToString(extraTopping);
}
}
}
Pokud uživatel požádal o identifikátor URI http://www.contoso.com/pizzas?extratopping=Pineapple, při nasazení předchozí komponenty by se na vykreslené stránce zobrazila zpráva "Chci přidat toto zastavení: Pineapple".
Objekt můžete také použít NavigationManager k odeslání uživatelů do jiné komponenty v kódu voláním NavigationManager.NavigateTo() metody:
@page "/pizzas/{pizzaname}"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<button class="btn" @onclick="NavigateToPaymentPage">
Buy this pizza!
</button>
@code {
[Parameter]
public string PizzaName { get; set; }
private void NavigateToPaymentPage()
{
NavManager.NavigateTo("buypizza");
}
}
Poznámka:
Řetězec, který předáte NavigateTo() metodě, je absolutní nebo relativní identifikátor URI, kam chcete odeslat uživatele. Ujistěte se, že máte na této adrese nastavenou komponentu. Pro předchozí kód bude komponenta s direktivou zpracovávat tuto trasu @page "/buypizza" .
Použití komponent NavLink
V jednom z předchozích příkladů byl kód použit k získání NavigationManager.BaseUri hodnoty a jeho použití k nastavení href atributu <a> značky na domovskou stránku. V Blazoru pomocí komponenty NavLink vykreslujte <a> značky, protože přepíná active třídu CSS, když atribut odkazu href odpovídá aktuální adrese URL. Když třídu napíšete active , můžete uživateli smazat, který navigační odkaz je určen pro aktuální stránku.
Když použijete NavLink, příklad odkazu na domovskou stránku vypadá jako následující kód:
@page "/pizzas"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<NavLink href=@HomePageURI Match="NavLinkMatch.All">Home Page</NavLink>
@code {
[Parameter]
public string PizzaName { get; set; }
public string HomePageURI { get; set; }
protected override void OnInitialized()
{
HomePageURI = NavManager.BaseUri;
}
}
Atribut Match v komponentě NavLink slouží ke správě, když je odkaz zvýrazněný. Existují dvě možnosti:
- NavLinkMatch.All: Když použijete tuto hodnotu, odkaz se zvýrazní jenom jako aktivní odkaz, pokud se shoduje
hrefs celou aktuální adresou URL. - NavLinkMatch.Prefix: Když použijete tuto hodnotu, odkaz se zvýrazní jako aktivní, když odpovídá
hrefprvní části aktuální adresy URL. Předpokládejme například, že jste měli odkaz<NavLink href="pizzas" Match="NavLinkMatch.Prefix">. Tento odkaz by se zvýraznil jako aktivní, když bylahttp://www.contoso.com/pizzasaktuální adresa URL a pro jakékoli umístění v této adrese URL, napříkladhttp://www.contoso.com/pizzas/formaggio. Toto chování může uživateli pomoct pochopit, kterou část webu si právě prohlíží.