ViewModel 中的 BlazorWASM 组件参数无法识别答案

【问题标题】：BlazorWASM Component Parameter In ViewModel Not RecognizedViewModel 中的 BlazorWASM 组件参数无法识别
【发布时间】：2020-11-17 22:24:02
【问题描述】：

目前正在处理一个项目，我正在尽最大努力避免剃刀文件的代码块中出现任何 C#，因此我正在尝试遵循 MVVM 设计模式。我有一个测试视图模型，它只是试图从标签标记中获取一个字符串值。

视图模型

  public class MyViewModel : NotifiableAndDisposableBase
  {
    [Parameter]
    public string Text { get; set; }    
  }

MyCard 组件

@inject MyViewModel vm
<h3 style="color: white">MyCard</h3>
<h3 style="color: white">@vm.Text</h3>

查看

<div>
  <MyCard Text="This is passed in"/>
</div>

现在，此代码将不起作用，标签调用中将无法识别 Text 参数。我可以让参数被识别和传递的唯一方法是如果我使用像这样的@Code块

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

或

我的组件不是使用 [Inject] 我的 viewmodel 而是 [Inherits] 我的 viewmodel，但使用 Inherits 意味着我必须使用 Default 构造函数，但我需要使用在 StartUp.cs 中创建的持久 HttpClient

我想一种解决方法是在代码块中创建一个参数，然后在视图模型中设置实际属性，但我不确定这是否是一个好习惯。

任何建议将不胜感激。

【问题讨论】：

标签： .net mvvm blazor blazor-webassembly

【解决方案1】：

注入不是这样工作的。您需要在Program.cs中设置提供者。

类似builder.Services.AddScoped<MyViewModel>();

【讨论】：

【解决方案2】：

什么是 MVVM 上下文中的组件？这是视图的一部分。视图应该为您提供可以绑定 ViewModel 的属性。因此，您的视图模型中不需要任何特定于西装外套的声明。

我的视图模型

  public class MyViewModel : NotifiableAndDisposableBase
  {
     public string Text { get; set; }    
  }

夸大其词，如果您有 WPF 经验，则应该能够重用相同的 ViewModel 类，而不管 WPF 的 Blazor 是什么。

假设您的组件的工作是显示您的 ViewModel，请创建一个接受 ViewModel 实例的参数。我不会在组件中注入 ViewModel，因为可能有几种不同的方法来创建这个 ViewModel 实例。它可以从服务加载。它可以在您开始编辑时创建。因此，如果有一个非常特殊的目的，我们会创建一个组件：显示 ViewModel。这个组件不应该关心实例来自哪里。

MyViewModelDisplayComponent

<h3 style="color: white">MyCard</h3>
<h3 style="color: white">@Model.Text</h3>

@code{
   [Parameter]
   public MyViewModel Model {get; set;}
}

但是，当获取实例的问题不再是组件的关注点时。那么谁来负责？因为您的组件可以被其他组件（例如页面）使用，所以现在是他们的责任。

MyViewModelDetailPage

@page "/myviewModel/Details/{Id}"
@inject MyViewModel vm

<MyViewModelDisplayComponent Model="vm"  />

@code{
   [Parameter]
   public Guid Id {get; set;}

    protected override async Task OnParametersSetAsync()
    {  
           await vm.LoadDetails(Id);
    }
}

我的视图模型

  public class MyViewModel : NotifiableAndDisposableBase
  {
     private HttpClient _client;

     public MyViewModel(HttpClient client)
     {
         _client = client;
     } 

     public string Text { get; set; }

     public async Task LoadDetails(Guid id)
     {
        Text = await client.GetFromJsonAsync<String>("YOUR_URL",id);
     }
    
  }

我认为，注入 ViewModel 是否明智取决于上下文。根据您的输入，您在 ViewModel 中使用了 HttpClient。因此，模型可以相应地加载（或发送）数据，如图所示。

但是，在示例中，您可以看到您的组件仅负责翻译“Blazor”内容，例如将 URL 绑定到变量，而不是更多。

我希望这会引发一些想法。

【讨论】：