Blazor中如何在首个请求完成后获取学生详情并循环展示

方案一：提前批量并行加载所有学生详情 #

先获取班级基础数据，再一次性并行请求所有学生的详情，既避免在渲染循环中调用异步方法，又能提升请求效率。

组件代码示例 #

@inject ClassRoomService ClassRoomService
@inject StudentService StudentService

@if (classRoom == null)
{
    <p>加载中...</p>
}
else
{
    <h3>@classRoom.Name</h3>
    @foreach (var student in classRoom.Students)
    {
        <div class="student-item">
            <p>姓名：@student.Name</p>
            @if (student.Details == null)
            {
                <p>加载学生详情中...</p>
            }
            else
            {
                <p>年龄：@student.Details.Age</p>
                <p>班级：@student.Details.ClassName</p>
            }
        </div>
    }
}

@code {
    private ClassRoomModel classRoom;

    protected override async Task OnInitializedAsync()
    {
        // 第一步：获取班级数据
        classRoom = await ClassRoomService.GetClassRoomDetails();
        
        // 第二步：并行请求所有学生详情，避免串行等待
        var studentDetailTasks = classRoom.Students.Select(async student => 
        {
            student.Details = await StudentService.GetStudentDetailsById(student.Url);
        });
        
        // 等待所有请求完成
        await Task.WhenAll(studentDetailTasks);
        
        // 通知组件更新渲染
        StateHasChanged();
    }

    // 可根据实际业务调整的模型结构
    public class ClassRoomModel
    {
        public string Name { get; set; }
        public List<StudentModel> Students { get; set; } = new();
    }

    public class StudentModel
    {
        public string Name { get; set; }
        public string Url { get; set; }
        public StudentDetailsModel Details { get; set; }
    }

    public class StudentDetailsModel
    {
        public int Age { get; set; }
        public string ClassName { get; set; }
    }
}

方案二：封装独立组件加载单个学生详情 #

把学生详情的异步加载逻辑拆到独立子组件中，父组件只负责渲染学生列表，每个学生的详情由子组件独立异步加载，适合数据量大或需要渐进式加载的场景。

1. 学生详情子组件（StudentDetails.razor） #

@inject StudentService StudentService

@if (details == null)
{
    <p>加载中...</p>
}
else
{
    <p>年龄：@details.Age</p>
    <p>班级：@details.ClassName</p>
}

@code {
    // 接收父组件传递的学生Url参数
    [Parameter]
    public string StudentUrl { get; set; }

    private StudentDetailsModel details;

    protected override async Task OnInitializedAsync()
    {
        // 子组件内部异步加载详情
        details = await StudentService.GetStudentDetailsById(StudentUrl);
    }

    public class StudentDetailsModel
    {
        public int Age { get; set; }
        public string ClassName { get; set; }
    }
}

2. 父组件代码 #

@inject ClassRoomService ClassRoomService

@if (classRoom == null)
{
    <p>加载中...</p>
}
else
{
    <h3>@classRoom.Name</h3>
    @foreach (var student in classRoom.Students)
    {
        <div class="student-item">
            <p>姓名：@student.Name</p>
            <!-- 调用子组件并传递学生Url -->
            <StudentDetails StudentUrl="@student.Url" />
        </div>
    }
}

@code {
    private ClassRoomModel classRoom;

    protected override async Task OnInitializedAsync()
    {
        // 仅获取班级基础数据
        classRoom = await ClassRoomService.GetClassRoomDetails();
    }

    // 可根据实际业务调整的模型结构
    public class ClassRoomModel
    {
        public string Name { get; set; }
        public List<StudentModel> Students { get; set; } = new();
    }

    public class StudentModel
    {
        public string Name { get; set; }
        public string Url { get; set; }
    }
}

为什么原来的方式不可行？ #

Blazor的渲染逻辑是同步执行的，在foreach的渲染代码中直接调用异步方法会返回Task对象，而非实际的渲染内容，导致报错。同时循环内逐个await会串行发起请求，性能低下，属于Blazor开发中的反模式。

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