Razor 组件

  • 8 分钟

设置开发环境后，让我们探索 Blazor 项目的结构，并了解 Blazor 组件的工作原理。

主页

应用的主页由位于 Components/Pages 目录中的 Home.razor 文件定义。 Home.razor 包含以下代码：

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

@page 指令指定了此页面的路径，因此当用户导航到应用的根目录时，Home 组件将被显示。 该 PageTitle 标记是一个 Blazor 组件，用于设置当前页的标题，使其显示在浏览器选项卡中。文件的其余部分是定义页面内容的普通 HTML。

什么是 Razor？

Razor 是基于 HTML 和 C# 的标记语法。 Razor 文件 （.razor） 包含纯 HTML，然后包含 C# 来定义任何呈现逻辑，例如条件、控制流和表达式计算。 然后，Razor 文件编译为封装组件呈现逻辑的 C# 类。

什么是 Razor 组件？

如果浏览 Blazor 项目中的文件，你会注意到构成项目的大多数文件都是 .razor 文件。 在 Blazor 中，Razor 文件定义构成应用 UI 部分的可重用组件。 组件定义要呈现的 HTML 以及如何处理用户事件。

在编译时，每个 Razor 组件都内置在 C# 类中。 该类可以包含常见的 UI 元素，例如状态、呈现逻辑、生命周期方法和事件处理程序。 由于在 Razor 中创建的 Blazor 组件只是 C# 类，因此可以使用组件的任意 .NET 代码。

使用组件

若要使用另一个组件中的组件，请添加一个 HTML 样式标记，其名称与组件名称匹配。 例如，如果你有一个名为 MyButton.razor 的组件，你可以通过添加 <MyButton /> 标签将 MyButton 组件添加到另一个组件。

组件参数

组件还可以具有参数，允许在使用组件时将数据传递到组件。 组件参数通过向具有 [Parameter] 属性的组件添加公共 C# 属性来定义。 然后，可以使用与属性名称匹配的 HTML 样式属性为组件参数指定值。 参数的值可以是任何 C# 表达式。

@code 块

@code Razor 文件中的块用于将 C# 类成员（字段、属性和方法）添加到组件。 可以使用 @code 来跟踪组件状态，添加组件参数，实现组件生命周期事件，并定义事件处理程序。

尝试使用计数器

在正在运行的应用中，选择左侧边栏中的“计数器”选项卡导航到计数器页面。 随后应会显示以下页面：

正在运行的应用中的计数器的屏幕截图。

选择“点击我”按钮，在不刷新页面的情况下递增计数。 在网页中递增计数器通常需要编写 JavaScript，但使用 Blazor 时，可以使用 C#。

可在 Components/Pages/Counter.razor 处找到 Counter 组件的实现。

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

浏览器中针对 /counter 的请求（由顶部的 @page 指令指定）会导致 Counter 组件呈现其内容。 该 @rendermode 指令为组件启用交互式服务器呈现，以便它可以处理来自浏览器的用户界面事件。

每次选择“单击我”按钮时会出现以下情况：

  • onclick 事件被触发。
  • 调用 IncrementCount 方法。
  • currentCount 递增。
  • 组件被渲染以显示更新后的计数。