如何将通用对象传递到 Blazor 中的另一个页面？答案

【问题标题】：How to pass a generic object to another page in Blazor?如何将通用对象传递到 Blazor 中的另一个页面？
【发布时间】：2021-11-20 21:13:55
【问题描述】：

我在 Blazor 中有一个组件，它接受一个参数“TItem”，它可以是任何对象：

Employees.razor

@page "/Employees"

<GenericGrid TItem="Employee" MaintainState="true"></GenericGrid>

@code
{
  
}

上述组件是 Telerik 网格组件的包装器。这样，我可以使用相同的网格组件来显示来自不同对象的数据，具体取决于我传递给它的对象（员工、客户等）

GenericGrid.razor（只显示相关代码）

@typeparam TItem

...grid layout...
<GridToolBar>
       <GridCommandButton Icon="add">New @typeof(TItem).Name</GridCommandButton>
</GridToolBar>
...rest of grid layout...

@code {
    ...

    [Parameter]
    public TItem Entity { get; set; }

    ...

当按钮被点击时，我想将用户发送到另一个页面。这个页面应该包含一个表单，用于创建我传递给它的任何对象。然而，第一个障碍是首先能够将对象发送到另一个页面。路由参数只支持字符串和整数之类的东西，所以这不是一个选项。

我发现了以下 StackOverflow 问题：c# blazor how to pass a List to a page。已接受的解决方案看起来是一个可行的选择，但我不知道如何针对我的情况实施此解决方案。

【问题讨论】：

Blazor 是 SPA。您不需要将任何东西传递给其他任何东西，尤其是在路由参数中。从字面上看，我整个网站（现在可能有几百个组件）中唯一的导航位于 MVC 脚手架的身份系统（我讨厌）和我的主页之间。

标签： generics razor blazor

【解决方案1】：

简短版：不要。

长版：

Blazor 是 SPA。您不需要将任何东西传递给其他任何东西，尤其是在路由参数中。从字面上看，我整个网站（现在可能有几百个组件）中唯一必要的导航是在 MVC 脚手架的身份系统（我讨厌）和我的主页之间。

如果您确实需要强制执行页面分隔（但您不需要），您应该传递某种 IDENTIFIER——类型的名称、表示可接受类型的枚举等。

如果你真的需要维护一个实际的对象，你可以通过一个作用域的服务，或者通过一个父页面（可能是布局页面）中的一个变量来实现，你将其级联到它的子页面。 不要做任何这些。 . .但你可以。：P

【讨论】：

不确定您的意思，因为“页面”、“路由”和“导航”实际上是任何 Blazor 应用程序的核心原语。编写良好的 SPA 会更新 url 并尊重书签和后台堆栈等内容。
好的，从技术上讲，我的页面具有语义分离：管理员、组织等。但这是我坚持的一般规则——如果你需要“传递”复杂数据，那么你应该' t 正在导航：您应该使用组件。

【解决方案2】：

简单的解决方案是使用State。假设您有 2 个页面 Employees 和 EmployeeDetail 页面，您需要将员工对象从 Employees 传递到 EmployeeDetail。

AppState.cs

public class AppState
{   
    public Employee Employee { get; set; }
}

public class Employee
{
    public string Name { get; set; }
}

并且您需要将 AppState 注册为您的 program.cs 中的范围

services.AddScoped<AppState>();

Employees.razor

@page "/employees"
@inject AppState AppState
@inject NavigationManager NavigationManager

<button @onclick="NavigateToEmployeeDetail">Send Employee</button>

@code{
    private void NavigateToEmployeeDetail()
    {
        //set the employee object before navigating
        AppState.Employee = new Employee { Name = "Employee1" };
        NavigationManager.NavigateTo("/employeedetail");
    }
}

EmployeeDetail.razor

@page "/employeedetail"

@inject AppState AppState

<h1>Employee Name :  @EmployeeName</h1>

@code{
    public string EmployeeName { get; set; }
    protected override void OnInitialized()
    {
        if (AppState.Employee is null) return;
        EmployeeName = AppState.Employee.Name;
    }
}

【讨论】：