CODEWITHSUNDEEP
asp.net-coreviewmodelblazor-webassembly
Rene M
Rene M

Reputation: 123

Blazor WASM ViewModel

I did a lot of Razor pages the past year, and a couple of weeks ago I started to transform all to a ViewModel for my Blazor Server App.

Now I thought it's time to make a new Blazor WebAssembly App.

But I struggle to build a POC with a ViewModel, based on the WeatherForecast example.

But whatever I do, I have errors. And so far I did not find a a good basic example.

Unhandled exception rendering component: Unable to resolve service for type 'fm2.Client.Models.IFetchDataModel' while attempting to activate 'fm2.Client.ViewModels.FetchDataViewModel'. System.InvalidOperationException: Unable to resolve service for type 'fm2.Client.Models.IFetchDataModel' while attempting to activate 'fm2.Client.ViewModels.FetchDataViewModel'.

Example: https://github.com/rmoergeli/fm2

namespace fm2.Client.ViewModels
{
    public interface IFetchDataViewModel
    {
        WeatherForecast[] WeatherForecasts { get; set; }
        Task RetrieveForecastsAsync();
        Task OnInitializedAsync();
    }
    public class FetchDataViewModel : IFetchDataViewModel
    {
        private WeatherForecast[] _weatherForecasts;
        private IFetchDataModel _fetchDataModel;
        public WeatherForecast[] WeatherForecasts
        {
            get => _weatherForecasts;
            set => _weatherForecasts = value;
        }
        public FetchDataViewModel(IFetchDataModel fetchDataModel)
        {
            Console.WriteLine("FetchDataViewModel Constructor Executing");
            _fetchDataModel = fetchDataModel;
        }

        public async Task RetrieveForecastsAsync()
        {
            _weatherForecasts = await _fetchDataModel.RetrieveForecastsAsync();
            Console.WriteLine("FetchDataViewModel Forecasts Retrieved");
        }

        public async Task OnInitializedAsync()
        {
            _weatherForecasts = await _fetchDataModel.RetrieveForecastsAsync();
        }
    }
}

namespace fm2.Client
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("#app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            builder.Services.AddScoped<IFetchDataViewModel, FetchDataViewModel>();

            await builder.Build().RunAsync();
        }
    }
}

Additional note:

Here how I did it previously for Blazor Server App: https://github.com/rmoergeli/fm2_server

Here I try the same for the Blazor WebAssembly App: https://github.com/rmoergeli/fm2_wasm (Constructor is not initialized).

This POC is different comapred to the first link at the top. Here I tried to just do the same like I did for the Blazor Server App.

Upvotes: 2

Views: 693

Answers (1)

Jason D
Jason D

Reputation: 2087

I pulled the latest code from Github. It looks like the wrong api was getting called.

When I changed from this:

WeatherForecast[] _weatherForecast = await _http.GetFromJsonAsync<WeatherForecast[]>("api/SampleData/WeatherForecasts");

to this:

WeatherForecast[] _weatherForecast = await _http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");

in WeatherViewModel.cs

I could get the weather data to be displayed.

Upvotes: 1

Related Questions