Blazor中如何为HttpClient的Get方法传参调用WebApi接口

解决方案 #

你可以通过QueryBuilder工具类来安全拼接查询参数，适配ASP.NET Core对数组类型[FromQuery]参数的绑定规则。

实现步骤 #

1. 首先确认项目已引用命名空间Microsoft.AspNetCore.Http（Blazor项目默认自带）
2. 修改调用方法如下：

using Microsoft.AspNetCore.Http;
using System.Net.Http.Json; // 用简化反序列化的话需要引用

private async Task<IEnumerable<MdmUserDto>> Search(string query, int limit = 30)
{
    // 构建查询参数集合
    var queryBuilder = new QueryBuilder();
    // 单个query值直接添加，如果是多查询条件可循环多次Add("query", 对应值)
    queryBuilder.Add("query", query);
    // 添加limit参数，不需要自定义的话可以省略，接口会用默认值30
    queryBuilder.Add("limit", limit.ToString());

    // 自动拼接带?前缀的查询字符串，自动处理特殊字符转义
    var requestUrl = $"{_baseAddress}api/UserSearch/Search{queryBuilder.ToQueryString()}";

    // 简化写法：直接用GetFromJsonAsync自动反序列化，默认忽略大小写匹配属性
    return await LocalHttpClient.GetFromJsonAsync<IEnumerable<MdmUserDto>>(requestUrl);

    // 如果你要保留原来的读写流写法也可以，建议加上大小写不敏感配置避免反序列化失败
    // var response = await LocalHttpClient.GetAsync(requestUrl);
    // response.EnsureSuccessStatusCode();
    // using var responseContent = await response.Content.ReadAsStreamAsync();
    // return await JsonSerializer.DeserializeAsync<IEnumerable<MdmUserDto>>(responseContent, 
    //     new JsonSerializerOptions { PropertyNameCaseInsensitive = true });
}

规则说明 #

ASP.NET Core绑定数组类型[FromQuery]参数时，会自动收集所有同名的查询参数值组装成数组，如果你需要传多个查询值，只要多次调用queryBuilder.Add("query", 对应值)即可，最终生成的请求格式为?query=值1&query=值2&limit=30，接口可以正常解析。

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