Blazor WASM 视图模型

Posted 2023-03-27

【中文标题】Blazor WASM 视图模型

【英文标题】：Blazor WASM ViewModel

【发布时间】：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 类。

【参考方案1】：

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

当我从这里改变时：

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

到这里：

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

在 WeatherViewModel.cs 中

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