Hasta Blazor 6, daba la impresión de que la query string era un ciudadano de segunda clase en el sistema de routing, pues no se ofrecían mecanismos sencillos para la obtención de parámetros suministrados a través de esta vía, ni tampoco para la generación de URI que los utilizaran. De hecho, estas tareas teníamos que solucionarlas manualmente, aunque fuera con ayuda de paquetes externos como Microsoft.AspNetCore.WebUtilities.

Ya con la llegada de esta versión, Blazor incorpora de serie herramientas que nos harán esto más llevadero, como su integración con el binding o, lo que veremos en este post, la posibilidad de generar direcciones que incluyan este tipo de parámetros.

Para generar rutas con parámetros de query string debemos utilizar el servicio NavigationManager que ya conocemos, al que se se han añadido los métodos GetUriWithQueryParameters() y GetUriWithQueryParameter() para tal fin.

El método GetUriWithQueryParameters() genera una URI, incluyendo en su query string los parámetros que le suministremos en forma de diccionario clave-valor. En el siguiente código, por ejemplo, vemos cómo utilizar este método para generar una URI apuntando hacia la misma página actual, estableciéndole valores para tres parámetros de query string Search, Page y PageSize, y luego usando el método NavigateTo() para mover al usuario a ella:

@page "/search"

<ul>
    <li>Search: @Search</li>
    <li>Page: @Page</li>
    <li>PageSize: @PageSize</li>
</ul>
<button @onclick="SearchComputersClick">Search computers</button>

@code {
    [Parameter, SupplyParameterFromQuery]
    public string? Search { get; set; }

    [Parameter, SupplyParameterFromQuery]
    public int? Page { get; set; }

    [Parameter, SupplyParameterFromQuery]
    public int? PageSize { get; set; }

    void SearchComputersClick()
    {
        var dict = new Dictionary<string, object>()
        {
            { "search", "computers" },
            { "sage", 1 },
            { "sageSize", 20 },
        };
        var uri = NavManager.GetUriWithQueryParameters(dict);
        NavManager.NavigateTo(uri);
    }
}

Observad también el uso de [SupplyParameterFromQuery] para recuperar estos parámetros de forma muy sencilla en las propiedades del componente.

Aunque GetUriWithQueryParameters() por defecto tomará como punto de partida la URI de la página actual (NavigationManager.Uri), es posible indicarle una distinta usando otra de sus sobrecargas, como en el siguiente ejemplo:

var dict = new Dictionary<string, object>()
{
    { "search", "computers" },
    ... // Otras entradas del diccionario
};

// Podemos usar como base direcciones relativas al sitio:
var uri = NavManager.GetUriWithQueryParameters("/catalog", dict);
// O incluso direcciones absolutas externas:
var uri = NavManager.GetUriWithQueryParameters("https://google.es", dict);
...

Por supuesto, este método lidiará internamente con aspectos como la codificación URL, que se realizará de forma automática:

var dict = new Dictionary<string, object>()
{
    { "search", "Tom & Jerry" },
};
var uri = NavManager.GetUriWithQueryParameters("/catalog", dict);
// Returns: /catalog?search=Tom%20%26%20Jerry

El método GetUriWithParameters() no sólo añade parámetros de query string. También puede modificarlos o eliminarlos cuando partimos de una ruta que ya contenía parámetros de este tipo, aplicando una lógica bastante útil:

• Si el diccionario añade parámetros que no se encontraban previamente en la URI original, se añaden a la dirección resultante:

var dict = new Dictionary<string, object>()
{
    { "search", "computers" }
};
var initial = "/catalog";
var uri = NavManager.GetUriWithQueryParameters(initial, dict);
// uri => /catalog?search=computers

• Si la URL original incluye parámetros que no son sobrescritos en el diccionario, se mantienen:

var dict = new Dictionary<string, object>()
{
    { "page", "12" }
};
var initial = "/catalog?search=computers";
var uri = NavManager.GetUriWithQueryParameters(initial, dict);
// uri => /catalog?search=computers&page=12

• Si la URI original incluye parámetros que son sobrescritos en el diccionario, se machaca el valor:

var dict = new Dictionary<string, object>()
{
    { "search", "computers" },
    { "page", "12" },
};
var initial = "/catalog?search=tv&page=1&pageSize=20";
var uri = NavManager.GetUriWithQueryParameters(initial, dict);
// uri => /catalog?search=computers&page=12&pageSize=20

• Si la URI original incluye parámetros que son establecidos con valores nulos en el diccionario, se eliminan de la query string:

var dict = new Dictionary<string, object>()
{
    { "page", null },
    { "pageSize", null}
};
var initial = "/catalog?search=computers&page=1&pageSize=20";
var uri = NavManager.GetUriWithQueryParameters(initial, dict);
// uri => /catalog?search=computers

Por último, cabe destacar que, para evitar el uso de un diccionario cuando únicamente queremos modificar uno de los parámetros, podemos utilizar el método GetUriWithQueryParameter():

<button @onclick="IncrementPage">Next page</button>
@code {
    [Parameter, SupplyParameterFromQuery]
    public int Page { get; set; }

    void IncrementPage()
    {
        Page++;
        // Actualizamos solo el parámetro "page", dejando el resto intacto:
        var uri = NavManager.GetUriWithQueryParameter("page", Page);

        // Y navegamos a la nueva URI:
        NavManager.NavigateTo(uri);
    }

}

Publicado en Variable not found.