Blazor页面跳转时如何通过URL传递字符串列表参数

阿华AIGC实验室

2026-4-29

解决Blazor页面跳转传递字符串列表参数的问题

你当前遇到的问题主要有两个原因：一是直接把列表对象拼到URL里时，它默认调用ToString()方法，返回的是类型名称而非实际元素；二是Blazor的路由参数无法直接绑定IEnumerable<string>这种集合类型，会导致类型转换失败。下面给你两种可行的解决方案：

方案一：通过路由参数传递逗号分隔的字符串

这种方法适合元素不含逗号的场景，URL结构更简洁：

1. 修改目标页面（page1）代码

把路由参数改为字符串类型，再在初始化时拆分为列表：

@page "/page1/{filterValues?}" <!-- 加?表示参数可选 -->

@code {
    [Parameter]
    public string? FilterValues { get; set; }

    public IEnumerable<string> FilterList { get; private set; } = Enumerable.Empty<string>();

    protected override void OnInitialized()
    {
        if (!string.IsNullOrEmpty(FilterValues))
        {
            // 解码并拆分字符串，处理含特殊字符的情况
            FilterList = FilterValues.Split(',', StringSplitOptions.RemoveEmptyEntries)
                                   .Select(Uri.UnescapeDataString);
        }
    }
}

2. 源页面跳转时处理列表参数

把字符串列表转成逗号分隔的编码字符串，再拼到URL里：

// 假设你的filterValues是List<string>类型
var encodedFilterString = string.Join(",", filterValues.Select(Uri.EscapeDataString));
NavManager.NavigateTo($"/page1/{encodedFilterString}");

方案二：通过查询字符串传递（更推荐）

这种方法更灵活，支持元素含特殊字符的场景，也符合URL查询参数的规范：

1. 修改目标页面（page1）代码

使用[SupplyParameterFromQuery]特性让Blazor自动绑定查询参数到集合：

@page "/page1"

@code {
    // Name指定查询参数的键名，这里用"filter"
    [SupplyParameterFromQuery(Name = "filter")]
    public IEnumerable<string> FilterValues { get; set; } = Enumerable.Empty<string>();
}

2. 源页面跳转时构建查询参数

把列表元素转成多个同名的查询参数：

// 生成多个?filter=xxx&filter=xxx格式的参数
var queryString = string.Join("&", filterValues.Select(v => $"filter={Uri.EscapeDataString(v)}"));
NavManager.NavigateTo($"/page1?{queryString}");

生成的URL会类似/page1?filter=value1&filter=value2&filter=value3，Blazor会自动把这些参数收集到FilterValues集合中。