基于表格ID实现Blazor动态路由导航（.NET8服务器端模式）

1. 创建带动态路由参数的目标页面 #

新建Page2.razor页面，在顶部通过@page指令定义包含动态ID参数的路由：

@page "/page2/{id}"

<h3>详情页面 - ID: @Id</h3>

@code {
    // 接收路由传递的ID参数
    [Parameter]
    public string Id { get; set; } = string.Empty;

    // 如果ID是整数类型，路由可改为 @page "/page2/{id:int}"，参数类型对应改为int
    // [Parameter]
    // public int Id { get; set; }
}

2. 在列表页面（Page1.razor）实现点击跳转 #

针对表格中的ID列，有两种常用实现方式：

方式一：使用NavLink组件（推荐，符合Blazor组件化导航）

直接在表格行的ID单元格中使用NavLink组件，绑定动态路由地址：

@page "/page1"

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>其他列</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in items)
        {
            <tr>
                <td>
                    <!-- 通过NavLink跳转，href拼接动态ID -->
                    <NavLink href=$"/page2/{item.Id}" class="text-blue-500 hover:underline">
                        @item.Id
                    </NavLink>
                </td>
                <td>@item.OtherProperty</td>
            </tr>
        }
    </tbody>
</table>

@code {
    // 模拟数据列表
    private List<Item> items = new()
    {
        new Item { Id = "ABC1", OtherProperty = "内容1" },
        new Item { Id = "ABC2", OtherProperty = "内容2" }
    };

    private class Item
    {
        public string Id { get; set; } = string.Empty;
        public string OtherProperty { get; set; } = string.Empty;
    }
}

方式二：使用NavigationManager编程式导航

如果需要在跳转前执行额外逻辑（比如验证、日志），可以注入NavigationManager实现编程式跳转：

@page "/page1"
@inject NavigationManager NavManager

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>其他列</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in items)
        {
            <tr>
                <td>
                    <!-- 绑定点击事件，执行跳转逻辑 -->
                    <span @onclick="() => GoToDetail(item.Id)" class="text-blue-500 hover:underline cursor-pointer">
                        @item.Id
                    </span>
                </td>
                <td>@item.OtherProperty</td>
            </tr>
        }
    </tbody>
</table>

@code {
    private List<Item> items = new()
    {
        new Item { Id = "ABC1", OtherProperty = "内容1" },
        new Item { Id = "ABC2", OtherProperty = "内容2" }
    };

    private void GoToDetail(string id)
    {
        // 这里可以添加跳转前的逻辑，比如参数校验
        if (!string.IsNullOrEmpty(id))
        {
            NavManager.NavigateTo($"/page2/{id}");
        }
    }

    private class Item
    {
        public string Id { get; set; } = string.Empty;
        public string OtherProperty { get; set; } = string.Empty;
    }
}

注意事项 #

• 如果路由参数是特定类型（如int、Guid），可以在路由中添加约束，比如@page "/page2/{id:guid}"，确保只有符合格式的参数能访问页面。
• SSR模式下，导航会触发服务器端的路由匹配，无需额外配置客户端路由，直接按上述方式实现即可。

内容的提问来源于stack exchange，提问作者eza