使用 Blazor 组件创建用户界面

使用 Blazor 组件，可以使用 .NET 代码定义包含动态内容的网页或 HTML 部分。 在 Blazor 中，可以使用 C# 而不是 JavaScript 来构建动态内容。

假设你正在为披萨送货公司创建一个新的新式网站。 你从欢迎页面开始，该页面将成为大多数网站用户的登陆页面。 你想要在该页面上显示特价商品和热门比萨。

在本单元中，你将了解如何在 Blazor 中创建组件，并编写在这些组件上呈现动态内容的代码。

了解 Blazor 组件

Blazor 是开发人员可以通过编写 C# 代码来创建丰富的交互式用户界面（UI）的框架。 使用 Blazor，可以为所有代码（服务器端和客户端）使用相同的语言。 可以渲染它以在多种不同的浏览器中显示，包括移动设备上的浏览器。

在 Blazor 中，UI 是从称为 组件的自包含代码部分构建的。 每个组件可以包含 HTML 和 C# 代码的组合。 组件是使用 Razor 语法编写的，其中代码使用 @code 指令进行标记。 其他指令可用于访问变量、绑定到值并实现其他呈现任务。 编译应用后，HTML 和代码将编译为组件类。 组件以 .razor 扩展名作为文件写入。

下面是 Blazor 组件的简单示例：

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them blazing fast!";
}

在此示例中，代码设置名为 welcomeMessage 的字符串变量的值。 该变量呈现在 HTML 标记 <p> 中。 本单元稍后将介绍更复杂的示例。

创建 Blazor 组件

在 dotnet 命令行接口（CLI）中使用 blazor 模板创建 Blazor 应用时，默认包含多个组件：

dotnet new blazor -o BlazingPizzaSite

默认组件包括 Index.razor 主页和 Counter.razor 演示组件。 这两个组件都放置在 Pages 文件夹中。 可以修改这些视图以满足你的需求，或将其删除，并将其替换为新组件。

若要向现有 Web 应用添加新组件，请使用以下命令：

dotnet new razorcomponent -n PizzaBrowser -o Pages

• 该 -n 选项指定要添加的组件的名称。 此示例添加了名为 PizzaBrowser.razor 的新文件。
• 该 -o 选项指定将包含新组件的文件夹。

创建组件后，可以使用 Visual Studio Code 将其打开以编辑：

code Pages/PizzaBrowser

在 Blazor 组件中编写代码

在 Blazor 中生成 UI 时，通常在同一文件中将静态 HTML 和 CSS 标记与 C# 代码混合使用。 若要区分这些类型的代码，请使用 Razor 语法。 Razor 语法包括以符号为前缀的 @ 指令，这些指令分隔 C# 代码、路由参数、绑定数据、导入的类和其他功能。

让我们再次考虑此示例组件：

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them fast!";
}

可以通过 <h1> 和 <p> 标签识别 HTML 标记。 此标记是页面的静态框架，代码将插入动态内容。 Razor 标记包括：

• 指令@page：此指令为 Blazor 提供路由模板。 在运行时，Blazor 通过将此模板与用户请求的 URL 匹配来查找要呈现的页面。 在这种情况下，它可能与窗体 http://yourdomain.com/index的 URL 匹配。
• 指令@code：此指令声明以下块中的文本为 C# 代码。 可以根据需要在组件中放置任意数量的代码块。 可以在这些代码块中定义组件类成员，并从计算、数据查找作或其他源设置其值。 在这种情况下，代码定义一个名为welcomeMessage的组件成员，并设置其字符串值。
• 成员访问指令：如果要在呈现逻辑中包含成员的值，请使用 @ 后跟 C# 表达式的符号，例如成员的名称。 在这种情况下，@welcomeMessage指令用于呈现welcomeMessage标签中的<p>成员的值。