Blazor 表格

下面是一个简单的Blazor表格示例，用于显示学生信息数据。
假设我们有一个Student类和一个StudentService类来提供学生数据。

首先，定义Student类：

public class Student  
{  
    public int Id { get; set; }  
    public string Name { get; set; }  
    public string Email { get; set; }  
    public int Age { get; set; }  
}

然后，创建一个StudentService类来模拟数据访问：

public class StudentService  
{  
    private static List<Student> students = new List<Student>  
    {  
        new Student { Id = 1, Name = "张三", Email = "zhangsan@example.com", Age = 20 },  
        new Student { Id = 2, Name = "李四", Email = "lisi@example.com", Age = 21 },  
        new Student { Id = 3, Name = "王五", Email = "wangwu@example.com", Age = 19 }  
        // 添加更多学生数据...  
    };  
  
    public Task<List<Student>> GetStudentsAsync()  
    {  
        return Task.FromResult(students);  
    }  
}

接下来，创建StudentTable.razor组件，使用@foreach循环来遍历学生列表，并创建一个表格来显示数据：

@page "/student-table"
@rendermode @(new InteractiveServerRenderMode(prerender: true))

@using BlazorDemoApp.Services
@using BlazorDemoApp.Models

<h1>学生信息表格</h1>

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>邮箱</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        @if (students == null)
        {
            <tr><td><em>加载中...</em></td></tr>
        }
        else
        {
            @foreach (var student in students)
            {
                <tr>
                    <td>@student.Id</td>
                    <td>@student.Name</td>
                    <td>@student.Email</td>
                    <td>@student.Age</td>
                </tr>
            }
        }
    </tbody>
</table>

@code {
    private List<Student> students;

    protected override async Task OnInitializedAsync()
    {
        students = await new StudentService().GetStudentsAsync();
    }
}

在这个例子中，@page "/student-table"指令告诉Blazor这个组件应该响应/student-table路由。

在@code块中，我们重写了OnInitializedAsync方法，它是组件初始化时调用的异步生命周期方法。在这个方法中，我们调用StudentService的GetStudentsAsync方法来获取学生列表，并将其存储在students字段中。我们使用@if和@foreach指令来控制表格行的渲染。如果students列表为空（例如，在数据加载期间），则显示一个加载中的消息。否则，我们遍历students列表并为每个学生创建一行。

示例代码

StudentTable.razor
StudentService.cs
Student.cs