Usare il componente router Blazor per controllare lo spostamento all'interno dell'app
- 5 minuti
Il sistema di routing in Blazor offre opzioni flessibili per garantire che le richieste degli utenti raggiungano un componente in grado di gestirle e restituire le informazioni desiderate dall'utente.
Si supponga di lavorare al sito Web di una pizzeria che fa pizze da asporto. Si vuole configurare il sito in modo che le richieste dei dettagli delle pizze e dei dettagli dei condimenti personalizzati vengano gestiti dallo stesso componente. Questa fase è stata completata, ma in fase di test si scopre che le richieste relative ai condimenti ricevono un messaggio di errore. È necessario risolvere il problema.
In questo articolo viene descritto come configurare le route in Blazor usando la direttiva @page.
Nota
I blocchi di codice in questa unità sono esempi illustrativi. Nell’unità successiva, si scrive il proprio codice.
Usare modelli di route
Quando effettua una richiesta per una pagina dall'app Web, l'utente può specificare ciò che vuole visualizzare con le informazioni nell'URI. Ad esempio:
http://www.contoso.com/pizzas/margherita?extratopping=pineapple
Dopo il protocollo e l'indirizzo del sito Web, questo URI indica che l'utente vuole informazioni sulle pizze margherita. Inoltre, la stringa di query dopo il punto interrogativo mostra che l'utente è interessato all'aggiunta di ananas. In Blazor si usa il routing per garantire che ogni richiesta venga inviata al componente che può rispondere al meglio. È anche possibile usare il routing per garantire che il componente disponga di tutte le informazioni necessarie per visualizzare gli elementi desiderati dall'utente. In questo caso, si vuole inviare la richiesta al componente Pizzas e che tale componente visualizzi una pizza margherita con informazioni sull'aggiunta di ananas.
Blazor instrada le richieste con un componente specializzato denominato Router. Il componente è configurato in App.razor come segue:
<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>
All'avvio dell'app, Blazor controlla l'attributo AppAssembly per scoprire quale assembly deve analizzare. Analizza l'assembly alla ricerca di componenti contenenti RouteAttribute. Blazor usa questi valori per compilare un oggetto RouteData che specifica come vengono instradate le richieste ai componenti. Quando si scrive il codice dell'app, usare la direttiva @page in ogni componente per correggere RouteAttribute.
Nel codice precedente il tag <Found> specifica il componente che gestisce il routing in fase di esecuzione, vale a dire il componente RouteView. Questo componente riceve l'oggetto RouteData e tutti i parametri dall'URI o dalla stringa di query. Esegue quindi il rendering del componente specificato e del relativo layout. È possibile usare il tag <Found> per specificare un layout predefinito, che viene usato quando il componente selezionato non specifica un layout con la direttiva @layout. Altre informazioni sui layout vengono fornite più avanti in questo modulo.
Nel componente <Router> è possibile specificare anche ciò che viene restituito all'utente quando non viene trovata una route corrispondente. In questo caso si usa il tag <NotFound>. L'esempio precedente restituisce un singolo paragrafo <p>, ma è possibile eseguire il rendering di HTML più complesso. Ad esempio, potrebbe includere un collegamento alla home page o a una pagina di contatto per gli amministratori del sito.
Usare la direttiva @page
In un componente Blazor, la direttiva @page specifica che il componente deve gestire le richieste direttamente. È possibile specificare un elemento RouteAttribute nella direttiva @page passandolo come stringa. Ad esempio, questo attributo specifica che la pagina gestisce le richieste per la route /Pizzas:
@page "/Pizzas"
Per specificare più route per il componente, usa due o più direttive @page, come in questo esempio:
@page "/Pizzas"
@page "/CustomPizzas"
Acquisire informazioni sulla posizione e spostarsi con NavigationManager
Si supponga di scrivere un componente per gestire l’URI che l'utente richiede, ad esempio http://www.contoso.com/pizzas/margherita/?extratopping=pineapple.
Quando si scrive un componente, potrebbe essere necessario accedere a informazioni di spostamento come:
- L'URI completo corrente, ad esempio
http://www.contoso.com/pizzas/margherita?extratopping=pineapple. - L'URI di base, ad esempio
http://www.contoso.com/. - Il percorso relativo di base, ad esempio
pizzas/margherita. - La stringa di query, ad esempio
?extratopping=pineapple.
È possibile usare un oggetto NavigationManager per ottenere tutti questi valori. È necessario inserire l'oggetto nel componente e successivamente si può accedere alle relative proprietà. Questo codice usa l'oggetto NavigationManager per ottenere l'URI di base del sito Web e quindi lo usa per impostare un collegamento alla home page:
@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;
}
}
Per accedere alla stringa di query, è necessario analizzare l'URI completo. Per eseguire questa analisi, usare la classe QueryHelpers dell’assembly Microsoft.AspNetCore.WebUtilities:
@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);
}
}
}
Con il componente precedente distribuito, se un utente richiedesse l'URI http://www.contoso.com/pizzas?extratopping=Pineapple, visualizzerebbe il messaggio "Voglio aggiungere questo condimento: Ananas" nella pagina risultante dal rendering.
È anche possibile usare l'oggetto NavigationManager per indirizzare gli utenti a un altro componente nel codice chiamando il metodo NavigationManager.NavigateTo():
@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");
}
}
Nota
La stringa che si passa al metodo NavigateTo() è l'URI assoluto o relativo a cui si vuole indirizzare l'utente. Assicurarsi che vi sia un componente configurato a tale indirizzo. Nel codice precedente un componente con la direttiva gestisce questa @page "/buypizza" route.
Usare componenti NavLink
In uno degli esempi precedenti, il codice è stato usato per ottenere il valore NavigationManager.BaseUri e usarlo per impostare l'attributo href di un tag <a> alla home page. In Blazor, usare il componente NavLink per eseguire il rendering dei tag <a> in quanto passa a una classe CSS active quando l'attributo href del collegamento corrisponde all'URL corrente. Impostando lo stile della classe active, è possibile chiarire all'utente quale collegamento di spostamento è per la pagina corrente.
Quando si usa NavLink, l'esempio di collegamento alla home page è simile al codice seguente:
@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;
}
}
L'attributo Match nel componente NavLink viene usato per gestire quando il collegamento viene evidenziato. Sono disponibili due opzioni:
-
NavLinkMatch.All: quando si usa questo valore, il collegamento viene evidenziato come collegamento attivo solo quando
hrefcorrisponde all'intero URL corrente. -
NavLinkMatch.Prefix: quando si usa questo valore, il collegamento viene evidenziato come attivo quando
hrefcorrisponde alla prima parte dell'URL corrente. Si supponga, ad esempio, di avere il collegamento<NavLink href="pizzas" Match="NavLinkMatch.Prefix">. Questo collegamento verrebbe evidenziato come attivo quando l'URL corrente fossehttp://www.contoso.com/pizzase per qualsiasi posizione all'interno di tale URL, ad esempiohttp://www.contoso.com/pizzas/formaggio. Questo comportamento aiuta l'utente a comprendere quale sezione del sito Web sta attualmente visualizzando.