Blazor中如何在绑定属性变化时将输入框搜索字符串实时同步到URL查询参数

这个问题我之前也碰到过，Blazor里的SupplyParameterFromQuery默认只能把URL的查询参数同步到组件属性，反过来属性变化时不会自动更新URL，得我们手动处理导航来实现实时同步～

核心思路 #

要实现输入内容实时同步到URL，我们需要：

• 注入NavigationManager来操作浏览器URL
• 在搜索字符串属性变化时，手动更新URL的查询参数
• 避免初始化或URL导航时触发重复的更新操作

修改后的完整代码 #

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

<PageTitle>Home</PageTitle>
<h1>Search Persons</h1>
<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{
    private bool _isInitializing = true;
    private string? _searchString;

    [Parameter, SupplyParameterFromQuery(Name = "search")] 
    public string? SearchString 
    { 
        get => _searchString; 
        set 
        {
            if (_searchString != value)
            {
                _searchString = value;
                // 初始化阶段不触发URL更新，避免循环导航
                if (!_isInitializing)
                {
                    UpdateQueryParameters();
                }
            }
        }
    }

    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();

    protected override void OnInitialized()
    {
        // 初始化完成后，允许触发URL更新
        _isInitializing = false;
        base.OnInitialized();
    }

    private void UpdateQueryParameters()
    {
        // 获取当前URL的绝对路径和查询参数
        var currentUri = NavManager.ToAbsoluteUri(NavManager.Uri);
        var queryBuilder = new QueryBuilder(currentUri.Query);

        // 更新或移除查询参数：如果搜索字符串为空则移除，否则设置为对应值
        if (string.IsNullOrEmpty(SearchString))
        {
            queryBuilder.Remove("search");
        }
        else
        {
            queryBuilder["search"] = SearchString;
        }

        // 构建新的URL并导航（forceLoad: false 避免整页刷新）
        var newUri = currentUri.GetLeftPart(UriPartial.Path) + queryBuilder.ToQueryString();
        NavManager.NavigateTo(newUri, forceLoad: false);
    }
}

关键细节说明 #

• 注入NavigationManager：这是Blazor中用来管理导航和URL的核心服务，我们用它来读取当前URL并生成新的URL。
• 属性Setter的处理：把SearchString改成带私有字段的属性，在setter里判断值变化后触发URL更新，同时用_isInitializing标志避免组件初始化时的重复导航（因为初始化时SupplyParameterFromQuery会从URL读取值设置属性，这时候不需要再更新URL）。
• QueryBuilder的使用：QueryBuilder是Blazor提供的便捷工具，用来安全地构建和修改URL查询参数，避免手动拼接字符串出现编码问题。
• NavigateTo的forceLoad参数：设置为false时会使用客户端导航，不会刷新整个页面，保持交互体验的流畅性。
• SupplyParameterFromQuery的Name属性：这里设置为"search"，让URL中的参数名和你期望的?search=J一致，如果你想用原来的searchString作为参数名，可以去掉这个Name设置。

这样修改后，用户在输入框中实时输入内容时，URL的查询参数就会同步更新啦～

备注：内容来源于stack exchange，提问作者GoodSimon