Untersuchen, wie sich Routenparameter auf das Routing Ihrer Blazor-App auswirken.
Bisher haben Sie in diesem Blazor-Modul gesehen, wie Sie Teile des URI verwenden, um Anforderungen an die richtige Komponente weiterzuleiten. Sie können auch andere Teile des URI abfangen und mithilfe von Routenparametern in Ihrem Code darauf zugreifen.
Angenommen, Sie arbeiten an der Website des Pizzalieferdiensts und haben Pizzaanforderungen an die Komponente Pizzas.razor weitergeleitet. Nun möchten Sie die Lieblingspizza des Benutzers aus dem URI abrufen und sie verwenden, um Informationen zu anderen Pizzas anzuzeigen, die dem Benutzer gefallen könnten.
Hier erfahren Sie, wie Sie Routenparameter verwenden, um Teile der URL anzugeben, die in Ihrem Code verarbeitet werden sollen.
Hinweis
Die Codeblöcke in dieser Lerneinheit sind anschauliche Beispiele. In der nächsten Lerneinheit schreiben Sie Ihren eigenen Code.
Routenparameter
Weiter oben in diesem Modul haben Sie erfahren, wie Teile des URI, den der Benutzer anfordert, verwendet werden können, um die Anforderung an die richtige Komponente weiterzuleiten. Sie möchten häufig andere Teile des URI als Wert auf der gerenderten Seite verwenden. Angenommen, der Benutzer fordert Folgendes an:
http://www.contoso.com/favoritepizza/hawaiian
Mithilfe der @page-Anweisung haben Sie gesehen, wie Sie diese Anforderung beispielsweise an die FavoritePizza.razor-Komponente weiterleiten. Nun möchten Sie den Wert hawaiian (Hawaii) in Ihrer Komponente verwenden. Um diesen Wert abzurufen, können Sie ihn als Routenparameter deklarieren.
Verwenden Sie die @page-Anweisung, um die Teile des URI anzugeben, die als Routenparameter an die Komponente übergeben werden. Im Code Ihrer Komponente können Sie den Wert eines Routenparameters auf die gleiche Weise wie den Wert eines Komponentenparameters abrufen:
@page "/FavoritePizzas/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Im vorangehenden Code werden geschweifte Klammern in der @page-Anweisung verwendet, um den Routenparameter anzugeben und zu benennen.
Hinweis
Komponentenparameter sind Werte, die von einer übergeordneten Komponente an eine untergeordnete Komponente gesendet werden. Im übergeordneten Element geben Sie den Wert des Komponentenparameters als Attribut des Tags der untergeordneten Komponente an. Routenparameter werden anders angegeben. Sie werden als Teil des URI angegeben. Im Hintergrund fängt der Blazor-Router diese Werte ab und sendet sie als Komponentenwerte an die Komponente, weshalb Sie auf die gleiche Weise darauf zugreifen können. Bei Routenparametern wird keine Groß-/Kleinschreibung beachtet, und sie werden an einen Komponentenparameter mit dem gleichen Namen weitergeleitet.
Optionale Routenparameter
Im vorherigen Beispiel ist der {favorite}-Parameter erforderlich. Um den Routenparameter als optional zu kennzeichnen, verwenden Sie ein Fragezeichen:
@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";
}
}
Es ist eine gute Idee, einen Standardwert für den optionalen Parameter festzulegen. Im obigen Beispiel wird der Standardwert für den Favorite-Parameter in der OnInitialized-Methode festgelegt.
Hinweis
Die Methode OnInitialized wird ausgeführt, wenn Benutzer*innen die Seite zum ersten Mal anfordern. Sie wird nicht ausgeführt, wenn sie dieselbe Seite mit einem anderen Routingparameter anfordern. Wenn Sie z. B. erwarten, dass Benutzer*innen von http://www.contoso.com/favoritepizza/hawaiian zu http://www.contoso.com/favoritepizza navigieren, legen Sie stattdessen den Standardwert in der Methode OnParametersSet() fest.
Routeneinschränkungen
In den vorherigen Beispielen wäre die Folge der Anforderung des URI http://www.contoso.com/favoritepizza/2 eine unsinnige Meldung: „Your favorite pizza is: 2“ (Ihre Lieblingspizza ist: 2). In anderen Fällen können Typkonflikte wie diese eine Ausnahme verursachen, wodurch Benutzer*innen ein Fehler angezeigt wird. Erwägen Sie die Angabe eines Typs für den Routenparameter:
@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; }
}
Wenn ein*e Benutzer*in in diesem Beispiel http://www.contoso.com/favoritepizza/margherita anfordert, gibt es keine Übereinstimmung mit der vorherigen Komponente. Daher wird die Anforderung an einen anderen Ort weitergeleitet. Wenn ein Benutzer http://www.contoso.com/favoritepizza/12 anfordert, gibt es eine Routenübereinstimmung, und die Komponente zeigt die Meldung Your favorite pizza size is: 12 inches (Ihre bevorzugte Pizzagröße ist: 12 Zoll) an. Ein bestimmter Typ für den Routenparameter wie dieser wird als Routeneinschränkung bezeichnet. Sie können diese anderen Typen in einer Einschränkung verwenden:
| Constraint | Beispiel | Beispiele für Übereinstimmungen |
|---|---|---|
| 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 |
Festlegen eines catch-all-Routenparameters
Betrachten Sie die folgende Komponente aus einem früheren Abschnitt in dieser Lerneinheit:
@page "/FavoritePizza/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Nehmen Sie an, dass eine Benutzerin versucht, zwei Lieblingspizzas über die Anforderung des URI http://www.contoso.com/favoritepizza/margherita/hawaiian anzugeben. Auf der Seite wird die Meldung Your favorite pizza is: margherita (Ihre Lieblingspizza ist: Margherita) angezeigt, und der Unterordner hawaiian (Hawaii) wird ignoriert. Sie können dieses Verhalten ändern, indem Sie einen catch-all-Routenparameter verwenden, der Pfade über mehrere URI-Ordnergrenzen (Schrägstriche) hinweg erfasst. Stellen Sie dem Routenparameternamen ein Sternchen (*) als Präfix voran, um den Routenparameter als catch-all-Parameter zu kennzeichnen:
@page "/FavoritePizza/{*favorites}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizzas are: @Favorites</p>
@code {
[Parameter]
public string Favorites { get; set; }
}
Mit dem gleichen Anforderungs-URI zeigt die Seite nun Folgendes an: Your favorite pizzas are: margherita/hawaiian (Ihre Lieblingspizzas sind: Margherita/Hawaii).