【Blazor-06】- Blazor模型类

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

以下是需要的模型类:

  1. Student
  2. ClassName
  3. Gender

创建模型类

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

image-20220419101511752

并创建对应的模型类

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
}

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

image-20220419143947010

我们会在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设为启动项目

image-20220419144054166

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>();

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

image-20220419144412162

创建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>