【Blazor-07】- Blazor学生列表组件

发表于 分类于 阅读次数： 本文字数： 3.9k 阅读时长 ≈ 4 分钟
Blazor系列翻译07- Blazor学生列表组件

在此节中，我们实现一个Blazor组件—StudentList组件。

组件用于展示学生列表，如下图所示：

image-20220424133441270

StudentList.razor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@page "/students"
@inherits StudentListListBase

<h3>StudentList</h3>

<div class="row">
    @foreach (var student in Students)
    {
        <div class="col-3">
            <div class="card m-3">
                <div class="card-header">
                    <h3>@student.FirstName @student.LastName</h3>
                </div>
                <img class="card-img-top imageThumbnail" src="@student.PhotoPath"/>
                <div class="card-footer text-center">
                    <a href="#" class="btn btn-primary m-1">查看</a>
                    <a href="#" class="btn btn-primary m-1">编辑</a>
                    <a href="#" class="btn btn-danger m-1">删除</a>
                </div>
            </div>
        </div>
    }
</div>

代码说明

指令

1
2
3
4
5
# 指定当我们导航到此路径时显示此组件
@page "/" 
    
# 定义此组件的基类
@inherits SutdentListBase

HTML

使用 Bootstrap Card 显示， 为了遍历学生列表，我们使用了 foreach 循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="row">
    @foreach (var student in Students)
    {
        <div class="col-3">
            <div class="card m-3">
                <div class="card-header">
                    <h3>@student.FirstName @student.LastName</h3>
                </div>
                <img class="card-img-top imageThumbnail" src="@student.PhotoPath"/>
                <div class="card-footer text-center">
                     <a href="#" class="btn btn-primary m-1">查看</a>
                    <a href="#" class="btn btn-primary m-1">编辑</a>
                    <a href="#" class="btn btn-danger m-1">删除</a>
                </div>
            </div>
        </div>
    }
</div>

StudentListBase

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
using Microsoft.AspNetCore.Components;
using StudentManagement.Models;

namespace StudentManagement.Web.Pages;

public class StudentListListBase: ComponentBase
{
    public IEnumerable<Student> Students { get; set; }


    protected override Task OnInitializedAsync()
    {
        LoadStudents();
        return base.OnInitializedAsync();
    }

    private void LoadStudents()
    {
        var s1 = new Student()
        {
            StudentId = 1,
            FirstName = "John",
            LastName = "Hastings",
            Email = "David@qq.com",
            DateOfBrith = new DateTime(1980, 10, 5),
            Gender = Gender.Male,
            StudentClass = new StudentClass {ClassId = 1, ClassName = "计算机科学"},
            PhotoPath = "images/john.png"
        };

        var s2 = new Student()
        {
            StudentId = 2,
            FirstName = "Sam",
            LastName = "Galloway",
            Email = "Sam@qq.com",
            DateOfBrith = new DateTime(1981, 12, 22),
            Gender = Gender.Male,
            StudentClass = new StudentClass { ClassId = 2, ClassName = "软件工程" },
            PhotoPath = "images/sam.jpg"
        };

        var s3 = new Student()
        {
            StudentId = 3,
            FirstName = "Mary",
            LastName = "Smith",
            Email = "mary@qq.com",
            DateOfBrith = new DateTime(1979, 11, 11),
            Gender = Gender.Female,
            StudentClass = new StudentClass { ClassId = 3, ClassName = "通信工程" },
            PhotoPath = "images/mary.png"
        };

        var s4 = new Student()
        {
            StudentId = 4,
            FirstName = "Sara",
            LastName = "Longway",
            Email = "sara@qq.com",
            DateOfBrith = new DateTime(1982, 9, 23),
            Gender = Gender.Female,
            StudentClass = new StudentClass { ClassId = 3, ClassName = "移动互联网" },
            PhotoPath = "images/sara.png"
        };

        Students = new List<Student> {s1, s2, s3, s4};
    }
}

Blazor 组件有多种生命周期方法。OnInitializedAsync是较常用的生命周期方法。我们重写此方法用来加载学生数据。

目前，我们在组件中硬编码了学生数据。随着我们课程的深入，我们将学习如何通过调用 RESTful API从数据库中加载这些数据。

MainLayout.razor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@inherits LayoutComponentBase

<PageTitle>S</PageTitle>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

并在Site.css中添加头像的样式

1
2
3
4
5
6
// Site.css

.imageThumbnail {
    height: 200px;
    width: auto;
}
相关文章