Utforska hur routningsparametrar påverkar blazor-appens routning
- 7 minuter
Hittills har du i den här Blazor-modulen sett hur du använder delar av URI:n för att dirigera begäranden till rätt komponent. Du kan också använda vägparametrar för att fånga upp andra delar av URI:n och komma åt dem i koden.
Anta att du arbetar på pizzaleveransföretagets webbplats och att du dirigerar pizzaförfrågningar till pizzakomponenten Pizzas.razor . Nu vill du hämta användarens favoritpizza från URI:n och använda den för att visa information om andra pizzor som de kanske gillar.
Här får du lära dig hur du använder routningsparametrar för att ange delar av URL:en som ska bearbetas i koden.
Note
Kodblocken i den här enheten är illustrativa exempel. Du skriver din egen kod i nästa lektion.
Routningsparametrar
Tidigare i den här modulen lärde du dig hur delar av URI:n som användaren begär kan användas för att dirigera begäran till rätt komponent. Du vill ofta använda andra delar av URI:n som ett värde på den renderade sidan. Anta till exempel att användaren begär:
http://www.contoso.com/favoritepizza/hawaiian
Med hjälp av @page direktivet såg du hur du dirigerar den här begäran till till exempel komponenten FavoritePizza.razor . Nu vill du använda värdet hawaiian i komponenten. För att hämta det här värdet kan du deklarera det som en vägparameter.
@page Använd direktivet för att ange de delar av URI:n som skickas till komponenten som vägparametrar. I komponentens kod kan du hämta värdet för en vägparameter på samma sätt som du skulle få värdet för en komponentparameter:
@page "/FavoritePizzas/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Föregående kod använder klammerparenteser i @page direktivet för att ange routningsparametern och ge den ett namn.
Note
Komponentparametrar är värden som skickas från en överordnad komponent till en underordnad komponent. I det överordnade objektet anger du komponentparametervärdet som ett attribut för den underordnade komponentens tagg. Routningsparametrar anges på olika sätt. De anges som en del av URI:n. I bakgrunden fångar Blazor-routern upp dessa värden och skickar dem till komponenten som komponentvärden, vilket är anledningen till att du kan komma åt dem på samma sätt. Routningsparametrar är skiftlägesokänsliga och vidarebefordras till en komponentparameter med samma namn.
Valfria vägparametrar
I föregående exempel krävs parametern {favorite} . Om du vill göra routningsparametern valfri använder du ett frågetecken:
@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";
}
}
Det är en bra idé att ange ett standardvärde för den valfria parametern. I föregående exempel anges standardvärdet för parametern Favorite i OnInitialized -metoden.
Note
Metoden OnInitialized körs när användarna begär sidan för första gången. Den körs inte om de begär samma sida med en annan routningsparameter. Om du till exempel förväntar dig att användarna ska gå från http://www.contoso.com/favoritepizza/hawaiian till http://www.contoso.com/favoritepizzaanger du standardvärdet i metoden i OnParametersSet() stället.
Vägbegränsningar
I föregående exempel är konsekvensen av att begära URI http://www.contoso.com/favoritepizza/2 det meningslösa meddelandet "Din favoritpizza är: 2". I andra fall kan typfel som det orsaka ett undantag och visa ett fel för användaren. Överväg att ange en typ för routningsparametern:
@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; }
}
I det här exemplet, om användaren begär http://www.contoso.com/favoritepizza/margherita, finns det ingen matchning med den föregående komponenten. Det innebär att begäran dirigeras någon annanstans. Om användaren begär http://www.contoso.com/favoritepizza/12finns det en vägmatchning och komponenten visar meddelandet Din favoritpizzstorlek är: 12 tum. En specifik typ som anges för routningsparametern som den här kallas för en vägbegränsning. Du kan använda dessa andra typer i en begränsning:
| Constraint | Example | Exempelmatchningar |
|---|---|---|
| bool | {vegan:bool} |
http://www.contoso.com/pizzas/true |
| datetime | {birthdate:datetime} |
http://www.contoso.com/customers/1995-12-12 |
| decimal | {maxprice:decimal} |
http://www.contoso.com/pizzas/15.00 |
| double | {weight:double} |
http://www.contoso.com/pizzas/1.234 |
| float | {weight:float} |
http://www.contoso.com/pizzas/1.564 |
| guid | {pizza id:guid} |
http://www.contoso.com/pizzas/CD2C1638-1638-72D5-1638-DEADBEEF1638 |
| long | {totals ales:long} |
http://www.contoso.com/pizzas/568192454 |
Ange en catch-all-routningsparameter
Tänk på följande komponent från tidigare i den här lektionen:
@page "/FavoritePizza/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Anta nu att användaren försöker ange två favoriter genom att begära URI http://www.contoso.com/favoritepizza/margherita/hawaiian:n . Sidan visar meddelandet Din favoritpizza är: margherita och ignorerar undermappen hawaiian. Du kan ändra det här beteendet med hjälp av en catch-all-routningsparameter som samlar in sökvägar över flera URI-mappgränser (snedstreck). Prefixa en asterisk (*) till namnet på routningsparametern för att göra routningsparametern till catch-all:
@page "/FavoritePizza/{*favorites}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizzas are: @Favorites</p>
@code {
[Parameter]
public string Favorites { get; set; }
}
Med samma begärande-URI visar sidan nu meddelandet Dina favoritpizzor är: margherita/hawaiian.