时间戳

首页 > 解决方案 > Blazor 服务器页面的多个模型视图

c# - Blazor 服务器页面的多个模型视图

问题描述

我有一个带有一个视图的 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
}

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

标签： c#asp.net.netasp.net-coreblazor

解决方案

我通过将 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 中使用 URL，例如：

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

推荐阅读