Blazor WASM MudBlazor UI 自动完成大数据集/虚拟化

Question

I have a Blazor WASM project that I'm trying to get a MudBlazor Autocomplete component to work with a very large data set. The api endpoint can return up to 10,000 results, so I do not want to load all the results in the OnInitializedAsync() method. I want to use the MudBlazor Autocomplete SearchFunc to go out to the api and return a list, then filter the results.

Program.cs

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddMudServices();
builder.Services.AddScoped<CustomAuthorizationMessageHandler>();
//TEST CONFIGURATION
builder.Services.AddHttpClient("ServerAPI",
      client => client.BaseAddress = new Uri("https://localhost:7083"))
    .AddHttpMessageHandler<CustomAuthorizationMessageHandler>();

builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
  .CreateClient("ServerAPI"));

await builder.Build().RunAsync();

AppPage.razor

public ProductMaster selectedProduct { get; set; } = new ProductMaster();

<MudAutocomplete 
            T="ProductMaster" 
            Label="Product" 
            @bind-Value="selectedProduct" 
            SearchFunc="@ProductSearch1"
            ToStringFunc="@(e => e == null ? "EMPTY" : $"{e.ProdDesc} {e.ProdCode}")"
            Variant="Variant.Outlined" 
            ShowProgressIndicator="true"
            ProgressIndicatorColor="Color.Default" /> 

private async Task<IEnumerable<ProductMaster>> ProductSearch1(string value)
        {
            var productList = await Http.GetFromJsonAsync<IList<ProductMaster>>($"/api/Orders/GetProducts/?companyNumber={Order.Company}&prodDesc={value}");

            if (string.IsNullOrEmpty(value))
                return productList;

            return productList.Where(x => x.ProdDesc.Contains(value, StringComparison.InvariantCultureIgnoreCase));
        }

The issue is, within the ProductSearch1 method, the http request never goes out. I cannot figure out why it won't execute. If I load all the results from the api on the protected override async Task OnInitializedAsync() method, then filter the results as the user types it works fine. However, that won't work in my case, the data set is way too large.

Any thoughts on this?

Thanks

Answer 1

I was able to resolve this issue by changing the dependency injection from Scoped to Singleton for the IHttpClientFactory:

builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
  .CreateClient("ServerAPI"));

to

builder.Services.AddSingleton(sp => sp.GetRequiredService<IHttpClientFactory>()
  .CreateClient("ServerAPI"));