48、使用 Blazor 构建用户界面

使用 Blazor 构建用户界面

1. 前期操作与组件构建基础

在开始构建组件之前，有一些前期操作需要完成。首先，在左侧导航菜单中点击 “Weather”，之后关闭 Chrome 浏览器并关闭 Web 服务器。

接下来，我们将使用 Blazor 构建一个组件，用于列出、创建和编辑 Northwind 数据库中的客户信息。构建过程分为以下几个步骤：
1. 创建一个 Blazor 组件，该组件能够渲染作为参数传入的国家名称。
2. 使该组件既可以作为可路由页面，也可以作为常规组件使用。
3. 实现对数据库中客户信息进行 CRUD（创建、读取、更新、删除）操作的功能。

2. 定义和测试简单的 Blazor 组件

我们要将新组件添加到现有的 Blazor Web 应用项目中，具体操作如下：
1. 在 Northwind.Blazor 项目的 Components\Pages 文件夹中，添加一个名为 Customers.razor 的新文件。在 Visual Studio 2022 中，项目项模板名为 “Razor Component”；在 JetBrains Rider 中，项目项模板名为 “Blazor Component”。
2. 添加代码以输出 Customers 组件的标题，并定义一个代码块来存储国家名称的属性，代码如下：

<h3>
  Customers @(string.IsNullOrWhiteSpace(Country)