使用 Visual Studio Code 的 Blazor Server CRUD 应用

Blazor是一项微软新技术，允许开发者使用 C# 而非 JavaScript 为浏览器编写代码。Blazor 应用由使用 C#、HTML 和 CSS 实现的可重用 Web UI 组件组成。客户端和服务器代码均使用 C# 编写，从而允许共享代码和库。您的 C# 代码可以轻松调用 JavaScript API 和库。您可以继续使用现有的庞大 JavaScript 库生态系统来开发客户端 UI，同时使用 C# 编写逻辑。

Blazor是一个 Web 框架，旨在在基于WebAssembly的 .NET 运行时（Blazor WebAssembly ）上的浏览器中运行客户端，或在ASP.NET Core上的服务器端运行（Blazor Server）。无论托管模型如何，应用程序和组件模型都是相同的。

在本文中，我们将使用 Blazor服务器端托管模型构建一个简单的员工管理系统，该系统允许我们执行 CRUD 操作。为此，我们将创建一个Blazor Server Web 项目、一个用于管理后端的.Net Core Web API项目以及一个用于该模型的.Net Core 类库项目。

对于开发环境，我们将使用Visual Studio Code。

我们将要构建的应用程序的源代码可以在我的 git 存储库中找到。

设置开发环境

先决条件

• Visual Studio 代码
• .NET Core 3.1 SDK
• SQL Server Express

在 vscode 中安装所需的扩展

C#扩展是调试和 C# 代码 IntelliSense 支持所必需的。C

# 扩展帮助我们创建新的类、枚举和接口。它还提供了一个可能的快速修复Ctrl+.(Control + Period)方案。
我还安装了一些实用的扩展，例如Blazor Snippets、Razor+等，以支持开发工作流程。扩展市场 (Extension Marketplace)上有很多可用的扩展。

我使用 Visual Studio Code 版本 1.48.0 进行此演示。

让我们在您首选的位置创建一个名为“BlazorServerCRUD”的文件夹。我们将使用它作为我们项目的根目录。

现在我们已经准备好开始我们的开发了。

创建 Blazor Server Web 应用程序

让我们创建一个 Blazor Server 项目。在 vscode 中，打开一个新的集成终端窗口。默认终端是 Powershell，位置将是默认用户目录。使用cd命令并导航到我们之前创建的目录。

我们可以使用.NET Core CLI命令dotnet new来创建项目。我们可以使用blazorserver模板创建一个新的 Blazor Server 项目。在这里，您可以看到可与命令一起使用的项目模板的完整列表dotnet new。

dotnet new blazorserver -o 'BlazorServerCRUD.Web'

一个新的 Blazor Server Web 项目已创建。现在我们需要在 vscode 中打开项目文件夹。在 vscode 资源管理器中，单击“打开文件夹”，然后选择项目目录。

在 vscode Explorer 中，我们可以看到我们新创建的项目，它看起来应该是这样的，

Blazor 项目模板包含一些默认文件，如果我们立即运行应用程序，它将以 Hello World! 的形式启动。要从 vscode 启动应用程序，我们需要配置特定于 vscode 的启动配置。launch.json该文件用于在 vscode 中配置调试器。

vscode 会生成一个launch.json包含几乎所有必需信息的文件。转到“运行”选项卡，然后单击“创建 lauch.json 文件”，它会询问环境，请选择.Net Core（不要选择“Blazor WebAssembly Debug”，因为我们的应用程序是 Balzor Server 应用），如下所示。

它将创建launch.json文件，它应该看起来像这样，

点击添加配置按钮，会弹出配置列表，选择.NET:启动本地NET Core Web应用程序

这将添加所需的调试配置，并在配置文件中将其更改<target-framework>为netcoreapp3.1，并将<project-name.dll>更改为BlazorServerCRUD.Web.dll。现在启动文件应该如下所示：

我们的调试配置现已完成。好的，让我们通过点击“运行”>“开始调试”或按F5来运行我们的应用程序。

将会弹出一条错误消息：找不到“构建”任务，其中包含“配置任务”选项。这是因为我们需要在启动之前构建应用程序，并且在我们的launch.json 构建中将其指定为preLaunchTask

单击配置任务，然后选择从模板中创建task.json并选择.NET Core模板。

这将添加一个task.json文件，

现在，我们已经准备好构建、调试和启动 Blazor 应用程序了。按 F5 键，应用程序将在浏览器中启动。

我们已经成功从 VS Code 启动了 Blazor Server 应用。接下来，我们需要创建一个模型类。这里我将在一个单独的 .NET 标准类库项目中创建一个模型类。

创建.Net Core类库项目

我们将创建一个新项目，但在 vscode 中打开的文件夹是我们 Web 项目的根文件夹。现在我们需要使用一个窗口管理多个项目。vscode 有一个“工作区”的概念，它允许你在同一个窗口中向 vscode 添加多个“根”文件夹。

那么，让我们在 vscode 中设置工作区。首先，打开父文件夹，

然后使用 vscode 中的“将工作区另存为”选项将打开的文件夹保存为工作区。

我们的工作区已经准备好了。让我们创建一个类库项目。要创建 .NET Core 类库项目，请在新的终端窗口中运行以下命令：

dotnet new classlib -o BlazorServerCRUD.Models

确保从工作区目录运行命令 - BlazorServerCRUD

新的类库项目将以名称BlazorServerCRUD.Models添加，并且 vscode Explorer 应如下所示，

现在，我们的 vscode 工作区中有两个项目，我们需要将库项目引用添加到我们的 Web 项目中。这意味着我们在调试应用程序时可能需要构建这两个项目。该怎么做呢？一种方法是dotnet build每次都使用命令构建类库项目。为了更方便，我们可以添加一个解决方案 (.sln) 文件，并将这两个项目都添加到该解决方案中。这样，调试时这两个项目都会被构建。

让我们看看如何在 vscode 中实现这一点。打开一个新的终端并运行dotnet new sln命令来创建解决方案文件

dotnet new sln -n BlazorServerCRUD

将创建一个名为“BlazorServerCRUD”的新解决方案文件。让我们使用dotnet sln add命令将项目添加到此sln。

dotnet sln add BlazorServerCRUD.Web/BlazorServerCRUD.Web.csproj
dotnet sln add BlazorServerCRUD.Models/BlazorServerCRUD.Models.csproj

为了启动应用程序，vscode 会在根目录中查找launch.json和task.json。由于我们将根目录从 BlazorServerCRUD.Web 更改为 BlazorServerCRUD，因此也必须移动这些配置文件。或者，我们可以为当前根目录添加新的启动配置文件。请注意，新目录中的“program”和“cwd”位置launch.json现在更改为：

现在，我们已经根据 vscode 工作区的变化完成了启动配置的更改。运行应用程序并确保所有设置均正确。

让我们创建一个具有一些属性的员工模型类。您可以通过右键单击BlazorServerCRUD.Models并选择“新建类”来完成此操作。

注意：只有在 vscode 中安装了C# Extensions扩展，您才会看到此“New Class”上下文菜单选项

员工模型类应该看起来像这样。

对于该Gender属性，我创建了一个单独的enum类，如下所示。

对于Department属性，我已经创建了另一个class具有 DepartmentId 和 DepartmentName 属性的属性。

现在，让我们将 BlazorServerCRUD.Models 添加为 BlazorServerCRUD.Web 的引用。我们可以使用dotnet add reference命令添加项目引用。从 Web 项目文件夹运行此命令，即使用cd BlazorServerCRUD.Web并运行以下命令。

dotnet add reference ../BlazorServerCRUD.Models/BlazorServerCRUD.Models.csproj

现在我们已经创建了模型类库项目，并将其引用到 Blazor Web 应用程序中。
下一步是创建一个 API 项目来管理员工数据。

创建 ASP.Net Core Web API

为了管理数据访问，我们将添加一个 REST API 项目作为第三个项目。让我们使用dotnet new命令添加 api 项目，并将其添加到我们的解决方案中，如下所示。之所以--nohttps使用 ，是因为我们不希望在开发环境中使用 https 绑定。

在 Visual Studio Code 中运行多个项目

我们的 Blazor 应用程序将使用新创建的 API 进行后端数据访问。也就是说，这两个项目需要同时启动。为此，我们需要在launch.json文件中再添加一个配置。在目录launch.json中打开文件.vscode，然后单击右下角的“添加配置”按钮。选择“.NET: 启动本地 NET Core Web 应用程序”。它将再添加一个“.NET Core 启动 (web)”配置。将“.NET Core 启动 (api)”更改name为“.NET Core 启动 (api)”以标识启动设置。将program新添加的配置的属性设置为指向 API 应用程序 dll。

现在我们有两个调试配置，一切正常，但无法同时运行这两个项目。让我们调整env属性来设置ASPNETCORE_URLS控制应用程序启动 URL 的 。我们的 Web API URL 设置为http://localhost:5000，Web 应用程序 URL 设置为http://localhost:5001

以下是我的完整配置launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": ".NET Core Launch (Api)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/BlazorServerCRUD.Api/bin/Debug/netcoreapp3.1/BlazorServerCRUD.Api.dll",
            "args": [],
            "cwd": "${workspaceFolder}/BlazorServerCRUD.Api",
            "stopAtEntry": false,
            "serverReadyAction": {
                "action": "openExternally",
                "pattern": "\\bNow listening on:\\s+(https?://\\S+)",
                "uriFormat": "%s/api/employee"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development",
                "ASPNETCORE_URLS": "http://localhost:5000"
            },
        },
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/BlazorServerCRUD.Web/bin/Debug/netcoreapp3.1/BlazorServerCRUD.Web.dll",
            "args": [],
            "cwd": "${workspaceFolder}/BlazorServerCRUD.Web",
            "stopAtEntry": false,
            "serverReadyAction": {
                "action": "openExternally",
                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development",
                "ASPNETCORE_URLS": "http://localhost:5001"

            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/BlazorServerCRUD.Web/Views"
            }
        }

    ]
}

现在我们所有的配置都已准备就绪。

前往 vscode 的“运行”选项卡，您将看到列出的两个启动配置。如果您选择“API”配置并点击绿色的播放按钮，它将启动 API。在 API 运行后，您可以选择“Web”配置并点击绿色的播放按钮，这样两个应用程序都将以调试模式运行。

添加实体框架核心

现在我们将为项目添加数据库支持。为此，对于数据访问，我们使用Entity Framework Core。要将 EF Core 添加到我们的项目中，我们需要安装Microsoft.EntityFrameworkCore.SqlServerNuGetMicrosoft.EntityFrameworkCore.Tools包。让我们使用dotnet add package命令来完成此操作。这些包需要安装在 API 项目中。打开新的终端窗口，导航到 BlazorServerCRUD.Api 目录并运行命令。

我们还需要将我们的模型类库项目引用添加到 API 项目中。

现在我们已经将所需的包和引用添加到我们的 API 项目中。让我们在 API 项目文件中验证一下。

在此演示中，我使用 EF Core Code First 方法进行数据访问。首先，我们将连接字符串添加到项目appsettings.json文件中BlazorServerCRUD.Api。添加的连接字符串如下所示。这里我使用SQL Server Express LocalDB作为数据库。

Server=(localdb)\\mssqllocaldb;Database=DBEmployees;Trusted_Connection=True;MultipleActiveResultsets=true

让我们添加一个名为的新文件夹Models，BlazorServerCRUD.Api并添加一个名为的新类AppDbContext.cs。

修改AppDbContext类以从 派生DbContext。为此，我们需要导入命名空间Microsoft.EntityFrameworkCore。借助C# 扩展， vscode 将显示导入此命名空间的快速修复方法。

为了使DbContext类能够执行任何有用的工作，它需要一个DbContextOptions类的实例。该DbContextOptions实例包含配置信息，例如连接字符串和要使用的数据库提供程序。我们将DbContextOptions类的实例传递给base DbContext另一个类。更新后的类应该如下所示。

现在，我们将为DbSet应用程序中创建的每个实体创建一个属性。目前，我们已经拥有代表相应数据库表的Department和类。我们将使用这些属性来查询和保存 Employee 和 Department 类的实例。更新后的代码如下所示。EmployeeDbSet

让我们为员工和部门添加一些种子数据。我们可以通过重写OnModelCreating类来实现。在此之前，为了简单起见，我们先将类Department中的属性更改为。Employeeint DepartmentID

下一步是在 Startup 类中配置 SQL Server，ConfigureServices方法如下所示。

最后一步是添加数据库迁移。为此，我们需要安装.Net Core EF 工具。使用以下命令全局安装 EF 工具。

dotnet tool install --global dotnet-ef

现在让我们使用dotnet ef migrations add命令添加数据库迁移。

一旦迁移成功，迁移文件夹将被添加到 API 项目中。

下一步是应用创建的迁移。为此，我们将运行dotnet ef database update命令。

成功完成后，我们将在 EmployeeDB 数据库中创建包含种子数据的表。您可以在应用迁移时看到数据库创建日志，如下图所示。

现在数据库已经设置好了种子数据，我们可以开始实现 CRUD 操作了。我们将使用存储库模式来实现访问数据源所需的逻辑。

让我们创建一个接口IEmployeeRepository，定义所有针对员工对象执行的 CRUD 操作。
为此，我们必须导入BlazorServerCRUD.Models到这个接口。让我们使用快速修复

IEmployeeRepository我已经添加了在界面中执行 CRUD 操作的所有方法。

下一步是创建EmployeeRepository类并实现IEmployeeRepository接口。

这个EmployeeRepository类需要AppDbContext与 SQL 数据库进行通信。我们可以通过构造函数注入 AppDbContext 类的实例来实现。

AppDbContext我们已经在类中注入了依赖项EmployeeRepository。现在让我们将实际的实现添加到所有 CRUD 方法中，如下所示。

同样，我们必须创建一个名为 IDepartmentRepository 的接口类和DepartmentRepositoryDepartment 实体的实现类，如下所示。

并且，我们需要在 Startup.cs 类中使用接口注册存储库实现。

现在我们已经准备好了存储库类。让我们构建 REST API 来访问员工数据。首先，我们需要创建一个控制器类。我创建了一个 EmployeesController 类，它派生自 ControllerBase 类。为此，我们可以使用aspnet-codegenerator (Scaffolding) 。此工具运行 ASP.NET Core 脚手架引擎，用于提供控制器等可用的生成器。让我们通过运行以下命令来安装dotnet aspnet-codegenerator 。

dotnet tool install -global dotnet-aspnet-codegenerator

我们还需要添加Microsoft.VisualStudio.Web.CodeGeneration.Design用于搭建控制器的脚手架。让我们使用以下命令添加此包

dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design

我们已经准备好使用dotnet aspnet-codegenerator创建我们的第一个控制器。运行以下命令来生成我们的EmployeeController

dotnet aspnet-codegenerator controller -name EmployeeController -api -outDir Controllers

现在，为了从数据库中检索员工数据，我们需要访问 EmployeeRepository。我已更新员工控制器类，通过构造函数注入一个 IEmployeeRepository 类，如下所示。

让我们添加一个HttpGet方法GetEmployees来检索所有员工的列表。它将使用基类中200 OK内置的方法返回一个 Http 状态代码作为响应。OKControllerBase

类似地，让我们在此添加其他必需的方法EmployeeController。另一个HttpGet带有参数的方法id用于通过 id 获取特定员工的员工数据，一个HttpPost用于保存的方法，一个HttpPut用于更新的方法，以及一个HttpDelete用于删除员工数据的方法。

让我们在API 的配置设置中添加一个uriFormat属性，以便在启动应用程序时调用我们的员工控制器，如下所示。serverReadyActionlaunch.json

现在我们可以通过启动应用程序来测试我们的 API。转到“运行”，选择“.NET Core 启动（Api）”，然后点击“播放”按钮。

我们的 API 将默认在浏览器中通过api/employeesURL 启动，然后调用GetEmployees方法返回员工列表。

现在我们已经准备好 API 来提供一些数据了。在实现所有 CRUD 操作之前，让我们回到 Blazor Web 项目，看看如何使用此 API 来显示员工列表。

自定义 Blazor Server Web 应用程序

在我们的 Blazor 项目中，项目模板包含一些默认文件。让我们删除项目中不需要的那些文件。我已在下面突出显示要删除的文件。

另外，从 Startup.cs 类中删除已删除的文件引用。

并从 NavMenu.razor 文件中删除不需要的菜单。如下所示。

清除所有不需要的文件后，我们启动应用程序看看目前为止得到了什么。页面什么也没有显示，因为没有链接到 home/root 地址。

让我们修改逻辑以显示员工列表。为此，请在文件夹EmployeeList.razor中添加一个名为 razor 的组件Pages。您可以使用dotnet new razorcomponent命令添加新的 razor 组件。

EmployeeList.razor 组件将如下所示。

现在要将EmployeeList.razor组件链接到根地址，添加@page指令，如下所示。

现在让我们再次运行项目。如下所示。EmployeeList 组件出现在根 URL 中。

现在，我们已经创建了第一个用于查看员工列表的razor组件。
接下来，我们需要从BlazorServerCRUD.Web Blazor应用程序中调用在BlazorServerCRUD.Api项目中创建的REST API。
我们将创建一个单独的服务来调用该REST API。为此，我在BlazorServerCRUD.Web项目中添加了一个名为“Services”的新文件夹。我添加了一个名为“IEmployeeService”的新接口文件，并以GetEmployees作为接口方法，如下所示。

我添加了另一个实现类，EmployeeService它实现了IEmployeeService接口。为了从 EmployeeService 调用我们的 API，我们需要一个HttpClient。让我们将 HttpClient 实例注入到 EmployeeService 中。

接下来，我们必须使用方法Httpclient将服务注册到 ASP.Net Core 依赖注入容器，并将接口映射到 EmployeeService 类。此外，还要添加 API 的基地址。AddHttpClientIEmployeeService

接下来，我们需要Microsoft.AspNetCore.Blazor.HttpClient在 BlazorServerCRUD.Web 项目中安装 Nuget 包。目前，它是预发布版本。我们可以通过运行以下命令来添加该包：

dotnet add package Microsoft.AspNetCore.Blazor.HttpClient --version 3.2.0-preview3.20168.3

现在，让httpClient我们在类中使用实例EmployeeServices通过方法调用 REST API GetEmployees。我使用了GetJsonAsync返回 Employee 数组的方法。这是 HttpClient 的一个扩展方法。包含Microsoft.AspNetCore.Components命名空间以使此方法生效。该方法还需要访问资源的路径。给定的路径/api/employee将附加到BaseAddress返回结果中。

现在，让我们修改EmployeeListrazor组件以显示通过访问的员工数据EmployeeService。首先，我们需要注入IEmployeeService到blazor组件中EmployeeList。

然后，在ASP.NET Core Blazor 生命周期方法EmployeeService中使用此注入实例来获取员工列表。返回的数据被赋值给属性。OnInitializedAsyncemployees

EmployeeList.razor页面使用该employees属性在屏幕上显示数据。让我们向 Razor 组件添加一些 HTML 代码来显示数据，如下所示。

我们已经准备好在 Blazor 应用程序中显示从 API 获取的数据。转到“运行”，首先启动 API，然后启动 Web 应用程序。现在，您可以看到员工列表组件现在使用 REST API 显示来自数据库的数据。

现在，我们已经显示了Employee表中的员工数据。您可以看到，这里部门显示为部门 ID。要显示部门名称，我们必须从Department表中获取数据。为此，我们在实体类中添加一个导航属性。DepartmentEmployee

然后我们必须通过链接方法更新GetEmployees和GetEmployee方法来包含Departments表数据，Include如下所示。

接下来，我们需要更新EmployeeList.razorBlazor 组件以显示部门名称而不是部门 ID。

让我们运行应用程序，blazor 组件将显示部门名称而不是部门 ID。

下一步是获取特定员工的详细信息。为此，我们添加一个新的razor组件EmployeeDetails.razor来显示特定员工的详细信息。

dotnet new razorcomponent -n EmployeeDetails -o Pages

我们将从我们的EmpoloyeeList页面导航到此页面。为此，我们必须通过使用@page指令提供路由参数。以下{id}是代表员工 ID 的路由参数。

要访问{id}路由参数，我们必须在路由中创建一个属性EmployeeDetails.razor，并用属性 (Attribute) 修饰它[Parameter]。通过此更改，id路由参数将直接映射到Id属性。

现在，让我们添加一个方法GetEmployee来访问接口中的员工详细信息IEmployeeService，并实现它，EmployeeServices如下所示，

注意：_import.razor您可以使用如下所示的方式将所需的命名空间导入组件，

为了从员工详情页面调用我们的GetEmployee方法，我们需要在组件中注入IEmployeeService。为了存储此方法的结果，我们还需要创建一个Employee属性。完成这些更改后，我们的EmployeeDetails.razor组件应该如下所示。

接下来，我们可以使用ASP.NET Core Blazor 生命周期方法OnInitializedAsync通过 id 检索员工数据。

让我们添加 HTMLEmployeeDetails.razor组件，使用该属性显示员工详细信息employee。同时添加用于执行“编辑”、“删除”和“返回”操作的按钮，这些操作我们接下来会实现。为了避免NullReferenceException错误，请添加一个子句，在使用该属性之前If检查它是否已初始化。Employee

为了访问上述员工详细信息页面，让我们在员工列表页面中添加一个链接。

保存所有这些更改后，让我们运行应用程序。在员工列表页面中，点击员工姓名。我们将被重定向到员工详情页面，它应该如下所示

现在，我们已经通过员工 ID 显示了特定员工的详细信息。接下来，我们将实现实际的 CRUD 操作。为此，我们必须在IEmployeeService界面中添加必要的方法，

并且，在EmployeeService课堂上实现这些方法。

为了理解ASP.NET Core Blazor 事件处理，让我们首先实现Delete操作。

为此，DeleteEmployee()在EmployeeDetails.razor组件中添加一个新方法。

并且，在事件处理程序中调用此方法，@onclick如下所示，

保存这些更改后，我们就实现了删除操作。运行应用程序，找到要删除的员工数据，然后单击“删除”按钮。该员工的数据将从数据库中删除。现在，您需要手动导航到主页进行验证。为了在 ASP.NET Core 中处理 URI 重定向，我们可以使用NavigationManager 类。让我们注入NavigationManager并EmployeeDetails.razor修改该Delete方法，如下所示。

现在，点击员工详情页上的“删除”按钮，您将被重定向到主页。您可以看到已删除的员工不再列在主页上。

现在，让我们实现创建和更新操作。为此，我们将分别使用CreateEmployee.razor和UpdateEmployee.razor。在创建这两个组件之前，让我们创建一个可由创建和更新组件共享的子组件。在这里，我们还将学习如何使用参数将数据从父组件传递到子组件。

让我们Form.razor在Pages文件夹中添加一个razor组件。

dotnet new razorcomponent -n Form -o Pages

在此Form.razor组件中，我们将使用ASP.NET Core Blazor 表单和验证。Blazor 使用数据注释支持表单和验证。

在此中Form.razor添加一个EditForm标签，该标签接受一个Employee模型并包含一个提交函数调用。在EditForm标签内，我们将添加所需的 Blazor 表单控件和验证。

在@code部分中Form.razor，使用 属性声明参数[Parameter]。这些参数用于在父组件和子组件之间传递数据。我们有一个Employee对象、一个用于保存按钮文本的字符串，以及一个EventCallback用于提交表单时调用的方法。以下是我的Form.razor组件。

附言：为了简单起见，这里对部门选择进行了硬编码，在实际场景中，应该从数据库中获取部门值。

<EditForm Model="@employee" OnValidSubmit="@OnValidSubmit">
    <DataAnnotationsValidator />
    <div class="form-group">
        <label>Employee Name :</label>
        <div>
            <InputText @bind-Value="@employee.EmployeeName" class="form-control col-sm-3" />
            <ValidationMessage For="@(() => employee.EmployeeName)" />
        </div>
    </div>
    <div class="form-group ">
        <div>
            <label>Gender :</label>
            <div>
                <InputSelect @bind-Value="@employee.Gender" class="form-control col-sm-3"> 
                   <option value="Select">--Select--</option>
                   <option value="Male">Male</option>
                   <option value="Female">Female</option>
                   <option value="Other">Other</option>
                </InputSelect>
                <ValidationMessage For="@(() => employee.Gender)" />
            </div>
        </div>
    </div>
    <div class="form-group ">
        <div>
            <label>DOB :</label>
            <div>
                <InputDate @bind-Value="@employee.DateOfBirth" class="form-control col-sm-3" />
                <ValidationMessage For="@(() => employee.DateOfBirth)" />
            </div>
        </div>
    </div>
    <div class="form-group ">
        <div>
            <label>Department :</label>
            <div>
                <select @bind="@employee.DepartmentID" class="form-control col-sm-3"> 
                   <option value=0>--Select--</option>
                   <option value=1>Admin</option>
                   <option value=2>HR</option>
                   <option value=3>Payroll</option>
                </select>
                <ValidationMessage For="@(() => employee.DepartmentID)" />
            </div>
        </div>
    </div>
    <button type="submit" class="btn btn-success">
        @ButtonText
    </button>
</EditForm>

@code {
    [Parameter]
    public Employee employee { get; set; }
    [Parameter]
    public string ButtonText { get; set; } = "Save";
    [Parameter]
    public EventCallback OnValidSubmit { get; set; }
}

现在，让我们开始使用 Forms 组件。创建一个新的 Razor 组件CreateEmployee.razor

dotnet new razorcomponent -n CreateEmployee -o Pages

为了导航到此创建员工页面，我们添加一个@page指令。然后，注入IEmployeeService用于调用该AddEmployee方法，并注入NavigationManger用于处理来自此组件的重定向。

在此CreateEmployee组件中，添加Form我们之前创建的组件。Form我们需要向此组件传递三个参数：'ButtonText' 字符串、'employee' 对象和 'OnValidSubmit' 方法。为此，我们在部分Employee中创建一个对象和一个方法@code。完成这些更改后，我们的组件CreateEmployee.razor应该如下所示：

现在，我们需要创建一个CreateEmployee指向主页的链接。为此，我们需要修改EmployeeList组件并添加一个“新建”按钮。我添加了一个锚标签，href="createemployee"如下所示：

保存所有这些更改后，让我们运行应用程序。在主页上，您可以看到“新建”按钮显示。

通过单击“新建”按钮，您将被导航到CreateEmployee组件。

您可以看到创建员工表单，其按钮文本为“创建员工”。在这里，您可以保存员工详细信息，然后导航到主页。新创建的员工将显示在员工网格中。

现在，让我们实现更新操作。首先，创建一个新的razor组件UpdateEmployee.razor

dotnet new razorcomponent -n UpdateEmployee -o Pages

在这个UpdateEmployee组件中，我们可以使用相同的Form组件，但按钮文本不同。添加一个@page带有路由参数的指令。以下{id}是代表员工 ID 的路由参数。然后，注入IEmployeeService用于调用该UpdateEmployee方法，并注入NavigationManger用于处理来自此组件的重定向。

与我们在组件中所做的相同CreateEmployee，在UpdateEmployee组件中添加组件Form，我们需要传递三个参数：'ButtonText' 字符串、'employee' 对象和 'OnValidSubmit' 方法。为此，让我们在部分Employee中创建一个对象和一个方法@code。除此之外，要访问{id}路由参数，我们必须创建一个属性Id并用该特性修饰它[Parameter]。此外，我们需要使用此参数获取员工的详细信息Id。为此，我们可以使用不同的ASP.NET Core Blazor 生命周期方法OnParametersSetAsync。完成这些更改后，我们的UpdateEmployee.razor代码应该如下所示。

现在，我们的组件已全部设置完毕UpdateEmployee。我们将从组件导航到此组件EmployeeDetails。在 中EmployeeDetails.razor，让我们修改“编辑”按钮，并添加一个指向 的链接UpdateEmployee作为@employee.EmployeeID路由参数。

保存所有这些更改后，让我们运行应用程序。在员工列表组件中，单击员工姓名。它将导航到员工详细信息。

点击“编辑”按钮，我们的更新员工表单将加载所有员工详细信息，并且按钮文本将显示为“更新员工”。

修改任何字段并单击“更新员工”按钮，您将被导航到员工列表，在那里您可以看到更新的员工详细信息。

概括

本文介绍了 ASP.Net Core Blazor 服务器应用程序，以及如何使用 Blazor 应用程序执行基本的 CRUD 操作。我们还学习了如何在 Visual Studio Code 中设置 ASP.Net Core 开发环境以及如何在 Visual Studio Code 中处理多个项目。我们使用 Entity Framework Core 构建了一个 ASP.NET Core 3.1 WebAPI 来管理后端数据。您可以在此处找到完整的源代码。