在Blazor WebAssembly中，我们可以通过Master-detail navigation来实现在一个主列表中选择一个项目并在详细视图中显示它的详细信息。这种模式在许多应用程序中都很常见，例如电子商务网站和管理应用程序。

要实现主从导航，我们需要分两步进行：首先，我们需要显示主列表，然后，当用户选择列表中的项目时，我们需要更新详细视图以显示所选项目的详细信息。

以下是一个示例，它演示了如何在Blazor WebAssembly中使用主从导航。

1. 创建模型类

我们首先创建一个模型类，它将用于表示我们的数据。在这个示例中，我们将创建一个名为Product的模型类，它将具有几个属性，例如ID、Name和Description。

public class Product { public int Id { get; set; } public string Name { get; set; } public string Description { get; set; } }

2. 创建主列表组件

接下来我们创建主列表组件。在这个示例中，我们将创建一个名为ProductList的组件，它将显示产品列表并发送一个事件，当用户选择一个产品时，我们将向该事件发送具有所选产品的ID的消息。

@using System.Collections.Generic @using Microsoft.AspNetCore.Components

@foreach (var product in Products) {
• @product.Name
}

@code { [Parameter] public List Products { get; set; }

[Parameter]
public EventCallback ProductSelected { get; set; }

private void OnProductSelected(int productId)
{
    ProductSelected.InvokeAsync(productId);
}

}

3. 创建详细视图组件

我们接着创建一个名为ProductDetail的组件，用于显示一个选定产品的详细信息。

@