Параметры маршрутов

Последнее обновление: 30.11.2023

Маршруты могут определять параметры, через которые мы можем передавать компоненту какие-то данные извне. Например, пусть у нас в проекте есть компонент User:

Передача параметров маршрутов компонентам Blazor на C#

Пусть в компоненте User определен следующий код:

@page "/user/{name}"

<h2>Hello, @Name</h2>

@code{
    [Parameter]
    public string Name { get; set; } = "";
}

Данный компонент сопоставляется с маршрутом "/user/{name}". Второй сегмент этого маршрута - {name} представляет параметр маршрута, который в данном случае называется name. Параметры определяются в фигурных скобках.

Чтобы получить значение этого параметра в компоненте определено свойство-параметр Name. По умолчанию между параметрами маршрута и свойством компонента должно быть соответствие по имени, при этом регистр не учитывается.

В компоненте App определим стандартный код для обработки маршрутизации:

@using Microsoft.AspNetCore.Components.Routing 

<!DOCTYPE html>
<html>
<head>
    <title>METANIT.COM</title>
    <meta charset="utf-8" />
    <base href="/" />
</head>
<body>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="routeData" />
        </Found>
    </Router>
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

В итоге при запросах типа "user/Tom" компонент User получит через свойство Name параметр name - второй сегмент.

получение параметров марщрутов в компонентах Blazor в C#

Подобным образом можно определять большее количество параметров маршрута. Например, изменим код компонента User, чтобы он принимал еще один параметр - "age":

@page "/user/{name}/{age}"

<h2>Hello, @Name</h2>
<h3>Your age: @Age</h3>

@code {
    [Parameter]
    public string Name { get; set; } = "";

    [Parameter]
    public string? Age { get; set; }
}

Теперь с помощью третьего сегмента маршрута мы можем передать значение для свойства Age:

связь параметров марщрутов и свойств компонентах Blazor в C#

Ограничения параметров

В примере выше свойство Age представляет тип string, однако по сути возраст представляет число. А пример выше позволяет передать произвольную строку. Но, допустим, мы хотим, чтобы Age также представляло число, например, типа int. В этом случае к параметру маршрута age надо применить ограничение:

@page "/user/{name}/{age:int}"

<h2>Hello, @Name</h2>
<h3>Your age: @Age</h3>

@code {
    [Parameter]
    public string Name { get; set; } = "";

    [Parameter]
    public int Age { get; set; }
}

Ограничение указывается после названия параметра через двоеточие:

{age:int}

То есть в данном случае параметру age надо передать число типа int. Например:

https://localhost:7134/user/Tom/38

Если же мы передадим параметру age нечисловое значение:

https://localhost:7134/user/Tom/one

то система маршрутизации просто не сможеь сопоставить данный запрос с компонентом User. Соответственно компонент User не будет обрабатывать данный запрос.

Подобным образом мы можем использовать ряд других ограничений, которые устанавливают тип параметра:

  • bool

  • datetime

  • decimal

  • double

  • float

  • guid

  • int

  • long

Необязательные параметры

Параметры могут быть необязательными. То есть мы можем передать им значения, а можем их опустить. Чтобы определить параметр как необязательный, после него указывается вопросительный знак ?. Например, определим следующий компонент User:

@page "/user/{name}/{age:int?}"

<h2>Hello @Name</h2>
@if(Age != null)
{
    <h3>Your age: @Age</h3>
}

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

    [Parameter]
    public int? Age { get; set; }
}

Здесь параметр age определен как необязательный. Если мы не передадим ему значение, то свойство Age будет иметь значение по умолчанию - null. Соответственно мы можем передать значение параметру age, а можем и не передавать:

Необязательные параметры компонентов Blazor в C#

Подобным образом можно сделать и параметр name необязательным

@page "/user/{name?}/{age:int?}"

<h2>Hello @Name</h2>
@if(Age != null)
{
    <h3>Your age: @Age</h3>
}

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

    [Parameter]
    public int? Age { get; set; }
}

Параметр сatch-all

Параметр catch-all или общий параметр позволяет передать произвольное количество отдельных параметров в виде одного. Название такого параметра предваряется звездочкой *. Например, определим в компоненте User следующий код:

@page "/user/{*info}"

<div>@Info</div>

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

Здесь компонент info определен как общий, который будет собирать все остальные сегменты. Например, для адреса "https://localhost:7134/user/Sam" параметр info равен строке "Sam", а для запроса "https://localhost:7134/user/Bob/42" параметр info будет иметь значение "Bob/42".

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850