Использование параметров URL в Blazor

При разработке приложений в Blazor бывает необходимым получать значения свойств компонентов не только из параметров маршрута, но и использовать для сохранения/передачи состояния компонента параметры запроса (URL Query Parameters). Например, использование параметров URL в Blazor может потребоваться для фильтрации данных перед выводом их на экран. В этом случае, URL может выглядеть, например, так http://localhost:5001/component/1?filter=a&filter2=b… Рассмотрим, как использовать параметры URL в Blazor.

Вариант для Blazor .NET 5

На примере демонстрационного компонента Blazor Counter чтение параметров URL можно организовать, например, таким способом:

@page "/counter"

@inject NavigationManager _navigation

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;


    protected override void OnParametersSet()
    {
        Uri uri = new(_navigation.Uri);
        var queryDictionary = System.Web.HttpUtility.ParseQueryString(uri.Query);
        string count = queryDictionary.Get("count");
        if (!string.IsNullOrEmpty(count))
        {
            currentCount = int.Parse(count);
        }
    }

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

Во-первых, здесь мы используем NavigationManager, чтобы получить URI запроса. Далее, мы переопределяем метод компонента OnParametersSet в котором, используя класс HttpUtility, преобразуем строку с параметрами запроса в коллекцию типа NameValueCollection. После этого, проверяем есть ли в коллекции пара с заданным ключом и пробуем преобразовать значение этой пары в значение типа int и присвоить это значение свойству currentCount.

Работающий пример будет выглядеть, например, так:

То есть, после того как мы передаем в URL параметр count, счётчик получает переданное значение. В принципе, подход рабочий, хоть и требует написание дополнительного кода. В .NET 6 появилась новая возможность работы с параметрами URL в Blazor — с использованием атрибутов.

Вариант для Blazor .NET 6

Тот же самый пример со счётчиком можно переписать в .NET 6 следующим образом:

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

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

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

@code {
    [SupplyParameterFromQuery(Name ="count")]
    [Parameter]
    public int? currentCount { get; set; } = 0;

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

Здесь мы уже не используем NavigationManager, но, вместо этого, используем новый атрибут в .NET 6 — SupplyParameterFromQuery. Этот атрибут можно использовать только для свойств компонента. То есть такой код приведет к ошибке:

[SupplyParameterFromQuery(Name ="count")]
private int currentCount = 0;

Поэтому поле currentCount мы сделали параметром компонента Blazor. Если указать атрибут SupplyParameterFromQuery без свойства Name, то это будет подразумевать, что строка параметров URL должна содержать параметр с именем, совпадающим с названием свойства компонента.

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

Итого

Для использования параметров URL в Blazor мы можем воспользоваться как своим кодом, например, на основе использования классов NavigationManager и HttpUtility, так и, начиная с .NET 6, использовать специальный атрибут SupplyParameterFromQuery для указания того, что значение параметра компонента Blazor должно получаться из параметров URL.