上一篇

下一步

Razor 组件

已完成

现在已设置好开发环境，接下来将探索 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 块

Razor 文件中的 @code 块用于将 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 的值。
• 呈现组件来显示更新后的计数。

继续