Blazor WebAssembly点击调用HttpClient时页面重载请求不生效问题

问题根源 #

你的页面重载是浏览器原生表单提交行为导致的：你将提交按钮设置为type="submit"且放在<form>标签内，点击按钮时会默认触发表单提交刷新页面，Blazor的异步请求逻辑还未执行完成就被页面刷新中断了。你之前尝试@bind绑定无效也是因为页面提前刷新，绑定后的数据还没来得及用于请求就被重置为初始值。

解决方案 #

以下两种方案选其一即可：

方案1：保留form结构，阻止默认提交行为 #

修改razor页面代码，将提交逻辑绑定到form的onsubmit事件并启用默认行为阻止，同时为输入框添加双向绑定：

@page "/"
@inject ApiCallHandler Handler

<div class="flex-wrap d-md-inline-block">
    <!-- 绑定onsubmit事件，阻止原生提交刷新 -->
    <form @onsubmit:preventDefault @onsubmit="Search">
        <span>
            <!-- 双向绑定输入内容到searchString -->
            <input type="text" class="form-text" @bind="searchString" />
            <button type="submit" class="btn btn-primary">Search</button>
        </span>
    </form>

    @if (imageResponse == null)
    {

    }
    else
    {
        if (!imageResponse.IsSuccess)
        {
            <p>Unable to fetch images</p>
        }
        <div class="flex-wrap align-content-center">
            @foreach (var image in imageResponse.Value)
            {
                <img class="thmb" src='@image.ThumbnailUrl' />
            }
        </div>
    }
</div>

@code {
    private ImageResponseModel imageResponse;
    public string searchString { get; set; }

    private async Task Search()
    {
        imageResponse = await Handler.ImageSearch(searchString);
    }
}

方案2：移除form的默认提交逻辑，直接用普通按钮 #

不需要改动form结构，仅将按钮的type属性从submit改为button即可，原生button不会触发表单提交刷新：

<!-- 仅修改按钮这一行即可，其余代码保持不变 -->
<button type="button" class="btn btn-primary" @onclick="Search">Search</button>

注意该方案也需要保留input的@bind="searchString"双向绑定，否则无法获取用户输入的搜索词

可选优化（功能正常后可调整） #

Blazor WASM项目推荐直接注入官方封装好的HttpClient实例，无需自己在服务类中初始化，避免出现请求配置冲突：

1. 在Program.cs中添加HttpClient注册：

builder.Services.AddHttpClient<ApiCallHandler>(client => 
{
    client.BaseAddress = new Uri("https://api.bing.microsoft.com/v7.0/images/search");
    client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", "你的密钥");
});

2. 修改ApiCallHandler的构造函数，接收注入的HttpClient：

public ApiCallHandler(HttpClient client)
{
    _client = client;
}

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