Razor 组件

现在已设置好开发环境，接下来将探索 Blazor 项目的结构，并了解如何添加新页。

什么是 Razor？

Razor 是一种标记语法，使用 HTML 和 C# 编写 Blazor Web 应用的 UI 组件。

Razor 基于 ASP.NET，专为创建 Web 应用而设计。

什么是 Razor 组件？

Razor 文件定义了构成部分应用 UI 的组件。 Blazor 中的组件类似于 ASP.NET Web Forms 中的用户控件。

如果浏览项目，则会看到大部分文件为 .razor 文件。

在编译时，每个 Razor 组件都内置于 .NET 类中。 类包括常见 UI 元素，如状态、呈现逻辑、生命周期方法和事件处理程序。

尝试使用计数器

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

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

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

@page "/counter"

<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 组件呈现其内容。

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

• 触发点击事件。
• 调用 IncrementCount 方法。
• currentCount 递增。
• 呈现组件来显示更新后的计数。