Blazor WASM 视图模型答案

【问题标题】：Blazor WASM ViewModelBlazor WASM 视图模型
【发布时间】：2021-07-30 09:50:10
【问题描述】：

过去一年我做了很多 Razor 页面，几周前我开始将所有页面转换为我的 Blazor 服务器应用程序的 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 服务器应用程序所做的：https://github.com/rmoergeli/fm2_server

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

此 POC 与顶部的第一个链接不同。在这里，我尝试像对 Blazor Server 应用程序所做的那样做同样的事情。

【问题讨论】：

请添加relevant code to the question。看起来您缺少在 IoC 容器中注册 IFetchDataModel。
怀疑你还没有注册IFetchDataModel的实现，你需要补充一下（builder.Services.AddScoped<IFetchDataModel, MyFetchDataModelImplementation>()）
经过几个小时的尝试和错误，它仍然无法正常工作。不知道该尝试什么。
"Unable to resolve" 是 DI 错误，发布 Startup 类。

标签： asp.net-core viewmodel blazor-webassembly

【解决方案1】：

我从 Github 提取了最新的代码。看起来调用了错误的 api。

当我从这里改变时：

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

到这里：

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

在 WeatherViewModel.cs 中

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

【讨论】：