Het Blazor-routeronderdeel gebruiken om de navigatie van uw app te beheren

Het routeringssysteem van Blazor biedt flexibele opties om ervoor te zorgen dat gebruikersaanvragen een onderdeel bereiken dat ze kan verwerken en informatie kan retourneren die de gebruiker wil.

Stel dat u werkt op de website van het pizzaleveringsbedrijf. U wilt de site zo instellen dat aanvragen voor pizzadetails en aangepaste toppingdetails beide worden verwerkt door hetzelfde onderdeel. U hebt deze fase voltooid, maar tijdens het testen ziet u dat de aanvragen voor het overslaan een foutbericht ontvangen. U moet dit probleem oplossen.

Hier leert u hoe u routes in Blazor configureert met behulp van de @page instructie.

Routesjablonen gebruiken

Wanneer de gebruiker een aanvraag voor een pagina vanuit uw web-app indient, kan deze opgeven wat ze willen zien met informatie in de URI. Voorbeeld:

http://www.contoso.com/pizzas/margherita?extratopping=pineapple

Na het protocol en het websiteadres geeft deze URI aan dat de gebruiker meer wil weten over de pizza's. De querytekenreeks na het vraagteken laat ook zien dat ze geïnteresseerd zijn in een extra topping van ananas. In Blazor gebruikt u routering om ervoor te zorgen dat elke aanvraag wordt verzonden naar het onderdeel dat het beste kan reageren. U gebruikt ook routering om ervoor te zorgen dat het onderdeel beschikt over alle informatie die nodig is om weer te geven wat de gebruiker wil. In dit geval wilt u mogelijk de aanvraag verzenden naar het onderdeel Pizza's en voor dat onderdeel om een pizza van een pizza op te geven met informatie over het toevoegen van ananas aan het onderdeel.

Blazor routeert aanvragen met een speciaal onderdeel dat het routeronderdeel wordt genoemd. Het onderdeel is als volgt geconfigureerd in App.razor :

<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>

Wanneer de app wordt gestart, controleert Blazor het AppAssembly kenmerk om erachter te komen welke assembly het moet scannen. De assembly wordt gescand op onderdelen die de RouteAttribute hebben. Blazor gebruikt deze waarden om een RouteData-object te compileren dat aangeeft hoe aanvragen naar onderdelen worden gerouteerd. Wanneer u de app coderen, gebruikt u de @page instructie in elk onderdeel om de RouteAttribute op te lossen.

In de voorgaande code geeft de <Found> tag het onderdeel op dat de routering tijdens runtime verwerkt: het RouteView-onderdeel . Dit onderdeel ontvangt het RouteData-object en eventuele parameters van de URI of querytekenreeks. Vervolgens wordt het opgegeven onderdeel en de indeling ervan weergegeven. U kunt de <Found> tag gebruiken om een standaardindeling op te geven, die wordt gebruikt wanneer het geselecteerde onderdeel geen indeling met de @layout instructie opgeeft. Verderop in deze module vindt u meer informatie over indelingen.

In het <Router> onderdeel kunt u ook opgeven wat wordt geretourneerd aan de gebruiker wanneer er geen overeenkomende route is, met behulp van de <NotFound> tag. In het voorgaande voorbeeld wordt één <p> alinea geretourneerd, maar u kunt complexere HTML weergeven. Het kan bijvoorbeeld een koppeling naar de startpagina of een contactpagina voor sitebeheerders bevatten.

@page De instructie gebruiken

In een Blazor-onderdeel geeft de @page richtlijn aan dat het onderdeel aanvragen rechtstreeks moet verwerken. U kunt een RouteAttribute in de @page instructie opgeven door deze als een tekenreeks door te geven. Dit kenmerk geeft bijvoorbeeld aan dat de pagina aanvragen verwerkt voor de route /Pizzas :

@page "/Pizzas"

Als u meer dan één route naar het onderdeel wilt opgeven, gebruikt u twee of meer @page instructies, zoals in dit voorbeeld:

@page "/Pizzas"
@page "/CustomPizzas"

Locatiegegevens verkrijgen en navigeren met NavigationManager

Stel dat u een onderdeel schrijft om een URI af te handelen die de gebruiker aanvraagt, zoals http://www.contoso.com/pizzas/margherita/?extratopping=pineapple.

Wanneer u een onderdeel schrijft, hebt u mogelijk toegang nodig tot navigatiegegevens zoals:

• De huidige volledige URI, zoals http://www.contoso.com/pizzas/margherita?extratopping=pineapple.
• De basis-URI, zoals http://www.contoso.com/.
• Het relatieve basispad, zoals pizzas/margherita.
• De querytekenreeks, zoals ?extratopping=pineapple.

U kunt een NavigationManager object gebruiken om al deze waarden te verkrijgen. U moet het object in het onderdeel injecteren en vervolgens toegang krijgen tot de eigenschappen ervan. Deze code maakt gebruik van het NavigationManager object om de basis-URI van de website te verkrijgen en gebruikt deze vervolgens om een koppeling naar de startpagina in te stellen:

@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;
    }
}

Voor toegang tot de queryreeks moet u de volledige URI parseren. Gebruik de QueryHelpers klasse van de assembly om deze parsering uit te Microsoft.AspNetCore.WebUtilities voeren:

@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);
        }
    }
}

Als een gebruiker de URI http://www.contoso.com/pizzas?extratopping=Pineappleheeft aangevraagd, ziet het voorgaande onderdeel het bericht 'Ik wil deze topping toevoegen: Ananas' op de weergegeven pagina.

U kunt het NavigationManager object ook gebruiken om uw gebruikers naar een ander onderdeel in code te verzenden door de NavigationManager.NavigateTo() methode aan te roepen:

@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");
    }
}

NavLink-onderdelen gebruiken

In een van de vorige voorbeelden is code gebruikt om de NavigationManager.BaseUri waarde te verkrijgen en deze te gebruiken om het href kenmerk van een <a> tag in te stellen op de startpagina. Gebruik in Blazor het NavLink-onderdeel om tags weer te geven <a> , omdat hiermee een active CSS-klasse wordt in-/uitgeschakeld wanneer het kenmerk van href de koppeling overeenkomt met de huidige URL. Door de active klas te stylen, kunt u de gebruiker duidelijk maken welke navigatiekoppeling voor de huidige pagina is.

Wanneer u NavLink gebruikt, ziet het voorbeeld van de startpaginakoppeling eruit als de volgende code:

@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;
    }
}

Het Match kenmerk in het NavLink-onderdeel wordt gebruikt om te beheren wanneer de koppeling is gemarkeerd. Er zijn twee opties:

• NavLinkMatch.All: Wanneer u deze waarde gebruikt, wordt de koppeling alleen gemarkeerd als de actieve koppeling wanneer href deze overeenkomt met de volledige huidige URL.
• NavLinkMatch.Prefix: Wanneer u deze waarde gebruikt, wordt de koppeling gemarkeerd als actief wanneer href deze overeenkomt met het eerste deel van de huidige URL. Stel dat u de koppeling <NavLink href="pizzas" Match="NavLinkMatch.Prefix">hebt. Deze koppeling zou als actief worden gemarkeerd wanneer de huidige URL en http://www.contoso.com/pizzas voor elke locatie binnen die URL, zoals http://www.contoso.com/pizzas/formaggio. Dit gedrag kan de gebruiker helpen te begrijpen welke sectie van de website die ze momenteel bekijken.