Blazor 服务器页面的多个模型视图答案

【问题标题】：Multiple Modelview for Blazor Server PageBlazor 服务器页面的多个模型视图
【发布时间】：2021-11-28 04:06:29
【问题描述】：

我有一个带有一个视图的 Blazor 页面，但我想为此使用两个 ViewModel，这取决于我使用的 URL。

@page "/canSimStatic"
@page "/CanSimDynamic"
@using System.Diagnostics;
@using edge_cantraficSimulator.Data
@using edge_cantraficSimulator.ViewModels
@using System.Threading;
@using System.IO;
@using Microsoft.AspNetCore.Mvc.Rendering;
@inject NavigationManager NavigationManager


@if (NavigationManager.Uri.Contains("canSimStatic"))
{
    @inject ViewModels.CanSimStaicViewModell viewmodel
}
@if (NavigationManager.Uri.Contains("CanSimDynamic"))
{
    @inject ViewModels.CanSimDynamicViewModdels viewmodel
}

我的问题是，无论我使用这两个网址中的哪一个，它总是选择第二个作为viewmodel

【问题讨论】：

首先为什么要注入不需要的视图模型。其次，创建一个其中包含 2 的 Viewmodel 并使用您想要的。
如果我不注入它，我将无法在我的剃须刀页面中使用 i
<h1>@viewmodell.SiteTitle</h1>
您的模型实际上应该在 Get() 方法中初始化，并且应该只是该类的属性。
不要试图在一个“页面”中满足两种不同的场景，只需有两个页面 - 每个页面都注入正确的模型并适当地处理它 - 任何真正共享的代码/标记都可以提取给孩子组件并以这种方式重复使用

标签： c# asp.net .net asp.net-core blazor

【解决方案1】：

@inject 是 Razor 代码，就像一个指令。你不能像以前那样在逻辑循环中使用它。

您需要同时加载两者，然后选择要使用的。你可以这样做：

@code
{
[Inject] private ViewModels.CanSimStaicViewModell viewModelStatic {get; set;}
[Inject] private ViewModels.CanSimDynamicViewModdels viewModelDynamic {get; set;}

private object viewModel;

protected override void OnInitialized() {
   if (NavigationManager.Uri.Contains("Dynamic"))
      viewModal = viewModelDynamic;
   else
      viewModal = viewModelStatic;
}

你是使用 object 还是说 ICanSimViewModell 取决于你如何使用它。我建议定义一个两个“模型”都符合的接口，然后

private object viewModel;

变成：

private ICanSimViewModell viewModel;

【讨论】：

我以前从未见过像属性一样使用的注入！正常语法是私有字段，例如@inject SomeMode mymodel;
是的，我也很好奇。在代码中，我习惯于使用@inject 注入构造函数和标记。我以前从未在代码中见过 [Inject] 指令。它是新的，还是我的知识有漏洞？
@Bennyboy1973 - 它已经存在了一段时间。我认为@inject被编译为[Inject]
所以这只是表面上的区别？完全不影响页面生命周期？
它们完全一样。来自隐藏文件：[global::Microsoft.AspNetCore.Components.InjectAttribute] private WeatherForecastService ForecastService { get; set; }

【解决方案2】：

我通过将 URl 输出到页面来检查这一点：

@if (NavigationManager.Uri.Contains("canSimStatic"))
{
   <p>First Option from @NavigationManager.Uri</p>
}
else if (NavigationManager.Uri.Contains("CanSimDynamic"))
{
    <p>Secound Option from @NavigationManager.Uri</p>
}

两者都显示“来自 .../CanSimDynamic 的第二个选项”。所以 Blazor 似乎在内部使用相同的 Uri 处理两者。所以我建议为此使用 url 参数：

@page "/canSim/{Option}"
@inject NavigationManager NavigationManager

@if (NavigationManager.Uri.Contains("Dynamic"))
{
    <p>First Option from Url  @NavigationManager.Uri - Option @Option</p>
}
else if (NavigationManager.Uri.Contains("Static"))
{
    <p>Secound Option from Url  @NavigationManager.Uri - Option @Option</p>
}

@code {
    [Parameter]
    public String Option { get; set; }
    
    //...
}

您可以使用网址，例如在 NavMenu 中像：

<NavLink class="nav-link" href="canSim/Dynamic">
   <span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>

【讨论】：