上一篇

下一步

使用 Blazor 组件创建用户界面

已完成

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

假设你就职于一家披萨派送公司，负责创建新的现代化网站。 你将从欢迎页开始，该页面将成为大多数站点用户的登陆页。 你想在该页面上显示特价商品和受欢迎的披萨。

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

了解 Blazor 组件

Blazor 是一种框架，可供开发人员用于通过编写 C# 代码创建丰富的交互式用户界面 (UI)。 借助 Blazor，可以针对所有代码（服务器端和客户端）使用相同的语言，并呈现它以在许多不同浏览器（包括移动设备上的浏览器）中显示。

注意

Blazor 应用中的代码有两种托管模型：

• Blazor Server：在此模型中，应用是在 ASP.NET Core 应用的 Web 服务器上执行的。 客户端上的 UI 更新、事件和 JavaScript 调用通过客户端与服务器之间的 SignalR 连接发送。 在此模块中，我们将讨论此模型并为其编写代码。
• Blazor WebAssembly：在此模型中，Blazor 应用、其依赖项以及 .NET 运行时均在浏览器中下载并运行。

在 Blazor 中，从名为“组件”的自包含代码部分生成 UI。 每个组件都可以包含 HTML 和 C# 代码的混合。 组件是通过使用 Razor 语法编写的，其中的代码是用 @code 指令标记的。 其他指令可用于访问变量、绑定到值以及实现其他呈现任务。 编译应用时，HTML 和代码将编译为组件类。 组件被编写为扩展名为 .razor 的文件。

注意

Razor 语法用于将 .NET 代码嵌入到网页。 可以在 ASP.NET MVC 应用程序中使用它，其中文件的扩展名为 .cshtml。 Blazor 中使用 Razor 语法来编写组件。 但这些组件的扩展名为 .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) 中的 blazorserver 模板创建 Blazor 应用时，默认包含一些组件：

dotnet new blazorserver -o BlazingPizzaSite -f net6.0

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

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

dotnet new razorcomponent -n PizzaBrowser -o Pages -f net6.0

• -n 选项指定要添加的组件的名称。 此示例添加了一个名为 PizzaBrowser.razor 的新文件。
• -o 选项指定将包含该新组件的文件夹。
• -f 选项会强制使用框架版本 .NET 6 来生成应用程序。

重要

Blazor 组件的名称必须以大写字符开头。

创建组件后，可以打开该组件以使用 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 指令用于在 <p> 标记中呈现 welcomeMessage 成员的值。

继续