Ontdek hoe routeparameters van invloed zijn op de routering van uw Blazor-app

Tot nu toe hebt u in deze Blazor-module gezien hoe u onderdelen van de URI gebruikt om aanvragen naar het juiste onderdeel te routeren. U kunt ook routeparameters gebruiken om andere onderdelen van de URI te onderscheppen en deze in uw code te openen.

Stel dat u werkt op de website van het pizzaleveringsbedrijf en dat u pizzaaanvragen doorsturen naar het onderdeel Pizzas.razor . Nu wilt u de favoriete pizza van de gebruiker ophalen uit de URI en deze gebruiken om informatie weer te geven over andere pizza's die ze misschien leuk vinden.

Hier leert u hoe u routeparameters gebruikt om delen van de URL op te geven die in uw code moeten worden verwerkt.

Routeparameters

Eerder in deze module hebt u geleerd hoe onderdelen van de URI die de gebruikersaanvragen kunnen worden gebruikt om de aanvraag naar het juiste onderdeel te routeren. Vaak wilt u andere onderdelen van de URI gebruiken als een waarde op uw weergegeven pagina. Stel dat de gebruiker iets aanvraagt:

http://www.contoso.com/favoritepizza/hawaiian

Met behulp van de @page instructie hebt u gezien hoe u deze aanvraag kunt routeren naar bijvoorbeeld het onderdeel FavoritePizza.razor . U wilt nu gebruikmaken van de waarde hawaïaan in uw onderdeel. Als u deze waarde wilt verkrijgen, kunt u deze declareren als routeparameter.

Gebruik de @page instructie om de onderdelen van de URI op te geven die als routeparameters aan het onderdeel worden doorgegeven. In de code van uw onderdeel kunt u de waarde van een routeparameter op dezelfde manier verkrijgen als de waarde van een onderdeelparameter:

@page "/FavoritePizzas/{favorite}"

<h1>Choose a Pizza</h1>

<p>Your favorite pizza is: @Favorite</p>

@code {
    [Parameter]
    public string Favorite { get; set; }
}

In de voorgaande code worden accolades in de @page instructie gebruikt om de routeparameter op te geven en deze een naam te geven.

Optionele routeparameters

In het voorgaande voorbeeld is de {favorite} parameter vereist. Als u de routeparameter optioneel wilt maken, gebruikt u een vraagteken:

@page "/FavoritePizzas/{favorite?}"

<h1>Choose a Pizza</h1>

<p>Your favorite pizza is: @Favorite</p>

@code {
    [Parameter]
    public string Favorite { get; set; }
    
    protected override void OnInitialized()
    {
        Favorite ??= "Fiorentina";
    }
}

Het is een goed idee om een standaardwaarde in te stellen voor de optionele parameter. In het voorgaande voorbeeld wordt de standaardwaarde voor de Favorite parameter ingesteld in de OnInitialized methode.

Routebeperkingen

In de vorige voorbeelden is het gevolg van het aanvragen van de URI http://www.contoso.com/favoritepizza/2 het niet-logische bericht 'Uw favoriete pizza is: 2'. In andere gevallen kunnen dergelijke type mismatches een uitzondering veroorzaken en een foutmelding aan de gebruiker tonen. U kunt een type opgeven voor de routeparameter:

@page "/FavoritePizza/{preferredsize:int}"

<h1>Choose a Pizza</h1>

<p>Your favorite pizza size is: @FavoriteSize inches.</p>

@code {
    [Parameter]
    public int FavoriteSize { get; set; }
}

Als de gebruiker in dit voorbeeld aanvraagt http://www.contoso.com/favoritepizza/margherita, is er geen overeenkomst met het voorgaande onderdeel. Als gevolg hiervan wordt de aanvraag elders gerouteerd. Als de gebruiker aanvraagt http://www.contoso.com/favoritepizza/12, is er een routeovereenkomst en het onderdeel geeft het bericht Uw favoriete pizzagrootte is: 12 inch. Een specifiek type dat is opgegeven voor de routeparameter, zoals deze, wordt een routebeperking genoemd. U kunt deze andere typen gebruiken in een beperking:

Een catch-all routeparameter instellen

Houd rekening met het volgende onderdeel van eerder in deze les:

@page "/FavoritePizza/{favorite}"

<h1>Choose a Pizza</h1>

<p>Your favorite pizza is: @Favorite</p>

@code {
    [Parameter]
    public string Favorite { get; set; }
}

Stel nu dat de gebruiker probeert twee favorieten op te geven door de URI http://www.contoso.com/favoritepizza/margherita/hawaiianaan te vragen. Op de pagina wordt het bericht weergegeven: Uw favoriete pizza is: margherita en negeert de submap Hawaïaan. U kunt dit gedrag wijzigen met behulp van een catch-all routeparameter, waarmee paden worden vastgelegd over meerdere grenzen van URI-mappen (schuine strepen). Voeg een sterretje (*) toe aan de naam van de routeparameter om de routeparameter alles te laten omvatten:

@page "/FavoritePizza/{*favorites}"

<h1>Choose a Pizza</h1>

<p>Your favorite pizzas are: @Favorites</p>

@code {
    [Parameter]
    public string Favorites { get; set; }
}

Met dezelfde aanvraag-URI wordt op de pagina nu het bericht Uw favoriete pizza's weergegeven: margherita/hawaïaan.