Blazor中如何在foreach循环内调用异步方法获取学生数据？

错误原因 #

Blazor的Razor模板渲染逻辑是同步执行的，模板对应的渲染方法并未标记为async，因此你不能直接在foreach循环里使用await调用异步方法，这就是编译器报错的核心原因。

方案一：提前加载所有教室的学生数据（适合数据量较小场景） #

这种方式会在组件初始化时一次性加载所有教室及其对应的学生数据，之后直接渲染即可：

1. 定义联合模型：创建一个包含教室信息和对应学生列表的模型

public class ClassroomWithStudents
{
    public Classroom Classroom { get; set; } // 替换为你的ClassRoom模型
    public List<Student> Students { get; set; } // 替换为你的Student模型
}

2. 组件异步初始化加载数据：在组件的OnInitializedAsync方法中完成教室和学生数据的加载

@code {
    private List<ClassroomWithStudents> _classroomsWithStudents = new();
    [Inject] private IStudentsService StudentsService { get; set; } // 注入你的学生服务
    [Inject] private IClassroomService ClassroomService { get; set; } // 注入你的教室服务

    protected override async Task OnInitializedAsync()
    {
        // 先获取教室列表
        var classRooms = await ClassroomService.GetClassrooms(); // 替换为你获取教室的实际方法
        
        // 遍历每个教室，加载对应学生数据
        foreach (var cr in classRooms.value)
        {
            var students = await StudentsService.GetStudents(cr.url);
            _classroomsWithStudents.Add(new ClassroomWithStudents
            {
                Classroom = cr,
                Students = students
            });
        }
    }
}

3. 模板渲染数据：遍历提前加载好的联合模型列表

@if (_classroomsWithStudents.Any())
{
    @foreach (var item in _classroomsWithStudents)
    {
        <p>Classroom name: @item.Classroom.name</p>
        
        <h4>Students:</h4>
        @if (item.Students?.Any() == true)
        {
            <ul>
                @foreach (var student in item.Students)
                {
                    <li>@student.Name</li> // 替换为你的学生属性
                }
            </ul>
        }
        else
        {
            <p>No students found.</p>
        }
    }
}
else
{
    <p>Loading classrooms...</p>
}

方案二：用子组件封装异步加载（适合数据量大/懒加载场景） #

这种方式将单个教室的渲染和学生数据加载封装到独立子组件中，每个子组件独立处理异步请求：

1. 创建子组件ClassroomStudentList.razor

@code {
    [Parameter, Required] public string ClassroomName { get; set; }
    [Parameter, Required] public string ClassroomUrl { get; set; }
    [Inject] private IStudentsService StudentsService { get; set; }
    
    private List<Student> _students;
    private bool _isLoading = true;

    protected override async Task OnInitializedAsync()
    {
        _students = await StudentsService.GetStudents(ClassroomUrl);
        _isLoading = false;
    }
}

<p>Classroom name: @ClassroomName</p>
@if (_isLoading)
{
    <p>Loading students...</p>
}
else if (_students?.Any() == true)
{
    <h4>Students:</h4>
    <ul>
        @foreach (var student in _students)
        {
            <li>@student.Name</li> // 替换为你的学生属性
        }
    </ul>
}
else
{
    <p>No students in this classroom.</p>
}

2. 父组件中使用子组件

@if (ClassRoom != null)
{
    @foreach (var cr in ClassRoom.value)
    {
        <ClassroomStudentList ClassroomName="@cr.name" ClassroomUrl="@cr.url" />
        <hr /> <!-- 可选：分隔不同教室 -->
    }
}
else
{
    <p>Loading classrooms...</p>
}

@code {
    [Inject] private IClassroomService ClassroomService { get; set; }
    private ClassroomResponse ClassRoom; // 你的ClassRoom模型（包含value列表）

    protected override async Task OnInitializedAsync()
    {
        ClassRoom = await ClassroomService.GetClassrooms(); // 替换为你获取教室的实际方法
    }
}

方案选择 #

• 若数据量小、希望一次性加载所有数据，选方案一；
• 若数据量大、需要独立控制每个教室的加载状态或实现懒加载，选方案二。

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