c# - InvalidOperationException: Cannot provide a value for property '_clientFactory' on type 'CoronaAppCsarp.Pages.Index'

Question

I am creating this Corona app using this api: https://covid19.mathdro.id/api. I have created a component for cards to show the data from the api, and when i am running the app it gives me this error:

I am using System.Net.Http.Json.

This is my model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace CoronaAppCsarp.Data
{
        public class CoronaModel
        {
            public Confirmed confirmed { get; set; }
            public Recovered recovered { get; set; }
            public Deaths deaths { get; set; }
            public string dailySummary { get; set; }
            public string image { get; set; }
            public DateTime lastUpdate { get; set; }
        }

        public class Confirmed
        {
            public int value { get; set; }
            public string detail { get; set; }
        }

        public class Recovered
        {
            public int value { get; set; }
            public string detail { get; set; }
        }

        public class Deaths
        {
            public int value { get; set; }
            public string detail { get; set; }
        }
    }

My Card component:

<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">@Title</h5>
        <p class="card-text">@NumberOfCases</p>
        <p class="card-text">@Date</p>
        <p class="card-text">@Description.</p>
    </div>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public float NumberOfCases { get; set; }

    [Parameter]
    public DateTime Date { get; set; }

    [Parameter]
    public string Description { get; set; }
}

And my Index page:

@page "/"
@inject IHttpClientFactory _clientFactory;

@if (string.IsNullOrWhiteSpace(errorString) == false)
{
    <div class="h2">@errorString</div>
}
else if (coronaModel is null)
{
    <div class="h2">Loading...</div>
}
else
{
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <Cards NumberOfCases="@coronaModel.confirmed.value" Date="@coronaModel.lastUpdate" Description="Number of active COVID-19 cases" Title="Infected" />
            </div>
            <div class="col">
                <Cards NumberOfCases="@coronaModel.recovered.value" Date="@coronaModel.lastUpdate" Description="Number recovered COVID-19 cases" Title="Recovered" />
            </div>
            <div class="col">
                <Cards NumberOfCases="@coronaModel.deaths.value" Date="@coronaModel.lastUpdate" Description="Number of COVID-19 deaths" Title="Deaths" />
            </div>
        </div>
    </div>
}

@code{
    CoronaModel coronaModel;
    string errorString;

    protected override async Task OnInitializedAsync()
    {
        var request = new HttpRequestMessage(HttpMethod.Get, "https://covid19.mathdro.id/api");

        var client = _clientFactory.CreateClient();

        HttpResponseMessage response = await client.SendAsync(request);

        if (response.IsSuccessStatusCode)
        {
            coronaModel = await response.Content.ReadFromJsonAsync<CoronaModel>();
            errorString = null;
        }
        else
        {
            errorString = "There was an error getting the data.";
        }
    }

}

Is there any way to solve it? If yes I would really appreciate your help!

Thank you!

Answer 1

You should add the IHttpClientFactory service into the DI container in the startup class. IHttpClientFactory can be registered by calling AddHttpClient like this:

public void ConfigureServices(IServiceCollection services)
{
    services.AddHttpClient();
    //..................
}