Blazor中如何将文本框输入变量动态写入URL域名后缀

实现方案 #

你可以通过Blazor的路由参数绑定+NavigationManager动态更新URL的方式实现需求，无需刷新页面即可修改地址栏路径，同时打开分享链接时自动读取参数加载查询结果，完整实现代码如下：

@page "/{ErrorCode?}"
@inject NavigationManager NavManager

<!-- 输入框绑定，输入完成后自动更新URL并触发查询 -->
<input @bind="ErrorCode" @bind:after="UpdateUrlAndQuery" placeholder="请输入错误码"/>

<br/>
<br/>
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    @if (QueryResult != null && QueryResult.Any())
    {
        @foreach (var data in QueryResult)
        {
            <tr>
                <td>@data.Col1</td>
                <td>@data.Col2</td>
                <td>@data.Col3</td>
            </tr>
        }
    }
</table>

@code {
    // 绑定路由路径参数，?代表参数可选
    [Parameter]
    public string? ErrorCode { get; set; }
    
    // 你的查询结果数据集，替换为你自己的业务模型
    private List<DataModel>? QueryResult { get; set; }

    // 路由参数变化时（包括首次打开页面）自动触发查询
    protected override async Task OnParametersSetAsync()
    {
        if (!string.IsNullOrWhiteSpace(ErrorCode))
        {
            await GetDataFromDb();
        }
    }

    // 输入框值变化后更新URL+触发查询
    private async Task UpdateUrlAndQuery()
    {
        if (!string.IsNullOrWhiteSpace(ErrorCode))
        {
            // 对特殊字符编码避免URL识别错误
            var encodedCode = Uri.EscapeDataString(ErrorCode);
            // 仅更新URL不刷新页面
            NavManager.NavigateTo($"/{encodedCode}", forceLoad: false);
            await GetDataFromDb();
        }
        else
        {
            // 输入为空时回到根路径清空结果
            NavManager.NavigateTo("/", forceLoad: false);
            QueryResult = null;
        }
    }

    // 替换为你自己的数据库查询逻辑
    private async Task GetDataFromDb()
    {
        // 示例：await dbContext.ErrorCodes.Where(x => x.Code == ErrorCode).ToListAsync();
        await Task.CompletedTask;
    }

    // 替换为你自己的数据结构
    public class DataModel
    {
        public string Col1 { get; set; }
        public string Col2 { get; set; }
        public string Col3 { get; set; }
    }
}

注意事项 #

• 如果你的项目不是部署在域名根目录，需要修改NavigateTo的路径前缀，比如部署在/errorquery/目录下就改为$"/errorquery/{encodedCode}"
• 如果需要用查询参数格式?errorCode=xxx，仅需要修改路由规则和URL拼接规则即可，整体逻辑不变

内容的提问来源于stack exchange，提问作者MaxB