【Blazor-06】- Blazor 模型类

Posted on In Views: 19 Symbols count in article: 2.7k Reading time ≈ 2 mins.
Blazor 系列翻译 06-Blazor 模型类

按照教程进度，我们会开发一个员工管理系统，可以实现创建、读取、更新和删除员工等操作。

以下是需要的模型类：

  1. Student
  2. ClassName
  3. Gender

创建模型类

创建一个新的.NET 类库项目，将项目命名为 StudentManagement.Models。将解决方案命名为 BlazorTutorial。

并创建对应的模型类

Student.cs:

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
/// <summary>
/// 学生
/// </summary>
public class Student
{
    /// <summary>
    /// 学生Id
    /// </summary>
    public int StudentId { get; set; }

    /// <summary>
    /// 姓
    /// </summary>
    public string FirstName { get; set; }

    /// <summary>
    /// 名
    /// </summary>
    public string LastName { get; set; }

    /// <summary>
    /// 邮箱
    /// </summary>
    public string Email { get; set; }

    /// <summary>
    /// 生日
    /// </summary>
    public DateTime DateOfBrith { get; set; }

    /// <summary>
    /// 性别
    /// </summary>
    public Gender Gender { get; set; }

    /// <summary>
    /// 班级
    /// </summary>
    public StudentClass StudentClass { get; set; }

    /// <summary>
    /// 头像地址
    /// </summary>
    public string PhotoPath { get; set; }
}

StudentName.cs:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/// <summary>
/// 班级
/// </summary>
public class StudentClass
{
    /// <summary>
    /// 班级Id
    /// </summary>
    public int ClassId { get; set; }

    /// <summary>
    /// 班级名称
    /// </summary>
    public string ClassName { get; set; }
}

Gender.cs:

1
2
3
4
5
6
public enum Gender
{
    Male,
    Female,
    Other
}

选择创建类库项目，可以在不同的项目中重用这些模型

我们会在 Blazor Web 应用程序中使用这些模型，随着课程的推进，我们会创建 ASP.NET Core RESTful API，这些服务会提供 Blazor 项目所需要的数据。同样的，我们的 RESTful API 项目中也会使用这些模型类。

创建 Blazor Web 项目

我们再创建一个新的 Blazor Server 项目，将其命名为 StudentManagement.Web，这是一个允许我们对员工信息进行增删改查操作的 Web 应用程序。

StudentManagement.Web 依赖我们上面创建的模型类库，我们在 StudentManagement.Web 中添加对 StudentManagement.Models 项目的引用，并将 StudentManagement.Web 设为启动项目

从 StudentManagement.Web 项目中删除以下文件和文件夹

  • Data 文件夹
  • Pages/Counter.razor
  • Pages/FetchData.razor
  • Pages/index.razor
  • Shared/SurveyPrompt.razor

更改 Program.cs：

删除以下引用

1
using StudentManagement.Web.Data;

删除以下代码：

1
builder.Services.AddSingleton<WeatherForecastService>();

如果你跟着步骤操作，现在的项目目录应该是这样的：

创建 StudentList 组件

在 StudentManagement.Web 项目中，右键单击 Pages 文件夹添加一个新的 razor 组件。命名为 StudentList.razor 组件，我们使用这个组件显示员工列表。

在 StudentList.razor 组件中包含以下 @page 指令，用来告诉 Blazor 在我们导航到 /student 路径时展示此组件

1
2
3
4
5
6
@page "/student"

<h3>StudentList</h3>

@code {
}

更改 NvaMenu.razor 组件

删除以下 2 个导航栏菜单项

1
2
3
4
5
6
7
8
9
10
<li class="nav-item px-3">
    <NavLink class="nav-link" href="counter">
        <span class="oi oi-plus" aria-hidden="true"></span> Counter
    </NavLink>
</li>
<li class="nav-item px-3">
    <NavLink class="nav-link" href="fetchdata">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
    </NavLink>
</li>
Related Posts