咨询：是否有Syncfusion DataGrid点击选中行打开Razor详情页的示例（含源码）

实现思路 #

• 利用Syncfusion DataGrid的RowClicked事件监听行点击操作
• 判断点击的行是否处于选中状态
• 通过NavigationManager跳转到对应的Razor详情页面，并传递行数据的唯一标识（如ID）
• 详情页面接收参数并加载展示对应数据

完整源码示例 #

1. 主页面（Index.razor） #

@page "/"
@using Syncfusion.Blazor.Grids
@inject NavigationManager NavManager

<SfGrid @ref="dataGrid" DataSource="@Employees" SelectionSettings="@selectionSettings" RowClicked="OnRowClicked">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Id) HeaderText="ID" Width="80"></GridColumn>
        <GridColumn Field=@nameof(Employee.Name) HeaderText="姓名" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Employee.Department) HeaderText="部门" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Employee.Salary) HeaderText="薪资" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

@code {
    private SfGrid<Employee> dataGrid;
    private List<Employee> Employees;
    private SelectionSettingsModel selectionSettings = new SelectionSettingsModel()
    {
        Mode = SelectionMode.Single,
        Type = SelectionType.Row
    };

    protected override void OnInitialized()
    {
        // 模拟数据源
        Employees = new List<Employee>()
        {
            new Employee() { Id = 1, Name = "张三", Department = "研发部", Salary = 8000 },
            new Employee() { Id = 2, Name = "李四", Department = "市场部", Salary = 7500 },
            new Employee() { Id = 3, Name = "王五", Department = "人事部", Salary = 6500 }
        };
    }

    private void OnRowClicked(RowClickEventArgs<Employee> args)
    {
        // 获取当前选中的行
        var selectedRow = dataGrid.SelectedItems.FirstOrDefault();
        // 判断点击的行是否为选中行
        if (selectedRow != null && selectedRow.Id == args.Data.Id)
        {
            // 跳转到详情页面，传递ID参数
            NavManager.NavigateTo($"/employeedetails/{args.Data.Id}");
        }
    }

    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Department { get; set; }
        public int Salary { get; set; }
    }
}

2. 详情页面（EmployeeDetails.razor） #

@page "/employeedetails/{Id:int}"
@inject NavigationManager NavManager

<h3>员工详情</h3>

<div class="detail-container">
    <p><strong>ID:</strong> @Employee.Id</p>
    <p><strong>姓名:</strong> @Employee.Name</p>
    <p><strong>部门:</strong> @Employee.Department</p>
    <p><strong>薪资:</strong> @Employee.Salary</p>
    <button class="btn btn-primary" @onclick="BackToList">返回列表</button>
</div>

@code {
    [Parameter]
    public int Id { get; set; }
    private Employee Employee { get; set; }

    protected override void OnInitialized()
    {
        // 根据ID获取对应数据（实际项目中可从API或数据库获取）
        Employee = new Employee()
        {
            Id = Id,
            Name = Id == 1 ? "张三" : Id == 2 ? "李四" : "王五",
            Department = Id == 1 ? "研发部" : Id == 2 ? "市场部" : "人事部",
            Salary = Id == 1 ? 8000 : Id == 2 ? 7500 : 6500
        };
    }

    private void BackToList()
    {
        NavManager.NavigateTo("/");
    }

    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Department { get; set; }
        public int Salary { get; set; }
    }
}

关键代码说明 #

• SelectionSettings配置：设置Mode = SelectionMode.Single开启单行选中，确保每次只能选中一行
• RowClicked事件：监听行点击，通过dataGrid.SelectedItems获取当前选中行，判断点击行是否为选中行后执行跳转
• NavigationManager跳转：使用NavigateTo方法跳转到详情页，并通过URL参数传递数据ID
• 详情页参数接收：通过[Parameter]特性接收URL中的ID参数，加载对应数据展示

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