Передача данных через строку запроса

Для передачи данных в компонент Razor с использованием URL необязательно использовать параметры в шаблоне маршрута — для передачи некоторых типов данных мы можем задействовать строку запроса.

Поддерживаемые типы данных

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

• bool, DateTime, decimal, double, float, Guid, int, long, string.
• обнуляемые варианты предыдущих типов.
• массивы предыдущих типов, независимо от того, являются ли они обнуляемыми или нет.

Атрибут [SupplyParameterFromQuery]

Атрибут [SupplyParameterFromQuery] имеет всего одно свойство Name с помощью которого можно указать имя параметра из строки запроса значение которого будет передано в параметр компонента Razor. Если свойство Name не указано, то ищется параметр компонента с тем же именем (без учета регистра), что и имя параметра из строки запроса.

Например, создадим новое приложение Blazor Hybrid и изменим компонент Counter следующим образом:

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @CurrentCount</p>

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

@code {
    [Parameter]
    [SupplyParameterFromQuery(Name = "Count")]
    public int CurrentCount { get; set; }

    private void IncrementCount()
    {
        CurrentCount++;
    }
}

Здесь мы указываем для параметра CurrentCount атрибут с именем Count. Теперь перейдем в компонент NavMenu и поменяем ссылку на страницу счётчика следующим образом:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="counter?count=100">
        <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
    </NavLink>
</div>

здесь мы задали строку запроса:

href="counter?count=100"

Запустим приложение и убедимся, что значение параметра компонента Razor было получено из строки запроса:

Передача массива через строку запроса

Выше было указано, что через строки запросов мы можем передавать массивы. Чтобы передать массив через строку запроса мы должны использовать несколько параметров запроса с одним и тем же именем. Например, изменим компонент Home следующим образом:

@page "/"

<h1>Hello, world!</h1>

@if (Strings != null)
{
    foreach (var s in Strings)
    {
       <p>@s</p>   
    }
}

Welcome to your new app.

@code{
    [Parameter]
    [SupplyParameterFromQuery(Name = "string")]
    public string[]? Strings { get; set; }
}

Здесь параметр компонента Strings — это массив строк. Значения этого параметра будут получаться из строки запроса, а именно — из параметра с именем string. Изменим ссылку на страницу Home в компоненте NavMenu следующим образом:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="?string=Привет&string=мир" Match="NavLinkMatch.All">
        <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
    </NavLink>
</div>

Обратите внимание на то, как задана строка запроса:

?string=Привет&string=мир

мы использовали два параметра с одним и тем же именем. Теперь запустим приложение и посмотрим на результат:

Как можно видеть, значения для массива были получены из строки запроса.

Итого

Передача данных через строку запроса в Blazor может применяться для некоторых типов данных, таких как числа, строки, дата и т.д. Для того, чтобы параметр компонента Razor получал значение из строки запроса, для такого параметра определяется атрибут [SupplyParameterFromQuery].