Använd Blazor-routerkomponenten för att styra appens navigering
- 5 minuter
Blazors routningssystem ger flexibla alternativ för att säkerställa att användarbegäranden når en komponent som kan hantera dem och returnera information som användaren vill ha.
Anta att du arbetar på pizzaleveransföretagets webbplats. Du vill konfigurera webbplatsen så att begäranden om pizzainformation och information om anpassad toppning hanteras av samma komponent. Du har slutfört den här fasen, men dina tester visar att topping-begäranden får ett felmeddelande. Du måste åtgärda det här problemet.
Här lär du dig hur du konfigurerar vägar i Blazor med hjälp @page av direktivet.
Note
Kodblocken i den här enheten är illustrativa exempel. Du skriver din egen kod i nästa lektion.
Använda routningsmallar
När användaren skickar en begäran om en sida från din webbapp kan de ange vad de vill se med information i URI:n. Till exempel:
http://www.contoso.com/pizzas/margherita?extratopping=pineapple
Efter protokollet och webbplatsadressen anger den här URI:n att användaren vill veta mer om margheritapizzor. Frågesträngen efter frågetecknet visar också att de är intresserade av en extra topping av ananas. I Blazor använder du routning för att säkerställa att varje begäran skickas till den komponent som bäst kan svara. Du använder också routning för att se till att komponenten har all information den behöver för att visa vad användaren vill ha. I det här fallet kanske du vill skicka begäran till pizzakomponenten och att komponenten ska visa en margheritapizza med information om hur du lägger till ananas i den.
Blazor dirigerar begäranden med en specialiserad komponent som kallas routerkomponenten . Komponenten konfigureras i App.razor så här:
<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>
När appen startar kontrollerar AppAssembly Blazor attributet för att ta reda på vilken sammansättning den ska genomsöka. Den söker igenom sammansättningen efter komponenter som har RouteAttribute närvarande. Blazor använder dessa värden för att kompilera ett RouteData-objekt som anger hur begäranden dirigeras till komponenter. När du kodar appen använder @page du direktivet i varje komponent för att åtgärda RouteAttribute.
I föregående kod anger taggen <Found> den komponent som hanterar routningen vid körning: RouteView-komponenten . Den här komponenten tar emot RouteData-objektet och eventuella parametrar från URI:n eller frågesträngen. Den renderar sedan den angivna komponenten och dess layout. Du kan använda taggen <Found> för att ange en standardlayout som används när den valda komponenten inte anger någon layout med @layout direktivet. Du lär dig mer om layouter senare i den här modulen.
I komponenten <Router> kan du också ange vad som returneras till användaren när det inte finns någon matchande väg med hjälp av taggen <NotFound> . Föregående exempel returnerar ett enda <p> stycke, men du kan återge mer komplex HTML. Den kan till exempel innehålla en länk till startsidan eller en kontaktsida för webbplatsadministratörer.
@page Använda direktivet
I en Blazor-komponent @page anger direktivet att komponenten ska hantera begäranden direkt. Du kan ange en RouteAttribute i @page direktivet genom att skicka den som en sträng. Det här attributet anger till exempel att sidan hanterar begäranden till /Pizzas-vägen :
@page "/Pizzas"
Om du vill ange mer än en väg till komponenten använder du två eller flera @page direktiv, som i det här exemplet:
@page "/Pizzas"
@page "/CustomPizzas"
Hämta platsinformation och navigera med NavigationManager
Anta att du skriver en komponent för att hantera en URI som användaren begär, till exempel http://www.contoso.com/pizzas/margherita/?extratopping=pineapple.
När du skriver en komponent kan du behöva åtkomst till navigeringsinformation som:
- Den aktuella fullständiga URI:n, till exempel
http://www.contoso.com/pizzas/margherita?extratopping=pineapple. - Bas-URI:n, till exempel
http://www.contoso.com/. - Den grundläggande relativa sökvägen, till exempel
pizzas/margherita. - Frågesträngen, till exempel
?extratopping=pineapple.
Du kan använda ett NavigationManager objekt för att hämta alla dessa värden. Du måste mata in objektet i komponenten och sedan komma åt dess egenskaper. Den här koden använder NavigationManager -objektet för att hämta webbplatsens bas-URI och använder den sedan för att ange en länk till startsidan:
@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;
}
}
För att få åtkomst till frågesträngen måste du parsa den fullständiga URI:n. Om du vill köra den här parsningen QueryHelpers använder du klassen från Microsoft.AspNetCore.WebUtilities sammansättningen:
@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);
}
}
}
När den föregående komponenten har distribuerats visas meddelandet "Jag vill lägga till den här toppingen: Ananas" på den renderade sidan om en användare begärde URI http://www.contoso.com/pizzas?extratopping=Pineapple.
Du kan också använda objektet NavigationManager för att skicka användarna till en annan komponent i koden genom att anropa NavigationManager.NavigateTo() metoden:
@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");
}
}
Note
Strängen som du skickar till NavigateTo() metoden är den absoluta eller relativa URI där du vill skicka användaren. Kontrollera att du har en komponent konfigurerad på den adressen. I föregående kod hanterar en komponent med @page "/buypizza" direktivet den här vägen.
Använda NavLink-komponenter
I ett av föregående exempel användes kod för att hämta NavigationManager.BaseUri värdet och använda det för att ange href attributet för en <a> tagg till startsidan. I Blazor använder du NavLink-komponenten för att återge <a> taggar eftersom den växlar en active CSS-klass när länkens href attribut matchar den aktuella URL:en. Genom att formatera active klassen kan du göra det tydligt för användaren vilken navigeringslänk som är för den aktuella sidan.
När du använder NavLink ser länkexemplet på startsidan ut som följande kod:
@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;
}
}
Attributet Match i NavLink-komponenten används för att hantera när länken är markerad. Det finns två alternativ:
-
NavLinkMatch.All: När du använder det här värdet markeras länken bara som den aktiva länken när
hrefden matchar hela den aktuella URL:en. -
NavLinkMatch.Prefix: När du använder det här värdet markeras länken som aktiv när
hrefden matchar den första delen av den aktuella URL:en. Anta till exempel att du hade länken<NavLink href="pizzas" Match="NavLinkMatch.Prefix">. Den här länken markeras som aktiv när den aktuella URL:en varhttp://www.contoso.com/pizzasoch för alla platser i url:en, till exempelhttp://www.contoso.com/pizzas/formaggio. Det här beteendet kan hjälpa användaren att förstå vilket avsnitt av webbplatsen de för närvarande visar.