当绑定的 blazor 组件属性发生更改时，如何将搜索字符串从输入字段传递到查询参数？

Question

当用户在输入文本字段中输入内容时，如何实时更新URL中的请求参数？

这是我所拥有的一个简单示例：

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

<PageTitle>Home</PageTitle>
<h1>Search Persons</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, "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();

}

如您所见，当用户在过滤器中输入值时，URL 中没有任何变化。 但在这种情况下，预计会在那里看到

https://localhost:44332/?search=J

。

Answer 1

答案很简单。你只需要在更改参数后添加一个

Callback

并应用方法

NaigationManager.Navigate(string uri, bool forceLoad = false, bool replace = false)

即可。还建议使用

bool replace = true

参数，以免过滤器中的每个新字母使浏览器页面历史记录过载。

仅更改查询参数，页面不会重新加载。

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

<PageTitle>Home</PageTitle>
<h1>Search Persons</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 Person[]
    {
        /*Sample data*/
    }.AsQueryable();

    private void Callback()
    {
        var url = NavMan.GetUriWithQueryParameter(nameof(SearchString), SearchString);
        NavMan.NavigateTo(url);
    }

}