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.

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.

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.

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, der für den Routenparameter bereitgestellt wird, wird als Routeinschränkung bezeichnet. Sie können diese anderen Typen in einer Einschränkung verwenden:

Festlegen eines universellen 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 ein Benutzer versucht, zwei Favoriten durch 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).