Nello script precedente (https://www.aspitalia.com/script/1390/Creare-Link-Fortemente-Tipizzati-Blazor.aspx) abbiamo visto come replicare in Blazor una peculiarità già esistente in ASP.NET Core, ossia la generazione degli URL in maniera fortemente tipizzata: il beneficio è ovviamente quello di limitare al massimo l'utilizzo di stringhe, realizzando un link specificando il tipo del componente che vogliamo visualizzare, e lasciando al nostro oggetto l'incombenza di determinare l'URL in base a quanto impostato sul componente stesso.

Un limite che dobbiamo ora colmare è quello di supportare URL con parametri. Immaginiamo per esempio, che il classico Counter del template di Blazor ammetta un URL di questo tipo, con cui specificare il valore di partenza:

@page "/contatore/{start:int}"

<h1>Counter</h1>

<p>Current count: @Start</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

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

    private void IncrementCount()
    {
        this.Start++;
    }
}

Per gestire questa casistica, possiamo aggiungere un overload del metodo GetUrl che possiamo invocare passando un anonymous object:

<li class="nav-item px-3">
    <NavLink class="nav-link" href="@(RouteHelper.GetUrl<Counter>(new { Start = 4 }))">
        <span class="oi oi-plus" aria-hidden="true"></span> Counter
    </NavLink>
</li>

Questo secondo overload, può essere realizzato sfruttando la classe RouteValueDictionary del package Microsoft.AspNetCore.Routing.Abstractions:

public static string GetUrl<TComponent>(object parameters)
    where TComponent : ComponentBase
{
    var properties = new RouteValueDictionary(parameters);

    string url = GetUrl<TComponent>();

    foreach (var key in properties.Keys)
    {
        url = Regex.Replace(url, $"{{{key}(:.+?)?}}", properties[key].ToString(), RegexOptions.IgnoreCase);
    }

    return url;
}

Questa classe, infatti, può essere inizializzata passando un object, ma funziona come un dictionary, popolando automaticamente le sue coppie chiave-valore con le proprietà dell'oggetto in input.

A questo punto possiamo sfruttare le regular expression per sostituire i token dell'URL. La regex che utilizziamo è la seguente, per esempio una volta sostituito il nome della proprietà "start":

{start(:.+?)?}

Questo pattern, per i meno avvezzi al linguaggio delle regex, si legge in questa maniera:

• inizia con una parentesi graffa aperta {;
• ha il testo "start", che rappresenta il nome del nostro parametro;
• segue un gruppo, tra parentesi tonde, che contiene un carattere ":", seguito da un numero arbitrario di caratteri. Questo gruppo rappresenta il tipo del parametro;
• dato che il tipo è opzionale, il ? al termine della parentesi indica che possa esistere o meno;
• il pattern termina con una parentesi graffa chiusa.

Nel prossimo script vedremo come colmare l'ultima lacuna del nostro codice, ossia gestire URL multipli sulle pagine per supportare parametri opzionali.