【Blazor-06】- Blazor模型类

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

以下是需要的模型类：

1. Student
2. ClassName
3. Gender

创建模型类

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

并创建对应的模型类

Student.cs:

/// <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:

/// <summary>
/// 班级
/// </summary>
public class StudentClass
{
    /// <summary>
    /// 班级Id
    /// </summary>
    public int ClassId { get; set; }

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

Gender.cs:

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：

删除以下引用

using StudentManagement.Web.Data;

删除以下代码：

builder.Services.AddSingleton<WeatherForecastService>();

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

创建StudentList组件

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

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

@page "/student"

<h3>StudentList</h3>

@code {
}

更改NvaMenu.razor组件

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

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