Blazor WASM 视图模型

Question

去年我做了很多 Razor 页面，几周前我开始将所有页面转换为我的 Blazor Server 应用程序的 ViewModel。

现在我认为是时候制作一个新的 Blazor WebAssembly 应用程序了。

但我很难基于 WeatherForecast 示例使用 ViewModel 构建 POC。

但是无论我做什么，我都会出错。到目前为止我还没有找到一个很好的基本例子。

未处理的异常呈现组件：尝试激活 'fm2.Client.ViewModels.FetchDataViewModel' 时无法解析类型 'fm2.Client.Models.IFetchDataModel' 的服务。 System.InvalidOperationException：尝试激活 'fm2.Client.ViewModels.FetchDataViewModel' 时无法解析类型 'fm2.Client.Models.IFetchDataModel' 的服务。

示例：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();
        }
    }
}

补充说明：

这里是我之前为 Blazor Server App 做的：https://github.com/rmoergeli/fm2_server

在这里，我对 Blazor WebAssembly 应用程序进行了同样的尝试： https://github.com/rmoergeli/fm2_wasm（构造函数未初始化）。

此 POC 与顶部的第一个 link 不同。在这里，我尝试像对 Blazor 服务器应用程序一样做同样的事情。

Answer 1

我从 Github 中提取了最新代码。似乎调用了错误的 api。

当我从这里更改时：

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

对此：

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

在WeatherViewModel.cs

我可以获取要显示的天气数据。

Blazor WASM 视图模型

Blazor WASM ViewModel

viewmodel

asp.net-core

blazor-webassembly