Directiva @page en Blazor: rutas y parámetros

La directiva @page asocia una plantilla de ruta con un componente Razor para que el enrutador pueda mostrarlo al visitar una URL.

Así, cuando el usuario visita /productos o /usuario/5, Blazor sabe qué componente debe renderizar. La ruta se declara al principio del archivo .razor.

Convertir un componente en una página

En Blazor, una página es un componente Razor con una ruta asociada.

La única diferencia es que una “Página” tiene una ruta asociada que permite llegar a ella directamente desde el navegador.

@page "/hola-mundo"

<h3>¡Hola desde una URL!</h3>

@code { ... }

Al añadir @page "/hola-mundo", el Router de Blazor registra este componente. Si navegas a https://tudominio.com/hola-mundo, verás este componente renderizado dentro del MainLayout.

Parámetros de ruta

Las URLs estáticas son aburridas. Lo normal es que necesitemos pasar información a través de la dirección, como un ID de producto o una categoría.

Para definir un parámetro variable, usamos llaves {NombreParametro} dentro de la cadena de la ruta.

Para capturar ese valor en nuestro código C#, debemos crear una propiedad pública con el atributo [Parameter] cuyo nombre coincida (insensible a mayúsculas) con el de la ruta.

@page "/producto/{ProductId}"

<h3>Detalle del Producto: @ProductId</h3>

@code {
    [Parameter]
    public string ProductId { get; set; }
}

Ahora, si entras en /producto/1050, la variable ProductId valdrá “1050”.

Restricciones y conversión de tipos

Para recibir un valor que no sea string, indicamos una restricción de tipo en la plantilla. El enrutador valida el segmento y lo convierte al tipo CLR correspondiente.

@page "/pedido/{OrderId:int}"

<p>Viendo pedido número: @OrderId</p>

@code {
    [Parameter]
    public int OrderId { get; set; } // Conversión automática de string a int
}

¿Qué pasa si el usuario escribe /pedido/tres? Como «tres» no es un entero, la ruta no coincide y la aplicación responde con la página de contenido no encontrado.

Más restricciones de ruta

A veces queremos ser más estrictos. Si tenemos una ruta /usuario/{Id} donde el ID debe ser un número, no queremos que la ruta coincida si alguien escribe /usuario/editar.

Podemos forzar el tipo de dato directamente en la definición de la ruta usando los dos puntos :.

@page "/usuario/{Id:int}"

@page "/documento/{Token:guid}"

@page "/filtro/{IsActive:bool}"

Esto es muy útil para la sobrecarga de rutas. Podrías tener:

• @page "/usuario/{Id:int}" -> Para ver perfil.
• @page "/usuario/nuevo" -> Para crear uno nuevo (no entra en conflicto porque “nuevo” no es int).

Parámetros opcionales

A veces un parámetro no es obligatorio. Por ejemplo, una ruta de búsqueda que puede tener o no un término. Desde .NET 5, podemos marcar un parámetro como opcional usando un interrogante ? al final.

@page "/catalogo/{Categoria?}"

<h3>
    @if (string.IsNullOrEmpty(Categoria))
    {
        <text>Mostrando todo el catálogo</text>
    }
    else
    {
        <text>Filtrando por: @Categoria</text>
    }
</h3>

@code {
    [Parameter]
    public string? Categoria { get; set; }
}

Varias rutas para un componente

Un mismo componente puede responder a varias URLs diferentes. Simplemente añadimos múltiples directivas @page.

Esto es muy útil para migrar URLs antiguas o para proporcionar valores por defecto “simulados”.

@page "/perfil"
@page "/perfil/{UserId:int}"

<h3>Perfil @(UserId.HasValue ? $"de {UserId}" : "Propio")</h3>

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

1. Si entro en /perfil -> UserId es null.
2. Si entro en /perfil/5 -> UserId es 5.

Parámetros catch-all

Hay situaciones donde queremos capturar todo el resto de la URL, independientemente de cuántos segmentos tenga. Esto es típico en gestores de contenido (CMS) o gestores de archivos.

Se usa la sintaxis {*nombreVariable}.

@page "/archivos/{*Path}"

<p>Estás navegando en: @Path</p>

@code {
    [Parameter]
    public string? Path { get; set; }
}

• URL: /archivos/fotos/vacaciones/2023.jpg
• Valor de Path: fotos/vacaciones/2023.jpg

Parámetros de query string

Hasta ahora hemos hablado de rutas (/producto/5). Pero, ¿qué pasa con los parámetros de consulta tipo /producto?id=5&color=rojo?

El componente Router no utiliza la query string para elegir una ruta. Para recibir sus valores usamos [SupplyParameterFromQuery] en las propiedades correspondientes.

@page "/buscar"

<p>Buscando: @Termino en página @Pagina</p>

@code {
    [SupplyParameterFromQuery(Name = "q")] // Mapea ?q=...
    public string? Termino { get; set; }

    [SupplyParameterFromQuery] // Si no pones Name, usa el nombre de la propiedad
    public int Pagina { get; set; }
}

Si entramos en /buscar?q=blazor&pagina=2, las propiedades se rellenarán automáticamente.