快速入门：用 Blazor 构建一个简单的计数器示例

Blazor 是微软推出的一个强大框架，它可以用 C# 构建现代化的 Web 应用。无论你是初学者还是有经验的开发者，这篇博客将带你快速构建一个简单的计数器应用，帮助你掌握 Blazor 的基础知识。

准备工作

在开始之前，请确保你的开发环境已经准备好：

1. 安装 Visual Studio（推荐 2022 版）。
2. 安装 .NET SDK（.NET 6 或更高版本）。
3. 在 Visual Studio 的安装向导中选择 ASP.NET 和 Web 开发 工作负载。

1. 创建一个 Blazor 项目

步骤：

1. 打开 Visual Studio，点击 创建新项目。
2. 在模板中选择 Blazor Server 应用，然后点击 下一步。
3. 设置项目名称为 BlazorCounterDemo，并选择保存路径。
4. 点击 创建 后，等待 Visual Studio 初始化项目。

2. 理解项目结构

创建完成后，你会看到以下重要的文件和文件夹：

• Pages 文件夹：存放页面组件，例如 Index.razor、Counter.razor。
• Shared 文件夹：存放共享组件，例如导航菜单 NavMenu.razor。
• _Host.cshtml：定义 Blazor 应用的入口。

3. 构建计数器示例

（1）修改 Counter.razor

打开 Pages/Counter.razor 文件，默认代码如下：

@page "/counter"

<h3>计数器</h3>

<p>当前计数: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">点击增加</button>

@code {
    private int currentCount = 0;

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

（2）代码解读

1. @page "/counter"：定义页面的路由地址为 /counter。
2. @currentCount：通过 @ 符号将 C# 数据绑定到页面。
3. @onclick="IncrementCount"：绑定按钮点击事件到 C# 方法 IncrementCount。
4. @code 块：包含 C# 的组件逻辑，定义了变量 currentCount 和方法 IncrementCount。

（3）运行项目

1. 按下 F5 或点击 运行按钮，项目会在浏览器中启动。
2. 在页面中点击 “Counter” 菜单，然后点击按钮，观察计数器的变化。

4. 添加一个新页面

（1）创建 Pages/HelloWorld.razor

右键点击 Pages 文件夹，选择 添加 > Razor 组件，命名为 HelloWorld.razor。

（2）编辑 HelloWorld.razor 文件

在文件中添加以下代码：

@page "/hello"

<h3>欢迎使用 Blazor</h3>

<p>当前时间: @currentTime</p>

<button class="btn btn-primary" @onclick="UpdateTime">刷新时间</button>

@code {
    private string currentTime = DateTime.Now.ToString("HH:mm:ss");

    private void UpdateTime()
    {
        currentTime = DateTime.Now.ToString("HH:mm:ss");
    }
}

（3）更新导航菜单

打开 Shared/NavMenu.razor 文件，在导航列表中添加一项：

<li class="nav-item px-3">
    <NavLink class="nav-link" href="/hello" Match="NavLinkMatch.All">
        <span class="oi oi-home" aria-hidden="true"></span> Hello
    </NavLink>
</li>

（4）运行效果

• 点击 Hello 菜单项，会跳转到 /hello 页面。
• 点击 刷新时间 按钮，当前时间会实时更新。

5. 部署和扩展

本地运行

直接按下 Ctrl+F5 即可在本地运行你的应用，访问地址通常是 https://localhost:5001。

部署到服务器

1. 打开 Visual Studio 的发布向导（右键项目 > 发布）。
2. 选择部署目标，例如 Azure、IIS 或文件夹发布。
3. 按向导完成部署步骤。

扩展功能建议

• 数据绑定：在页面中实现表单数据的绑定和提交。
• 状态管理：使用依赖注入管理全局状态。
• 后端集成：通过 HttpClient 调用 REST API。

6. 参考和学习资源

学习资料

• Blazor 官方文档
• Microsoft Learn 免费课程

开源示例

• Blazing Pizza：微软官方示例项目。
• BlazorHero：一个企业级应用模板。

总结

通过这个简单的计数器示例，你已经掌握了 Blazor 的基础知识，包括组件开发、事件绑定和页面导航。Blazor 提供了强大的功能，支持用 C# 开发现代 Web 应用，非常适合有 .NET 背景的开发者快速上手。如果你对 Web 开发感兴趣，可以继续深入学习 Blazor 的高级功能，例如状态管理、性能优化和与 JavaScript 的互操作。