CODEWITHSUNDEEP
c#blazor-server-side.net-5ihttpclientfactory
Brian
Brian

Reputation: 1989

How do I use IHttpClientFactory with .NET Core 5.x and Blazor given that there is not a normal class structure in a .RAZOR file?

I would like to preface this post with the fact that I am VERY new to C#, .NET Core, and Blazor after being a long-time Java person.

I am following along with Microsoft's documentation on Make HTTP requests using IHttpClientFactory in ASP.NET Core, but I cannot seem to understand how to use this with my application.

I have a IP address for an API endpoint, So I created a Named Client:

services.AddHttpClient("TheAPIEndpoint", client =>
{
    client.BaseAddress = new Uri("192.168.1.234");
    client.DefaultRequestHeaders.Add("Accept", "application/json");
    client.DefaultRequestHeaders.Add("User-Agent", "Skynet v1.0");
});

Next, I went to the "Basic Usage" section of the documentation at the top of the page where it says:

An IHttpClientFactory can be requested using dependency injection (DI). The following code uses IHttpClientFactory to create an HttpClient instance

It says to create a constructor for my class and pass in an IHttpClientFactory:

public class BasicUsageModel : PageModel
{
    private readonly IHttpClientFactory _clientFactory;

    public BasicUsageModel(IHttpClientFactory clientFactory)
    {
        _clientFactory = clientFactory;
    }

    public async Task OnGet()
    {
        var client = _clientFactory.CreateClient();
    }
}

Here is where my issue "begins". When you create a new Razor component for a Blazor application, the generated .RAZOR file looks like this:

<h3>HelloWorld</h3>

@code {

}

When I need to call the API, I need to create this method:

private async Task GetSearchResults()
{
    // ...
}

All together, it looks like this:

<h3>HelloWorld</h3>
@if (fetchedResults != null)
{
    @foreach (var result in fetchedResults)
    {
        <p>@(result.someData)</p>
    }
}

@code {
    private async Task GetSearchResults()
    {
        HttpClient client = new HttpClient();
        client.BaseAddress = new Uri(@"http://192.168.1.234:8082/");
        // ...
        fetchedResults = JsonConvert.DeserializeObject<ResultSet>(response);
    }
}

As you see, I don't have a "normal" class structure in which to create the constructor, to which to pass an IHttpClientFactory parameter, with which I can create a new HttpClient.

So, how do I go about doing this?

Upvotes: 0

Views: 5893

Answers (1)

Ian Kemp - SE killed by LLMs
Ian Kemp - SE killed by LLMs

Reputation: 29919

Blazor does not support constructors as you've already discovered, instead it provides the @inject directive to support dependency injection. The syntax is:

@inject <dependency-type-name> <variable-name>

In your case:

@inject IHttpClientFactory _clientFactory
<h3>HelloWorld</h3>
@if (fetchedResults != null)
{
    @foreach (var result in fetchedResults)
    {
        <p>@(result.someData)</p>
    }
}

@code {
    private async Task GetSearchResults()
    {
        var client = _clientFactory.CreateClient();
        client.BaseAddress = new Uri(@"http://192.168.1.234:8082/");
        // ...
        fetchedResults = JsonConvert.DeserializeObject<ResultSet>(response);
    }
}

Don't forget to register your dependencies in the Startup.ConfigureServices method!

Upvotes: 3

Related Questions