Blazor：在httpClient进行GET请求

Question

使用Blazor（服务器端），我有一个简单的按钮，在执行搜索时，我想更改为here之类的微调框。发生这种情况时，我希望UI暂时在按钮上显示“正在加载...”。

我正在使用<InputForm>标签来呈现带有<InputSelect>和<InputText>字段的表单。当我单击提交按钮时，表单的OnValidSubmit会触发HandleSearch()。我希望ShowLoader立即更新UI元素，但是直到GetDataAsync完成后才更新，因此它永远不会变回搜索按钮。

我怀疑有更好的方法来完成此简单任务。有什么想法吗？

HTML：

<button type="submit" class="btn btn-primary mt-3">
    @if (ShowLoader)
    {
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        <span>Loading...</span>
    }
    else
    {
        <span>Search</span>
    }
</button>

代码块：

@code {
    public class SearchBox
    {
        [Required]
        public string SearchValue { get; set; }
        public string SearchField { get; set; }
    }

    public SearchBox search = new SearchBox();
    public bool ShowLoader = default;

    protected async Task HandleSearch()
    {
        ShowLoader = true;
        try
        {
            var result = await functionsClient.GetDataAsync<Reservation>(FunctionsClientConstants.ReservationsPath + "?field=" + search.SearchField + "&value=" + search.SearchValue);
            Console.WriteLine(result);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error: {ex.Message}");
        }                   
        ShowLoader = false;
    }
}

GetDataAsync方法：

public async Task<T> GetDataAsync<T>(string path)
{            
    HttpResponseMessage response = httpClient.GetAsync(path).Result;

    using HttpContent content = response.Content;
    return JsonConvert.DeserializeObject<T>(await content.ReadAsStringAsync());
}

更新：

我将try / catch块更改为使用await Task.Delay(2000)而不是GET，并且搜索按钮的行为符合预期。单击该按钮，它将变为“正在加载...” 2秒钟，然后又变回来。

p.s。我意识到这里有a better way to handle async JSON，但是我的入站有效负载存在问题，目前导致反序列化错误，因此我改用Newtonsoft.Json。现在我的GET导致了一个错误，但是如果我被捕获了，那应该不会影响UI的呈现，应该这样吗？