Как передать строку поиска из поля ввода в параметры запроса, когда изменилось свойство связанного компонента Blazor?

Вопрос или проблема

@page "/"
@rendermode InteractiveServer
@using Microsoft.AspNetCore.Components.QuickGrid

<PageTitle>Главная</PageTitle>
<h1>Поиск персон</h1>
@* <search @bind="SearchString" @bind:event="oninput"/> *@
<input type="search" name="searchString" @bind="SearchString" @bind:event="oninput">
<QuickGrid TGridItem="Person" Items="FilteredPersons">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true"/>
    <PropertyColumn Property="@(p => p.Name)" Sortable="true"/>
    <PropertyColumn Property="@(p => p.BirthDate)" Sortable="true"/>
</QuickGrid>

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

    private IQueryable<Person> FilteredPersons =>
        _persons.Where(m => m.Name.Contains(SearchString ?? string.Empty, StringComparison.InvariantCultureIgnoreCase));

    private record Person(int PersonId, string Name, DateOnly BirthDate);

    private readonly IQueryable<Person> _persons = new[]
    {
        new Person(10895, "Жан Мартин", new DateOnly(1985, 3, 16)),
        new Person(10944, "Антониу Ланга", new DateOnly(1991, 12, 1)),
        new Person(11203, "Джули Смит", new DateOnly(1958, 10, 10)),
        new Person(11205, "Нур Сари", new DateOnly(1922, 4, 27)),
        new Person(11898, "Хосе Эрнандес", new DateOnly(2011, 5, 3)),
        new Person(12130, "Кендзи Сато", new DateOnly(2004, 1, 9)),
    }.AsQueryable();

}

.

Ответ или решение

Для достижения цели обновления параметров URL в вашем Blazor приложении при изменении значения в текстовом поле, необходимо внести некоторые коррективы в вашу реализацию. Рассмотрим, как можно использовать встроенные возможности для работы с параметрами запроса в Blazor, в частности в вашем случае с использованием свойства SearchString.

Обновление параметров URL в Blazor

Чтобы обновить строку запроса в URL, вы можете использовать метод NavigationManager.NavigateTo(). Этот метод позволяет динамически изменять текущий URL и обновить его, не перезагружая страницу. Вот шаги, которые нужно предпринять:

1. Используйте NavigationManager для обновления URL: Вам нужно внедрить NavigationManager в ваш компонент, что позволит вам изменять URL по мере необходимости.

2. Добавьте обработчик для изменения строки поиска: Создайте метод, который будет вызван при изменении значения в текстовом поле. Этот метод должен обновить строку поиска и вызвать NavigateTo().

Пример реализации

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

@page "/"
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.QuickGrid

<PageTitle>Home</PageTitle>
<h1>Search Persons</h1>
<input type="search" name="searchString" @bind="SearchString" @bind:event="oninput" @oninput="OnSearchInput">

<QuickGrid TGridItem="Person" Items="FilteredPersons">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.BirthDate)" Sortable="true" />
</QuickGrid>

@code {
    [Inject] 
    private NavigationManager Navigation { get; set; }

    [Parameter, SupplyParameterFromQuery] 
    public string? SearchString { get; set; }

    private IQueryable<Person> FilteredPersons =>
        _persons.Where(m => m.Name.Contains(SearchString ?? string.Empty, StringComparison.InvariantCultureIgnoreCase));

    private record Person(int PersonId, string Name, DateOnly BirthDate);

    private readonly IQueryable<Person> _persons = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();

    private void OnSearchInput(ChangeEventArgs e)
    {
        SearchString = e.Value?.ToString();
        var queryString = string.IsNullOrEmpty(SearchString) ? "" : $"?searchString={SearchString}";
        Navigation.NavigateTo(queryString, forceLoad: false);
    }
}

Объяснение изменений

• Внедрение NavigationManager: Мы добавили атрибут [Inject], чтобы иметь возможность использовать NavigationManager в компоненте.

• Метод OnSearchInput: Этот метод вызывается при каждом изменении в текстовом поле. Мы получаем новое значение SearchString, формируем строку запроса и обновляем URL.

• Обновление URL: Метод NavigateTo принимает формируемую строку запроса и автоматически обновляет URL, сохраняя состояние страницы. Параметр forceLoad установлен в false, что позволяет избежать полной перезагрузки страницы.

Важные замечания

• Убедитесь, что ваша версия Blazor поддерживает используемые функции.
• Также обращайте внимание на обработку пустых строк, чтобы избежать ошибок при генерации запроса.

Следуя этим шагам, вы сможете динамически обновлять параметры URL, когда пользователь вводит значение в поле поиска, что значительно улучшает пользовательский интерфейс вашего приложения.