Blazor Server Web 应用程序导航带参数？

Question

我在 .Net 8 上有 Blazor Server 应用程序。我正在探索应用程序内部导航的不同选项。我已经实现了两种方法 - 使用导航管理器扩展更改 MainLayout 的 @Body 以获取其周围的额外数据或 Index.razor （动态组件的包装器），在动态内部我将按类型更改页面。 下面是两个实现。我的问题是哪种方式更适合我的业务案例，并且对于公开且将被成百上千用户使用的应用程序来说更直接。阻止我选择导航管理器方向的是我无法轻松地将参数传递到我重定向到的某个页面（例如输入参数）。

public class NavigationProvider
{
    private readonly NavigationManager _navigationManager;

    public NavigationProvider(NavigationManager navigationManager)
    {
        _navigationManager = navigationManager;
    }

    public StepEnum CurrentStep { get; private set; } = Step.Undefined;

    public Dictionary<string, object> PassedParameters { get; private set; }

    public void NavigateTo(OutcomeEnum outcome, Dictionary<string, object> passedParameters)
    {
        this.PassedParameters = passedParameters;

        StepEnum nextStep = ChooseNextStep(outcome);

        this.Navigate(nextStep);
    }

    private StepEnum ChooseNextStep(OutcomeEnum outcome)
    {
        StepEnum nextStep = StepEnum.Undefined;

        switch (CurrentStep)
        {
            case StepEnum.Login:
                nextStep = StepEnum.Dashboard;
                break;
            case StepEnum.Dashboard:
                nextStep = StepEnum.ExecuteAction;
                break;
            case StepEnum.ExecuteAction:
                nextStep = StepEnum.EndOfUserAction;
                break;
            default:
                nextStep = StepEnum.ErrorPage;
                break;
        }

        return nextStep;
    }

    private void Navigate(StepEnum nextStep)
    {
        _navigationManager.NavigateTo(nextStep.ToString());
    }
}

public enum OutcomeEnum
{
   ErrorInBusinessLogic,
   SuccessfulRedirect
}

public enum StepEnum 
{
   Login,
   Dashboard,
   ExecuteAction,
   EndOfActionExecute,
   ErrorPage
}

我希望能够导航到具有不同参数集的路线，并保存屏幕之间的当前步骤。还基于屏幕的结果 - 成功/错误 我必须能够知道导航到哪里：例如在下一个功能屏幕上成功时或在错误时导航到错误页面。

这是在 blazor 服务器应用程序内部导航的方式吗？如何使用每个屏幕的输入参数创建不同的视图模型并通过导航传递它？

我探索的另一个想法是在 Index.razor 包装器中创建这样的动态组件：

<DynamicComponent Type="ComponentType" Parameters="ComponentParameters" />

这里的 ComponentType 是实际的剃刀页面转换为类型，我可以跳过导航管理器，只根据屏幕的结果更改组件类型。在我的 index.razor.cs 中，我将有一个像这样的函数：

    public Type ComponentType { get; set; } = typeof(Login);

    public Dictionary<string, object> ComponentParameters { get; set; }

    protected override void OnInitialized()
    {
        this.ComponentParameters = new Dictionary<string, object>
        {
            { "NavigateRequest", new Action<NavArgs>(HandleNavigateRequest) }
        };

        base.OnInitialized();
    }

    public void HandleNavigateRequest(NavArgs args)
    {
        this.ComponentType = args.CurrentStep switch
        {
            StepEnum.Registration => typeof(Dashboard),
            StepEnum.Dashboard=> typeof(ExecuteAction),
            StepEnum.ExecuteAction=> typeof(EndOfActionExecute),
            _ => this.ComponentType // default case, keeps the current ComponentType unchanged
        };
    }

在每个页面中我都可以发送到index.razor：

 [Parameter]
 public Action<NavArgsType> NavigateRequest { get; set; }

 public void RequestNavigate()
 {
     var args = new NavArgs()
     {
         CurrentStep = StepEnum.Login,
     };
     this.NavigateRequest.Invoke(args);
 }

Answer 1

当您已经很好地定义了开箱即用的所有内容时，仍然很难理解为什么要创建自定义导航实现..尤其是当默认实现满足您的需求时

来自文档：

@page "/user/{id:int}/{option:bool?}"  <-- define the route of current page

<p>
    Id: @Id  <-- print the value of "id" parameter
</p>

<p>
    Option: @Option  <-- print the value of "option" parameter (if provided)
</p>

@code {  <-- define parameters in code
    [Parameter]
    public int Id { get; set; }

    [Parameter]
    public bool Option { get; set; }
}

我确实想说，虽然您的应用程序看起来像一个管理应用程序，可能不需要共享链接，但当需要链接共享时，实际的页面导航是首选（在您的情况下较少用于搜索引擎优化，更多用于团队成员之间的协作）

如果（由于某种原因）您的解决方案使用不同的架构，您可能需要查看这篇文章，描述如何使用不同类型的

net core

网络应用程序实现相同的效果

干杯